I'm writing an XSL-FO to generate PDF report.
I need to make a table that keep the bottom border even if the content of the last cell continues on the next page.
We use this code in the pdf.xsl file:
<xsl:attribute-set name="table.table.properties">
<xsl:attribute name="border-after-width.conditionality">retain</xsl:attribute>
<xsl:attribute name="border-before-width.conditionality">retain</xsl:attribute>
</xsl:attribute-set>
Processing in fo seems to be correct according to this code:
</fo:inline></fo:block><fo:table border-before-width.conditionality="retain" border-collapse="collapse" border-after-width.conditionality="retain" border-start-style="solid" border-end-style="solid" border-top-style="solid" border-bottom-style="solid" border-start-width="0.5pt" border-end-width="0.5pt" border-top-width="0.5pt" border-bottom-width="0.5pt" border-start-color="gray" border-end-color="gray" border-top-color="gray" border-bottom-color="gray" table-layout="fixed" width="100%">
Related
I am using a v-simple-table in Vuetify to display the contents of a log one line per row. I need to be able to send someone a link that will take them to a specific line within the table. I'm trying to accomplish this by using the id for each element as a hash anchor but the link just reloads the page.
<v-simple-table height="500px" dense>
<template v-slot:default>
<tbody>
<tr v-for="(line, index) in logFile" :key="index">
<td class="accent--text" v-show="showLineNumbers">
<a :id="index" :href="'#/logs/view/204#'+index">{{ index }}</a>
</td>
<td>{{ line }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
This table is within a v-card within a v-container on the page. When I hover over the number for line 100 of the log for example the link previews as "{mydomain}/logs/view/204#100" and inspect element shows it has an id of 100 but going to the link in the browser just loads the page at the top.
Any help much appreciated!
The problem is that the browser can't send the user to a portion of the page that doesn't exist, so it just stays at the top.
Now you might be thinking...
But it's clearly there, I checked it, I see it.
However, the index you reference needs to be there at the time of opening the page, and since the content gets generated after the page is loaded, this functionality will not work.
If you want it to work, you're going to have to implement the scrolling yourself to happen after the table is rendered.
One way to do it is to get the index from the url.
window.location.hash will give you the hashbang, and then you can use a library like vue-scrollto to do the scroll.
I have a table class that I use to vertically centralise text in a span or div. I am using Handlebars in Node to render several templates server side, I have used this method on several partials in my web project, with no problems.
However in one particular partial / area of markup, either the browser or Handlebars is ignoring or removing the table, tr and td tags, showing only the text that is inside the tags.
In the past when this has happened it was because my tags were incorrect. However I have cross checked this code with my other markup where the table tags do show (in other partials), so I can't see where the problem is, and I can't find any suitable online topic about this (it is probably something really obvious that will make me look like a dummy).
I have tried in Chrome and Edge. I have also tried saving the markup snippet in a .html file (as opposed to a .hbs file) and opening that in the browser, and by doing this it does show the table tags. The consequence of this error is that I am unable to vertically align the text in the span. I am not sure if the markup is invalid according to the browser or Handlebars, but I am not using any {{Handlebars}} tags here so it shouldn't warrant the table tags to be invalid.
Markup:
<div class="lp-menuselector" title="View summary of Individual Learning Plan and evidence pack">
<div class="lp-menuselector-iconholder">
<img src="icons/icon_lp-overview.svg"/>
</div>
<span class="lp-menuselector-textholder">
<table class="tablecellleftalign">
<tr>
<td>
ILP Overview
</td>
</tr>
</table>
</span>
</div>
Output markup shown in Chrome Developer Tools / Elements:
<span class="lp-menuselector-textholder">
ILP Overview
</span>
Topic Closed:
After I restarted my computer and restarted the Node application, this error no longer occurs. Glitches in the matrix.
I am a newbie to html and css so sorry if this sounds dumb.
How do I create a clickable area that contains two images, text, and whitespace that when clicked, opens ANOTHER html file within the page?
So far I got an html file to appear inside an html file like this:
<object data=EXAMPLE.html width=100% height=100% /> Error </object>
But the problem with that is that you must scroll within the content box to view it, and I would prefer if it expanded the content box indefinitely downward based on how big the html file was.
As #Jarred Farrish pointed out: Regular frames do what you describe. You don't need object elements.
I believe this question becomes a duplicate of this question.
You can make a "button" by creating a div, placing the other elements within the div, and setting an onclick handler on the div itself. You are free to have as much "empty" space, because the emptiness is really the div.
<div class=my_button onclick=my_button_press();>
<img src="..."></img>
<img src="..."></img>
<span class=my_text>My text here</span>
</div>
<iframe id=my_frame></iframe>
<script>
function my_button_press() {
document.getElementById('my_iframe').src = "...";
}
</script>
Check this example http://jsfiddle.net/b6sdunqj/1/.
You'd want to combine the instruction in the question referenced above with my_button_press() to complete everything.
I'm new to the world of XSLT, I only know the basics. I am trying to modify some files to work on Chrome (at the moment they work only on IE). One if the issues I have now is in this section:
<td class="2k3ButtonContainer">
<div id="coolTheme" style="height:20px;direction:rtl;background:URL('../../Assets/UI/Images/{$name}.gif') no-repeat 100% 0px;padding-right:20px;" dir="rtl" class="2k3Button" onclick="{$onclick}">
<xsl:value-of select="$caption"/>
<xsl:if test="$hasDown='1'">
<img src="../../Assets/UI/Images/Splash/arrow.down.gif" align="absmiddle" style="width:7px;height:4px;margin:0 2 0 2"/>
</xsl:if>
</div>
</td>
The line <xsl:value-of select="$caption"/> that should replace the text of the div isn't working for Chrome. The variable exists, I know it because $name and $onclick are correct, but when placed in the div as text I cannot get the value of the caption variable. (I get the buttons with the correct images and events, but without labels).
I tried to read about it, but I am not sure what to look for, and I didn't understand the little info I found about it.
Thanks all in advance.
XSLT variable references are tricky. Try referencing it the long way instead:
<xsl:value-of select="document('')/*/xsl:variable/#select[../#name='caption']"/>
I have a form within a table which is within another form. My problem is that the embedded form tag is not appearing - the input and iframe appears, but the form tags do not appear. The table and outer form appear. What's wrong?
<form>
<table id=\"mytableid\">
<tr class=\"form_row\">
<td align=\"right\">
Upload Photo:
</td>
<td align=\"left\">
<form action=\"/myuploadpath\" method=\"post\" enctype=\"multipart/form-data\" target=\"upload_target\" id=\"photo_url_upload_form\" name=\"venue_photo_url_upload_form\">
<input type=\"file\" name=\"photo_url\" id=\"photo_url\" size=\"40\" />
<iframe id=\"upload_target\" name=\"upload_target\" src=\"#\" style=\"width:0;height:0;border:0px solid #fff;\"></iframe>
</form>
</td>
</tr>
</table>
</form>
Putting a form inside another form is not valid HTML. When this happens each browser will do different things with the markup. Some ignore parts, some break, etc. Either way you shouldn't do this.
Edit
If you are using tables for layout purposes, you technically shouldn't be. They are only meant for tabular data. You should use divs/spans and CSS to create the look you want on your site. A great place to learn about this stuff is W3C Schools.
I assume you're using something like Firebug or the Chrome DOM Inspector to look at your DOM tree and you can't see the inner <form>. These tools inspect the DOM itself, not the HTML source. That is, they show you what the browser has interpreted from your HTML. The problem in this case is that nesting a <form> within another <form> is invalid, and hence the browser has ignored it and continued parsing the rest of the document.
Obviously, the fix is to ditch that outer form since it's not doing anything. If you have it there for styling purposes, perhaps use a <div> with a class.