I'm facing difficulty to solve an issue. I have made a custom pagination in my view page, but the pagination items get line breaks like following picture:
I tried to avoid that by adding <div>, but couldn't get it solved.
I used the following line just after the end of my </table> tag.
{{ $managementReport->render()}}
There's nothing wrong with your pagination code; it's likely just outputting an unordered list, in which every item is rendered in it's own line by default. You can easily override this behaviour with plain CSS using the following rule (I'm assuming you've added the .pagination class to your ul):
.pagination {
padding-left: 0;
list-style: none;
}
.pagination > li {
display: inline-block;
}
Related
I created a classic report in oracle apex 5.0 which has a few product info (colour, szie, price etc.) as well as a Barcode column. To display the barcode column in a specific barcode font, I uploaded a piece of jquery code as plugin and managed to get the barcode displayed correctly like below
But when it comes to printing, the print function that comes with APEX doesn't work, because it only prints out the original barcode value (6208217iFiEiGi1i) which is returned by the sql. As a workaround, I created a button that calls a javascript which does window.print(), and used some CSS to get rid of the header and the sidebar of the web page, and managed to only print the main content of the web page which is the report.
The way I did is, I have the below CSS code in the html header of my page
<style media="print" type="text/css">
#media print
{
body * { visibility: hidden; }
#print-content * { visibility: visible; }
#print-content { position: relative; top: 0; left: 0; width:100%; padding:0; }
}
</style>
and the below in the region header and footer section I want to print
<div id="print-content" >
</div>
However, this approach left me with another issue. Sometimes the row gets cut off at the end of the page, that makes it look like below
Can anyone give me some suggestions on how I get around with this issue?
Thanks a lot
Try using this CSS - I'm not sure what you should apply it to, perhaps table rows in general:
#media print {
tr {page-break-inside: avoid;}
}
Possibly a more specific selector would be preferable like div#myreport tr.
Given the HTML :
<div class="parent">
<div class="element"></div>
<div class="other"></div>
</div>
And this Sass :
.parent {
.element {
#include span-columns(2.5 of 8);
}
}
It generates the CSS :
.parent .element {
float: left;
display: block;
margin-right: 3.22581%;
width: 29.03226%;
}
.parent .element:last-child {
margin-right: 0;
}
The part with :last-child is bothering me, because it overrides the first rule with right-margin that I want to keep. How do I prevent Neat from adding the :last-child rule ? Or what workaround should I do to set my desired right margin ?
I think you're okay here. Neat's span-columns() mixin works by establishing an element as a column with the classes you copied above, including right margin for a gutter between columns. It then uses the :last-child pseudo-class to remove the gutter margin on the last column so you don't have unnecessary space there.
Thinking this out, the .element div in your example isn't the :last-child, so that particular div's right margin will be untouched. I threw this in a JSBin to show you: http://jsbin.com/wawopef/edit?html,css,output. I made .other a column as well since it seemed clear that you intended for it to be one. The .element div still has its margin, then.
If you really wanted to override the rule you could do so by rewriting the mixin, but A) that's probably not what you want to do and B) this is sort of part of using someone else's grid framework. If we follow their documentation it should work fine. Or the framework is bad, which fortunately Bourbon and Neat are not!
I have written some javascript under a text item html and it is working perfectly when in eclipse birt designer. When I deploy the report to Birt viewer in apache, it does not seem to work. I am not sure if the click is not working or the javascript behind it is not working but something is wrong the I am not getting the desired result on clicking the text item
Basically, I am hiding few charts when I click on the text item (I wrote an html script to make it a button and then called a javascript function to hide a chart). It is working in birt designer but not working in birt viewer on apache
below is the button html script
<button type="button"
style="width: 120px; height: 30px; color: #5a698b; font: bold 12px Arial;
padding-top: 1px; padding-bottom: 1px; background: #ddddff; text-align: center;"
onclick=" showhidetab(1,'Population','2.5in')";">Overview
</button>
here is the javascript function that the button is calling
<script>
function showhidetab(showflag,bookmark, heightval)
{
if (showflag == 1)
{
document.getElementById(bookmark).style.visibility="visible";
document.getElementById(bookmark).style.display = "block"
document.getElementById(bookmark).style.height= heightval;
}
else
{
document.getElementById(bookmark).style.visibility="hidden";
document.getElementById(bookmark).setAttribute("style","display:inline;height:1px");
document.getElementById(bookmark).style.height='1px';
}
}
</script>
Can someone please suggest what could be wrong here
Regards
Syed
Some quick fixes:
Your line document.getElementById(bookmark).style.display = "block" is missing a semicolon.
I think the id should be js3_Population... check in your browser.
The brackets closing the else statement is missing a semicolon.
When I made those changes it worked for me. Your code is only resizing the item and not hiding it since the state of the bookmarked object is already visible. You might consider using style.display="none" to avoid holding space for hidden items.
I've been using Zen Grids for responsive layouts for a while now, and somehow never came across this. I've referenced the documentation, but for the life of me cannot figure out how to do something which should be relatively simple.
I have a block which I set on the grid, such as:
<div class="container">
<div class="item">
</div>
</div>
==========
.container {
#include zen-grid-container();
}
.item {
#include zen-grid-item(1, 1);
}
I then have a media query where, for whatever reason, I need to remove the item from the grid completely:
#media screen and (min-width:50em) {
.item {
???
}
}
To be clear, I'm not looking to re-declare the item to a different col-width/position, I just want to remove the mixin from being called completely. I know I can just reset the CSS manually, but was wondering if there was a better way from any Zen Grid ninjas.
Thanks!
Have you tried to just use
.item {
display: none;
}
in your media query? That should hide it and probably remove the spacing it took up as well.
It says clearly on the documentation
just add data-spy="scroll" to the element you want to spy on (most typically this would be the body)
But it seems I can only get it to work if I put it on the body. When I put it in any other element that I wish to spy on, the last element of the nav gets selected.
Here it's on the body, and it works, and this is the same exact thing but with data-spy="scroll" on the element I want to spy on, and it fails (only the last element gets activated).
Am I doing something wrong or is this a bug ?
Your 2nd example can be fixed by using:
#TryToPutDataSpyHere{
display:inline;
}
But for some reason it doesn't works on the demo
I managed to reproduce your issue from the doc: http://jsfiddle.net/baptme/KbphR/
But it only works if I had the following css code (used on the doc):
.scrollspy-example {
height: 200px;
overflow: auto;
position: relative;
}
http://jsfiddle.net/baptme/KbphR/1/
It seems like height: 200px; and overflow: auto; are both necessary
Not in you case maybe because of your .box{height: 500px;}
I had a similar issue where scroll spy would not work on anything but a tag so I actually went into the bootstrap js found the Scroll spy (SCROLLSPY CLASS DEFINITION) section and changed this line:
, $element = $(element).is('body') ? $(window) : $(element)
to this:
, $element = $(element).is('body') ? $(window) : $(window) //$(element)
(note that the element after the // is a comment so I don't forget I changed it)
And that fixed it for me.