I must remove page break while generating pdf by visual force pdf, but whatever I try with css page-break-inside: avoid;, page-break-before: avoid; etc. is not working.
I want to remove all page breaks making it a continuous pdf page, but I cannot figure it out.
Instead of using CSS styling for the APEX component, try a div tag around the APEX components you want to not be broken apart with style="page-break-inside:avoid;"
//div style="width:100%;page-break-inside:avoid;"> APEX ///div>
This css page-break-inside: avoid;, page-break-before: avoid; works only when you need to iterate on components. If you are using inline pre-built css into page then you have to check following css related to body tag. like this:
body { box-sizing: border-box; height: 11in; margin: 0 auto; overflow: hidden; padding: 0.5in; width: 8.5in; }
Here I am using width and height with auto value.
Related
Basically, using bootstrap 4, i'm trying to take the bootstrap class "custom-select" and override some of the bootstrap elements for my own uses. Here's the html and scss im using. Pretty simple stuff imo.
<select className="custom-select" id='sortingSelect' onChange={(e) => setSortingOption(e.target.value)}>
<option defaultValue value ="0">Random</option>
<option value="1">A - Z</option>
<option value="2">Z - A</option>
</select>
.custom-select#sortingSelect{
width: 5% !important;
float: right !important;
margin-right:5% !important;
}
It straight up would not work when i put it in the "module.scss" for that page i was working on, so i ended up having to put it into my custom.scss that globally overrides stuff. Even when using !important tags, it still wouldn't work in my module.scss, but it does work with my custom.scss. That's problem solved, well, kind of.
Because! I want it to also be able to change with screen size, this is bootstrap after all. So i put the following into my custom.scss
#media (max-width: 768px) {
.custom-select#sortingSelect{
float: none !important;
display: block !important;
margin: 0 auto !important;
}
}
It doesn't even seem to recognize this input at all for some reason :/
Are media queries simply just not allowed in the custom.scss file? If that's the case am i just boned? Or am i just going about this all wrong? It could be some issue with specificity, but how the heck do i get more specific than what ive already got?
Please lemme know if i need to provide more context!
Also! I read that i need to include the following code in my html
<meta content="width=device-width, initial-scale=1" name="viewport" />
However, i am using React, so i included it in the html that is returned from my Layout component that renders everything else, still no luck, and that wouldn't make sense as the problem anyhow, because media queries have worked before in that very same file, just not with overriding bootstrap stuff. Overriding bootstrap stuff always seems to be way more difficult than it needs to be in my experience so far.
Edit: I tried using bootstraps built in break points, but that failed as well
Why are you using both class and ID at the same time in your CSS file.
Either use className or Id for CSS.
Like:
.custom-select{
width: 5% !important;
float: right !important;
margin-right:5% !important;
}
OR
#sortingSelect{
Height: 5% !important;
float: left !important;
margin-left: 5% !important;
}
In my react app, I have a big piece of generated code (110k lines) to show on screen (an openapi json spec). I wrapped it in a <pre> tag with:
overflow-y: scroll;
word-wrap: break-word;
white-space: pre-wrap;
font-family: monospace;
height: 100%;
This <pre> has a parent <div> which set the height to something like 800px so it can scroll.
This used to work well, but recently chrome hang completely when displaying it. It works on Brave and Firefox without any issues. Strangely, the code is shared on server, if I type the url of the server and display the code directly (no react, just basic code display), chrome behave normally. It automatically wrap the code in a <pre> just like I do, with the same css style, except for the height:100%; I wonder what the hang in my application all of a sudden.
Thanks for any help.
Used react-virtualized list with chunks of data. Not ideal, but good enough for our purpose.
I have a problem with one page on my gatsby site.
If I go to that page from any other then it renders fine. But if I follow a link directly to it, or refresh the page once loaded then it does not render correctly. All of the other pages render fine. The one thing different about this is the use of flex display layout.
Looking at the page structure, it's rendered differently. HTML looks pretty much the same, but the classes and class attributes set by gatsy are different.
This is the page in question: https://www.hazardousfrog.com/contact-us/
If someone could take a quick look and let me know if this is a gatsby issue or something I have done wrong, I'd very much appreciate it.
After looking at it I believe it may be an error on your end. I look at both pages in separate tabs, one rendered correctly and one not. With the developer tools I inspected the form components and saw that they were loading completely different styles. I wouldn't be able to tell you exactly what is causing this, but if I had to guess it could be that you have styles or classes that are overriding one another.
//the form style when it is NOT rendered correctly
.jss9 {
margin: 0;
border: 0;
display: inline-flex;
padding: 0;
position: relative;
min-width: 0;
flex-direction: column;
vertical-align: top;
}
//form styles when it IS rendered correctly
.jss357 {
display: flex;
flex-wrap: wrap;
}
I'm using this CSV to HTML table library, and it's working great. My problem is that, when i upload a csv that does not contain headers, the first row is displayed as the header row instead. I would like the header row displayed only if there is a header obviously. Any idea how?
This is the library i'm using:
<CsvToHtmlTable
data={this.file}
csvDelimiter={this.delimiter)}
tableClassName="table"
tableColumnClassName="tableColumn"
tableRowClassName="tableRow"
header="th"/>
And this is the css for 'th', if it is necessary:
th {
/*background-color: rgb(177, 176, 176); */
background-color: #222222;
color: white;
font-size: 13px;
font-weight: 400;
border-right: 1px solid #ddd;
height : 38px;
}
According to Wikipedia, CSV doesn’t have a standardized way to tell if the file has a header or not. You could of course come up with some way to detect the header’s presence, applicable to your data set.
For your convenience, the NPM package you are using has a prop called hasHeader. By setting it, you tell the component whether to render a header or not. The default value is true.
So, you can remove the header from the element simply by giving your <CsvToHtmlTable /> element a false as its hasHeader prop.
Like this:
<CsvToHtmlTable
data={this.file}
csvDelimiter={this.delimiter}
hasHeader={false}
tableClassName="table"
tableColumnClassName="tableColumn"
tableRowClassName="tableRow"
/>
Hope I could be of help! Ask away if you have any further doubts!
I want to display entire content of my database table on html page.I am trying to fetch record from database first and store in ArrayList. What is the best way to do it in java using PostgreSql database ??????
You are using iframes to embed those “previews”, I assume?
In that case, you could achieve this by making the iframe element itself larger, and then use transform: scale() to scale it down again to the target size.
Check the following example – I used example.com for the iframe content, that site is not responsive, as you can see in the first 200px*200px iframe.
The second iframe is 500px*500px – and scaled down by a factor of .4, which is effectively 200px again. Since scaling an element down this way still leaves the space it would have taken originally reserved, it is placed inside a div element that cuts of that overflow.
iframe, #i2 { width: 200px; height: 200px; }
#i2 { overflow: hidden; display: inline-block; }
#i2 iframe { width: 500px; height: 500px; transform:scale(.4); transform-origin: top left; }
<iframe src="https://example.com/">
</iframe>
<div id="i2">
<iframe src="https://example.com/">
</iframe>
</div>
https://jsfiddle.net/5hk9m446/
One thing you should be aware of, is that this will not work for just any website. Via the X-Frame-Options header websites can tell the browser, that they don’t want to be displayed in (i)frames on a different domain. In that case, you can’t do it client-side with iframes; you probably have to render a preview as an image server-side or something like that.
CSS Transforms can help you to downscale iframes.
See this example
http://jsbin.com/wiperebifa/edit?html,css,output
Please also notice with iframes your mouse events are targeted to those pages.
You can use glass pane(s) over the iframes to capture these events or alternatively you can hide iframes and display their content with canvas.