Here is what I got:
a XHTML file transformed with Oxygen XML from XML and XSL files
10 divs right at the beginning of the body, hidden with CSS
after that: a table with 100 trs
Looks like this:
<div id="div1" style="display:none;">content1</div>
<div id="div2" style="display:none;">content2</div>
<table id="table1">
<tr><td>conent3</td></tr>
<tr><td>conent4</td></tr>
<tr><td>conent5</td></tr>
</table>
Now I'm working on two projects.
1) CSS screen. Which is fine. The divs are shown in a fancybox when clicking links inside the table.
2) CSS print. Which is the reason I am asking here. Convert the XHTML to PDF using Prince XML - okay. In the print version, the hidden divs should show up on a specific position, e.g.:
1. TABLE ROW
2. TABLE ROW
3. TABLE ROW
1. DIV
4. TABLE ROW
5. TABLE ROW
2. DIV
My dream would be to determine the position after how many trs a div should show up, anywhere in the documents (XHTML or CSS).
Maybe you've got an idea how to solve. Thank you. bearli
Easiest solution is to split the table into multiple tables and put the divs between them, or include each div in a separate row inside the table where you want it to appear.
If you don't want to change your document markup, you can always use JavaScript to do it dynamically when the PDF is generated, just remember to run Prince with the --javascript option to enable script execution, or apply an external script file with --script=FILE.js.
Related
Im using a table in wordpress site, but I was unable to find its actual php code which is generating that table. So, all I have is table at front end to be edited with only css. I have removed some columns using CSS (can be seen css code on left side of screenshot). What I need is the move the every column cell "More Info" to the beneath under the every row (as indicated by red arrows in screenshot). How CSS can do this? Thanks
Table Link: https://skdstore.com/product/educational-videos-volume-1/
Screenshot Image
I have a basic 2 column table for a form. In the left column are the labels, and in the right column are the inputs. When the user submits the form, if there are errors I want to display them directly to the right of the input in which the error was relating to. Could anyone provide an example of how to position a div next to the table row without shifting the columns across?
You could have the <div> representing the error inside of the <tr>. If there is no error it could just be empty. You can use a js templating framework like Mustache.js to pass arguments into your <div>.
I would encourage the use of Flex Grid. This is a CSS ruleset that will help you layout your form. You can still use two column format, with the only change being the you will probably want to reduce the size of the first column relative to the second column, to leave room for an error message.
Another option would be to use abandon tables and use CSS Grids instead.
Take a look at these links for more information:
http://flexboxgrid.com/
https://css-tricks.com/dont-overthink-flexbox-grids/
https://css-tricks.com/snippets/css/complete-guide-grid/
I'm trying to create a BIRT report. The code and query side of it works just fine, but the display is rather wonky.
There's one column whose text contents are rather long, and instead of showing some text and allowing scrolling of the text (which is the behavior I'd like there), it simply shows up as a very vertically long text block; kinda ruins the report a bit. I've also tried setting the width on the column, but no dice there either. Any ideas?
Also, as an aside, how do I get the table's columns to have grid lines? I can do that on the rows, but I can't seem to figure out how to do that for the columns. If anyone has insight into that issue, it'd be appreciated.
Here's a screenshot of the issue
Here's my BIRT report XML, without headers and footers in order reduce characters
I think there is no way to use a scrollable view element inside your report, because the output by the default html-emitter is completely static (I would like to see a different answer if this should be wrong).
To your second Question about how to add a border to a column. Click into the cell of your table, click on "Border" inside the "Properties Editor" and select the borders you like to use. This should be repreated for all cells where you want to use the borders, because this configuration is not applied for a whole column but just for one cell. If you want a border for the whole column you need to setup the border for every cell in the column.
If you have already a data cell inside your table cell, you can use the outline view to select the table cell instead of the data cell:
I need to be able to arrange a list of images (4 in my case) to a row and the link text to appear below like so:
row1
image1 image2 image3 image4
linkText1 linkText2 linkText3 linkText4
row2
image5 image6....
linkText5 linkText6.....
and so for however many images are. Here whether you click on the image or on its linkText, its supposed to open a document in a new window.
Here's the html that I intend, but doesn't work the way I want. It just puts one image per row. I have tried various combinations nothing seems to work. Although if I use just the img element and use the ng-repeat on it, the images flow the way I want, 4 to a row, but that doesn't serve my purpose as I want the link text as well below each image.
<div ng-repeat="items in DocImageCollection ">
<div ng-repeat="row in items">
<img alt="{{row.linkText}}"
ng-click="$event.preventDefault();openDocument({{row}});" ng-src="{{row.imageSrc}}" imageonload />
<br />
<span ng-click="$event.preventDefault();openDocument({{row}});">
{{row.linkText}}</span>
</div>
</div>
Here
imageonload is a directive which I have created for downloading the
image source,
DocImageCollection - is the main collection; for e.g. if I have 10 images in
all, then this will be an object array of capacity = 3, where each array
element (row) is itself an array of 4 image objects
I have all the data correct, I just have issue in the templating. Any help is
greatly appreciated.
The div tag is a block level element so it'll appear on it's own line unless you change the CSS display attribute to inline-block. Specifically, you need to target the display attribute for the div that contains the img and link.
Here's an example on codepen:
http://codepen.io/gwmccull/pen/LpYLLp
you can use an indexing method with your ng-repeat.
Check this
Adapted from here
ps. Not necessarily you will use the ng-if, this only serves you in case you want to only show multiples of 4
I would like to achieve effect visible on the screenshot below that is content of the table cell (that blue cell with Michal Aniol...) should be fully visible but cell's width should stay the same.
How do I do that?
I am open for solutions requiring heavy use of javascript as the rest of the application and also table itself will be generated by dojo.
Having colspan > 1 is not an option because it will not work in other cases. I really want to use just single cells as this will help me with other functionality.
Screenshot http://uppix.net/4/d/9/8cfc6aba556405f910871598afa10.png
Markup and css: http://jsfiddle.net/sGkpq/
style.less http://pastebin.com/waXWDf4J
To make my question self-contained in case links die as #Sparky672 pointed:
I wanted to have table cells of same size and if content in a cell is bigger than the cell itself then content should still display and flow to the next cell. So text in a cell if longer than the cell then it should overflow to the next cell overlaying its content.
Just remove overflow-x: hidden from table.reservation-table td. The text will continue past the end of the cell.
Of course, if you want it to work when the name is longer than the cells behind it (eg, Michal only booked one day) that would be more complicated, but probably doable.