Using CSS to format report parameters

<p>I have a wep app that uses JSAPI to run BIRT reports. I'm using Twitter Bootstrap to style the page. I've set up the page to have 3 columns for the report parameters and nine columns for the report. This is working out but I'm seeing a problem with DATE parameters. When trying to change the date the top two lines of the date picker go to the right and the numbers of the calendar stay in the correct position.</p><p> </p><p>It's likely that I'll have to override the bootstrap css in some fashion but am wondering if anyone has run into this and solve the issue?</p><p> </p><p>TIA,</p><p>d e gress</p>

Find more posts tagged with

Comments

mwilliams

<p>I've not seen this issue before, but is there any way you can create a simple example that I can run to see the it?</p>

DavidGress

<p>In my page I put this bit of CSS:</p><p>img {
max-width:none;
}
select {
margin-bottom:auto;
}</p><p>max-width:none allows the image on the date time picker to show in chrome.</p><p>the margin-bottom: auto let removes space between the parameters.</p><p> </p><p>Not having this:</p><p><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" ></p><p> </p><p>in my page (directly uner the title tag) was putting IE9 into Document Mode IE 7 which was causing the datetime pickers top two lines to be offset from one another.</p><p> </p><p>Here;s the whole page for your reference:</p><p><%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a data-ipb='nomediaparse' href='http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a data-ipb='nomediaparse' href='http://www.w3.org/1999/xhtml'>http://www.w3.org/1999/xhtml</a>"></p><p>
<%
String CONTEXT = request.getContextPath();
String reportName = request.getParameter("reportName");
int serverPort = request.getServerPort(); // 443 on Prod (ssl) and 8700 on Dev
String scheme = request.getScheme(); // http or https
String serverName = request.getServerName(); // reports.lgamerica.com or mdmsactuatetest, etc

// result for production --> <a data-ipb='nomediaparse' href='https://reports.lgamerica.com'>https://reports.lgamerica.com:443</a>
%></p><p><head>
<title>Report: <%=reportName%></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

<style>
.params {
margin-right:auto;
margin-left:auto;
width:30%;
height:95%;
border:thin solid;
background-color:#CCC;
}</p><p>body {
/* background-color:#FFFFCC;
background-image:url('img/skyScape.jpg');
background-color:#cccccc;
*/
background: url(img/skyScape.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;</p><p>}
img {
max-width:none;
}
select {
margin-bottom:auto;
}
H1 { text-align: center }</p><p></style>
</head></p><p><body onload="init( )">
<header>
<div class="row-fluid">
<h1>LGA DSS Reporting - Run Report</h1>
</div>
</header>
<div class="row-fluid">
<h3>
<p>Parameters</p>
</h3>
</div>
<div class="row-fluid" style="padding-left:1em;">
<div id="parampane" class="span3 params">
<script type="text/javascript" language="JavaScript" src="<%= url %><%= CONTEXT %>/jsapi"></script>
<script type="text/javascript" language="javascript" src="<%= url %><%= CONTEXT %>/prototype.js" ></script>
<script type="text/javascript" language="JavaScript">

function init( ){
actuate.load("viewer");
actuate.load("parameter");
actuate.initialize( "<%= url %><%= CONTEXT %>"
, null, null, null, displayParams);
}
function displayParams( ) {
param = new actuate.Parameter("parampane");
param.setReportName("/Home<%= CONTEXT %>/<%=reportName%>");
param.submit(afterparamInit);
}
function processParameters( ) {
param.downloadParameterValues(runReport);
}
function afterparamInit() {
processParameters( );
// $("RunReportButton").click();
//$("RunReportButton").disabled = false;
}
function runReport(paramvalues) {
// new, 2/19/13
var scrollPanel = new actuate.viewer.ScrollPanel();
scrollPanel.setScrollControlEnabled(true);
scrollPanel.setPanInOutEnabled(true);
scrollPanel.setMouseScrollingEnabled(true);
var config = new actuate.viewer.UIConfig();
config.setContentPanel(scrollPanel);
var viewer = new actuate.Viewer("viewerpane", config);
viewer.setSize(1200, 900);
viewer.setReportName("/Home<%=CONTEXT%>/<%=reportName%>");
viewer.setParameterValues(paramvalues);
viewer.submit( );
}
</script>

</div></p><p> <div id="viewerpane" class="span9">
<input id="RunReportButton" type="button" class="btn" name="run" value="Run Report" onclick="processParameters()" >
</div>

<script type="text/javascript">
processParameters();
</script></p><p></div> </p><p></body>
</html></p>

mwilliams

<p>So, adding the meta tag solved the issue you were having? Or are you still having the issue. Let me know and I'll take a closer look!</p>

DavidGress

<p>Yes, the meta tag helped with the date time picker (DTP) being skewed. The issue I've working on now is that the top part of the DTP is on four lines instead of one, the arrows and the month and year are each on separate lines. It functions properly but wehn expanded takes up three more lines than it should.</p><p> </p><p>Adding this:</p><p>input {
width:100%;
}</p><p> </p><p>Makes the input boxes shrink as the page gets smaller as well.</p>

mwilliams

<p>If you don't use the bootstrap.css, does this all work as expected? Sorry, I haven't had time to set this up myself.</p>

DavidGress

<p>Yes the DTP looks like it does when you run the report from the Information Console if bootstrap css isn't applied.</p>

mwilliams

<p>And you obviously can't just not use the bootstrap css, probably. I'll try to find time to set this up to see if I can recreate it and see it myself with a report I can run. Not sure how soon that will be though.</p>

DavidGress

<p>Here's the solution I used:<strong> Don't use bootstrap.min.css and DO use bootstrap-responsive.min.css</strong>.</p><p> </p><p>When I do this the report parameters look as they normally do and I can still use the grid features of bootstrap to use fluid rows and spans, et al.</p>