I am using DOMPDF library to generate invoices dynamically. My use-case scenario is to leave around 3 inches of space on top of each page. On the first page i created it using a blank div with appropriate height.
Now on second page, it doesn't take the required height from very beginning for obvious reasons. any suggestions?
Instead of spacer divs just set the page margins in css with:
#page { margin-top: 3in; }
Related
i have to reduce size of pagination icons and fonts in order to fit into a slickgrid
attached screenshot for ref-
enter image description here
Changing the CSS style of the Pagination buttons is not going to help much, it will barely give you back couple of pixels, if you want to do that then I added a couple more SASS variables if you want to play with them
with SASS, you can lower these 2 variables (defaults are shown below, for more take a look at all the SASS variables)
$pagination-button-height: 32px; // around 28px
$pagination-button-padding: 6px 12px; // around 4px 8px
Another thing you could maybe try is to change the English translation for "items per page" and remove the word "items" (via Translations (Wiki) or Locale File (Wiki) file depending on what you use).
{
"ITEMS_PER_PAGE": "items per page" // --> "per page"
}
The last option would be to create your own Custom Pagination but that would require much more effort but someone did just that and you can see it in this Example - Custom Pagination
Upon page refresh using animateAnchor: false, for a second I see the first image / slide presented on the site, rather than instantly loading the slide that is anchored. It looks like a small glitch. Is there any way around this problem?
That makes total sense if you are importing the fullpage.js file before the closing body.
That way you'll have to wait for fullPage.js file to load and then to initialise and meanwhile you'll see your site as it is before using fullpage.js.
Try importing fullPage.js on the head of your site, this way initialisation will be faster.
Also, you can use the following CSS in your stylesheet so sections will be 100% height even before loading fullPage.js:
#fullpage,
.section,
body,
.fp-tableCell,
html {
height: 100%
}
Assuming #fullpage is your fullpage wrapper and that you use the default selectors for sections and slides. (.slide, .section)
How to avoid loading times so that the user doesn't see two different styles? This can be observe during the first two seconds of loading.
Please refer to the following screenshot,
Compare the Search Menus
In your case I would set the menu CSS to #menu select {visibility:hidden;} initially, and then change back to visibility:visible; on page load -- using Javascript or jQuery, or at the end of the CSS style sheet.
// Change menu select styles on load with jQuery
$(function() {
$('#menu select').css('visiblity', visible');
});
or
<script>
// Plain javascript hiding an entire menu div group
document.getElementById('menu-container').style.visibility = "visible";
</script>
Put CSS at the bottom will make your webpage "white" for until all the style sheet is loaded.
This causes the blank white screen problem. The page is totally blank
until the stylesheet at the bottom is downloaded, on the order of 6-10
seconds for this page. The browser is waiting for the stylesheet to be
loaded before it renders anything else in the page, even the static
text.
Compare with Put CSS at the top
(from High Performance Websites - Steve Souders)
I'm building a simple table in CKEditor. If I select Left or Right align, it aligns in the expected side of the view when saved. However, when saved this fails if I select Centre align. It's obviously not the whole page because Centre Align text above and below will display Centre aligned. This issue only becomes apparent when "saved" ... (ie a centre aligned table will centre align in edit).
Can you suggest what's going on?
Thanks
How is the centering actually performed? If you have configured using the XHTML configuration, this sounds like a class issue - if not, it could be a CSS !important override rule.
I have CKE configured based on the XHTML example, so my CKE produces centering on table cells like this: <td class="JustifyCenter">Twilight Sparkle</td>. So, if you place the HTML generated by CKEditor in an external page, make sure that the JustifyCenter class actually defined in the parent page. Also in Developer tools that not only it the class rule exists, that it is actually correct and applies.
Also in your developer tools and check to see if your CSS style is actually working or is it being overridden. If you have a parent page CSS rule like td {text-align:left !important;} and CKE produces content like <td style="text-align:center">Fluttershy</td>, the parent page is overriding your inline CSS definition.
I'm only guessing here - it would help if you can you show us the final code as it's used when saved and also your CKEditor configuration.
the table align to center CKeditor will generate something like this, <table align="center">
but it is not working.
finally i found a solution by using CSS, here my code
table[align="center"] {
margin: 0 auto;
}
If I open the following HTML e-mail in Gmail or Outlook it renders as it should:
<img src="img.png" />
However, if I open it in Outlook and then forward it to Gmail, it adds extra garbage HTML that makes the area taller than it should be (the 'p' tag is responsible for the added height - 3px specifically):
<p class="MsoNormal">
<span style="font-size:10.0pt">
<img src="img.png">
<u></u>
<u></u>
</span>
</p>
There are lots of solutions for fixing spacing issues in Gmail, like adding display:block to the image, setting the font-size and line-height to 0, etc. I've tried over a dozen methods and none have worked because of behind the scenes HTML modification that I have no control over - styles and attributes getting stripped, tags with their own properties getting added, etc.
Is there is a work around to allow the original formatting to always be preserved? I will gladly provide any additional details needed, just let me know.
There is no fix for this, but there are ways to limit and hide the size of the separation. I'll refer to it as separation, but it is really the top cell expanding due to Outlook applying the mso-normal p tag. Here is a related article.
Between tables creates a bigger gap (about 15px) than between table rows (2px). It is more complex, but try and put everything that you can't afford separating into one big table. Colspans and rowspans can be complex, but they work if set up correctly.
To hide the separation, wrap all the tables in a master-content table with the bgcolor set. For example, make one big content pane set to white. When sending from Outlook, all your child tables will then move, but the gaps will remain white, stopping unwanted lines appearing in your email body.
A trick for footers - As the last child table of your main white panel, when this separates, it will create a white line underneath it. Either remove the footer table from the main panel or set the cell bgcolor to the same as your email background to hide this separation.
I managed to change this situation by changing the MsoNormal class
<style>
td p.MsoNormal {margin: -4px !important}
/* ou */
.MsoNormal {
margin: -4px !important;
}
</style>