I am building an Advanced HTML/PDF Template in NetSuite to be a check with voucher (check on top). Everything works well until the number of voucher items overflows on to the next page. The table logically resumes at the top of the subsequent page. But because of the check stock we are using, it would ideally resume 1/3 of the way down the page on the next "stub" section.
If I was only printing 1 check at time, I could use a header that doesn't apply to page 1 to push things down on page 2 and be good. But when multiple checks are printed at once, this doesn't work.
I also attempted to add a large, blank thead row on the voucher table to push the table down when it resumes on page 2. The check itself is absolutely positioned on the page. So I also was planning to absolutely position the voucher table so they overlap on page 1 and the proper space is created on page 2. But this did not work because I can't make the table absolutely positioned.
<body> kid can't be absolute: Ignoring <table class=[...
I'm guessing there is likely a simple solution or otherwise creative workaround.
Resetting the page number on the page break for each individual check ended up being my answer.
<pbr pagenumber="1" />
https://bfo.com/products/report/docs/tags/tags/pbr.html
<style>
#page2,
#page3,
#page4 {
header: blankheader;
header-height: 260pt;
}
</style>
<macrolist>
<macro id="blankheader">
<div />
</macro>
</macrolist>
I want to use the webchat plugin together with Bootstrap 4. As soon as I put the webchat into a site with Bootstrap the chat box gets clipped on both sides.
If I inspect the element I can see that overflow is hidden. If I toggle that off then the chat bubble is entirely visible, but the user input is broken.
As an example, on the attached picture the left chat is being clipped. The text should say "Just now" but actually reads "st now".
If I use the webchat script in a plain HTML site with no bootstrap then it works as expected.
How would I go about resetting the styling so that it works within Bootstrap 4?
It looks like the row class in Bootstrap is conflicting with the row class in WebChat.
Add this to your CSS to keep Bootstrap from adding a margin to the rows in Webchat:
#webchat .row {
margin: 0;
}
Hope this helps!
I am currently building a small web page using react-redux. In my page I am rendering two containers. One container has a button that on clicking causes a change in the state and as a result the content in the other container also changes e.g initially there is a div container with text hello my name is rishi bhatia. As soon as I click on the button the a separate div container with 4 links replaces the previously displayed div container. What are the possible ways in which I can add animations when the content in the container changes. All I am doing is displaying different div containers on state change.
You can implement componentWillReceiveProps(nextProps). Here you can define your animation when component receive props playing with state.
Even if your component is just presentational id doesn't mean it cannot use state for graphical purposes.
We are working on customising a website for our client in Squarespace (so that they can manage it on their own).
I've added a CSS style to the background of a layer of text, but it won't show up. I have imported the image to use into Squarespace and I have the URL.
I have also inspected the page element and found the id that I'm wanting to target to.
This is my code:
#yui_3_17_2_5_1465050472193_17704 {
background-image: url("http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/5752e43c22482e7d77f53e3b/1465050172750/Share+the+Love+Kids+Club.png")
}
Why does this not add the image I expect?
In Squarespace, currently, any ID starting with "yui" can/will change on page refresh. That is because such IDs are dynamically generated. Therefore, you should not rely on them for use in CSS or Javascript.
However, it is currently accepted that block IDs (ID's starting with "block-" do not change as long as the block is not removed or moved in a way that causes it to be removed (such as dragging a text block directly above/below another text block).
Therefore, you should instead locate the block ID of the block to which you want the CSS rule applied. If you need to target with even greater specificity, start with the block ID then add specificity from there. For example:
#block-yui_3_17_2_4_1443109442267_11866 {
background-image: url("http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/5752e43c22482e7d77f53e3b/1465050172750/Share+the+Love+Kids+Club.png")
}
If this still doesn't give you enough to get the problem solved, consider adding a link to the page in question, and stating which block/area on the page you want to target.
Additional Information/References:
https://answers.squarespace.com/questions/59297/how-do-i-discover-a-block-id.html
https://answers.squarespace.com/questions/10450/which-ids-should-i-target-for-my-css.html
I'm building a program that scrapes a website. It looks at the entire website and takes only the header and footer navigation menus from that website, then inserts new html tags (div, p, table, etc.) in between the header and footer menus.
I'm looking for some ideas on how to strip only the header and footer nav menus, as well as add code in between the two.
I'm using HTML Agility Pack and have worked on a few methods.
Method 1:
In most cases, the header and footer navigation menus are mostly
links, and have very little text. I used a threshold variable that
was a ratio of text to links. If the ratio text:links for a node is
less than the threshold, the node would be considered a menu node, and
it would be saved. Any node whose text:links ratio was greater than
the threshold value would be removed.
Method 1 worked for some sites, but not for others, so I ditched it.
Method 2:
I searched each node for an id or class attribute that included "nav"
or "menu". "n","a","v", "m","e","n","u" could have been upper case or
lower case, and "nav" and "menu" could have been surrounded by any
combination of characters. That way, it would include id's and
classes such as "bottomNav", "navRight1", "LeftMenu2", etc. If the id
or class contained either "nav" or "menu", the node would be saved.
If the node's attributes did not contain either of those terms, or any
of the node's descendants did not contain either of those terms, the
node would be deleted.
Again, method 2 worked for some sites, but not for others.
For the sites where either of these methods worked, I still wasn't able to put new html code in between the two menus, because I had no way of telling where the header menu ended, and where the footer menu began.
I'm just looking for other ideas on how to scrape only the header and footer navigation menus from a website, and insert new html code in between the two.
Other than looking for specific elements or element classes (header, nav, ...), you can try to look at the problem in a different way:
first, fetch and parse two (or more) pages from each website, preferably checking that they vary substantially (but not totally);
then, do a diff (of the DOM, preferably), and retain only the common structure.
This common structure should consist mostly of headers, footers, navbars and other elements more or less constant across each website.
A final step might be to look in this common structure for small gaps caused by headers/footers that vary depending on context, as opposed to large gaps caused by different (main) content, and scrape their possible values from the largest set of pages you can fetch from each website.