I am trying to create a pdf with cfhtmltopdf which contains 2 rows of divs which have a css setting of position:relative; . Between each row I want to have a page break which I create with <cfhtmltopdfitem type="pagebreak" />.
This creates the page break and adds the second row to the second page, however the second row is still included on the first page (so it is now duplicated). If you remove the position:relative it fixes the issue but breaks my formatting.
I have tried wrapping the code in another div or a table which doesn't contain position:relative; but I have found that if this content (divs,tables) has an object with a relative position then the same issue occurs. Does anyone have a work around for this? Example code is below.
<cfhtmltopdf orientation="landscape">
<!DOCTYPE html>
<head>
<title>Test Page</title>
<style>
.block{width: 288px; height: 255px; margin: 0 0 10px 8px;position:relative;padding: 0; display:inline-block; top: 0; left:0; vertical-align:top;background: #cee7f4;color: #0081C6;}
.block2{width: 288px; height: 255px; margin: 0 0 10px 8px;padding: 0; top: 0; left:0; vertical-align:top;background: #cee7f4;color: #0081C6;display:inline-block;}
</style>
</head>
<body>
<div style="position:static;display:block;border:1px solid green;">test1
<div class="block">
Block 1
</div>
<div class="block">
Block 2
</div>
</div>
<cfhtmltopdfitem type="pagebreak" />
<div style="position:static;display:block;border:1px solid red;">test 2
<div class="block">
Block 3
</div>
<div class="block">
Block 4
</div>
</div>
<cfhtmltopdfitem type="pagebreak" />
<div>This code works</div>
<div class="block2">
Block 5
</div>
<div class="block2">
Block 6
</div>
<cfhtmltopdfitem type="pagebreak" />
<div class="block2">
Block 7
</div>
<div class="block2">
Block 8
</div>
</body>
</html>
</cfhtmltopdf>
Related
I have a web page with a left hand menu. It is made up of many div tags.
I have noticed when my Selenium Python script runs it is not clicking the text I want clicked from the left hand menu. It is clicking something else.
My Xpath is not correct.
I would like to locate the text "Statistics" (it is in a div\span tag) which has the parent div text "Analysis"
It is not clicking the correct text "Statistics" because there maybe another "Statistics" somewhere in the HTML source. If i start from the div tag which has the text "Analysis" and then find the text "Statistics" then I will get the correct element.
My Xpath is:
.//div//span[#title="Analysis"]/following::div[5]//span[text()="Statistics"]
The HTML is:
<div>
<span class="" title="Analysis"
style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;empty-cells:show;display:block;">Analysis</span>
</div>
</div>
</div>
</div>
</div>
<div style="overflow: hidden;">
<div>
<div>
<div aria-selected="false" role="treeitem" aria-setsize="3" aria-posinset="1" aria-expanded="false"
aria-level="2">
<div class="GJPPK2LBIF" style="padding-left: 16px;">
<div class="GJPPK2LBIF GJPPK2LBKF" style="padding-left: 16px;position:relative;" onclick="">
<div class="GJPPK2LBJF" style="left: 0px;width: 15px;height: 15px;position:absolute;">
<img border="0"
style="width:15px;height:15px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA7/HbnjJn53wAAAABJRU5ErkJggg==) no-repeat 0px 0px;"
src="http://test1:8080/clearcore/ClearCore/clear.cache.gif"
onload="this.__gwtLastUnhandledEvent=" load";"/>
</div>
<div class="GJPPK2LBLF">
<div style="padding-left: 22px;position:relative;zoom:1;">
<div style="left:0px;margin-top:-8px;position:absolute;top:50%;line-height:0px;">
<img border="0"
style="width:16px;height:16px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaekJggg==) no-repeat 0px 0px;"
src="http://test1:8080/clearcore/ClearCore/clear.cache.gif"
onload="this.__gwtLastUnhandledEvent=" load";"/>
</div>
<div>
<span class="" title="Statistics"
style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;empty-cells:show;display:block;">Statistics</span>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks,
Riaz
If you have FireFox with FirePath you can test the xpath and see how many and which matches you get. For instance:
//span[text()="Statistics"]
This may result in 1 matching node but also in more. Let's assume there's two matches and the one you want is the second one. Then you'd choose:
//span[text()="Statistics"][2]
I have created a modal window that shows up upon loading any page in my site. I am using this modal window for language selection. I would like the users to be able to hide (1 month) the language selection modal window by clicking a hide this window button.
I have the modal window opening and loading the content in an external file as:
jQuery(document).ready(function(){
//name, value, additional -- expire cookie in 30 days
jQuery.colorbox({href:'/language.php', iframe:true, open:true, width:860, height:450})
});
And this is the external file with the language selection menu:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="" />
<style>
#lang-container {width: 100%}
.halfregion {display: block; float: left; width: 50%;}
.langblock {float: left; width: 40%; background: #ebebf1; margin: .5em; padding: 0.5em; height: 230px; text-align: center;}
</style>
</head>
<body>
<div id="lang-container">
<div class="halfregion">
<h2>Choose your region</h2>
<div class="langblock">
<p style="text-align: center"><img src="/sites/all/themes/podsystem/images/en-us.png" width=80 alt="US region" /></p>
<p>This site includes content and products for US, please select this region if you are in United States.</p>
<p>US English</p>
</div>
<div class="langblock">
<p style="text-align: center"><img src="/sites/all/themes/podsystem/images/en.png" width=80 alt="International English region" /></p>
<p>Select this region if you are outside US.</p>
<p>English</p>
</div>
<p><a class="hidthis" href="#">Click here to stop showing this message</a></p>
</div>
<div class="halfregion">
<h2>Elige tu región</h2>
<div class="langblock">
<p style="text-align: center"><img src="/sites/all/themes/podsystem/images/es.png" width=80 alt="US region" /></p>
<p>Selecciona esta region si hablas español.</p>
<p>Español</p>
</div>
<div class="langblock">
<p>We are working to improve your experience using our sites. Would you like to see other languages? Drop us a comment.</p>
<p>Contact us</p>
</div>
<p><a class="hidthis" href="#">Pincha aquí para dejar de mostrar este mensaje.</a></p>
</div>
</div>
</body>
</html>
I am really stuck now, how do I do to get the modal window to close when the users click on the links with the .hidthis class?
Thanks in advance.
The documentation at http://www.jacklmoore.com/colorbox/ suggests that you could attach $.colorbox.close() to the links to "initiate the close sequence."
If you don't have any more use for the plugin's functionality $.colorbox.remove() is also available to disable the functionality, with the provision that you no longer need it during the life of the page.
I have a very simple code with Foundation CSS
<div class="row">
<div class="large-offset-1 large-6 columns">Content goes here</div>
<div class="large-4 end columns">Side goes here</div>
</div>
I want there to be margins between the columns. Currently, there is only padding. So if I add background-color to these columns, then they stick to each other.
Doesn't Foundation provide a solution for this?
try this (it makes a full width div inside the other, automatically adding margins)
<div class="large-4 medium-6 small-12 columns">
<div class="large-24 columns">
... content ...
</div>
</div>
You could try this:
<div class="row">
<div class="large-offset-1 large-6 columns padded-column">
<div class="column-content">Content goes here.</div>
</div>
<div class="large-4 end columns padded-column">
<div class="column-content">Side goes here</div>
</div>
</div>
Then, for styles:
.padded-column {
padding: 10px;
}
.column-content {
background: red;
}
I had a similar issue that couldn't be resolved with padding. Since Foundation 5 isn't IE8 compatible, I just used calc eg. width: calc(50% - 10px);
The below html was provided inside a <cfdocumentitem type="header"> block.
But the output is empty.
<div class="grid">
<div class="span5">
<div class="span5">
Label1
</div>
<div class="span5">
Data1
</div>
</div>
<div class="span5">
<div class="span5">
Label2
</div>
<div class="span5">
Data2
</div>
</div>
<div style="clear:both"></div>
</div>
But when I remove the nested 'class="span5"' divs and put some content there, it is working fine. Is there any problem with nested float in cfdocument???
Unfortunately, CSS support in CFDOCUMENT is kind of hit or miss.
2 rules to follow that might help:
Make sure your HTML validates as XHTML 1.0 Transitional
Import your style sheets using
<style type="text/css" media="screen">#import "style.css";</style>
This same information can be found here: http://rip747.wordpress.com/2007/09/10/cfdocument-it-works-if-you-know-how/
here's the site I'm working on: http://antidote.treethink.com/about/
I am trying to get it so that the footer is always at the bottom of the screen unless the content runs past the screen, then it will sit below the content.
To do this, I thought to have the "wrapper" div be 100% min-height then tell the footer to sit at the bottom of that div. I tried putting min-height classes on the body, html and wrapper tags but it didn't work.
This is my css: http://antidote.treethink.com/wp-content/themes/antidote-new/style.css
Thanks,
Wade
You can try classic solution
<div id="header-content">
<div id="header">
bar
</div>
<div id="content">
bar
</div>
</div>
<div id="footer">
foo
</div>
main.css
html,
body {
height:100%;
}
#header-content {
position:relative;
min-height:100%;
}
#content {
padding-bottom:3em;
}
#footer {
position:relative;
height:3em;
margin:-3em 0 0;
}
ie.css
* HTML #header-content {
height:100%; /* min-height for IE<7 */
}
This is just off the top of my head. My thought create a container div that holds your content. Put the footer at an relative position of bottom: 0px; within that.
<div id="content-container">
<div id="page-content" style="position: relative;"><p>This holds my content</p></div>
<div id="footer" style="position: relative; bottom: 0px;">
<p>Footer content in here</p>
</div>
</div>
I think that should work...
Edit
Actually the top of my head is not right. This post has helped me in the past though...
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/