I want to remove the horizontal scrollbar from my webpage. For which
i use overflow-x property
and pseoudo element property webkit-scrollbar in which I write display none.But the problem
still exists sometimes when I shrink my webpage. Like if I write the property over-flow-x:
hidden then on first time shrinking the screen , the horizontal scrollbar doesnot
show but on 2nd time shrinking screen it appears. This is the issue which I am facing. Please give me an appropiate solution as soon as possible.
Thanks.
Use this to hide scrollbar and preserve functionality:
body::-webkit-scrollbar {
display: none;
}
body {
-ms-overflow-style: none;
scrollbar-width: none;=
}
Add this along to remove scroll functionality:
body {
overflow:hidden;
}
Here:
html, body {
overflow-x: hidden;
}
.overflow {
width: 150vw;
}
<div class = 'overflow'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed ipsum in sapien sagittis pulvinar. Cras ornare massa urna, in volutpat quam feugiat sit amet. Sed in purus efficitur justo vestibulum scelerisque. Integer euismod ligula a nisl ornare, vel viverra mi mattis. Mauris dolor diam, tempus a risus in, malesuada fringilla tellus. Vivamus ultrices nisi non massa ultrices mollis at vitae neque. Vivamus viverra fringilla elit, eu suscipit libero dictum nec. Quisque lacinia mattis rutrum.
Aliquam ut dignissim magna. In eget maximus libero. Donec id velit vitae libero ultricies consectetur. Duis in tortor mattis, venenatis elit sit amet, iaculis ligula. Sed pulvinar nisi ut leo sollicitudin tempor. Ut nec erat sed nisl blandit efficitur. Donec varius sem vitae leo tincidunt, sed pretium tortor tempus. Morbi tempor sollicitudin sapien eget sollicitudin. Fusce maximus quis risus ac pretium. Duis non elit nec neque consectetur interdum vitae at lorem. Proin elementum sem justo, non congue orci cursus in. Nulla ac feugiat augue. Cras augue lorem, pretium non velit non, pulvinar accumsan dui.
</div>
If this doesn't work then you will have to post your code for us to fix it.
have you set margin for that? besides your given code is perfect. If you want to remove the scroll bar than view width should be according to the display or to give a width you can use max-width : 100%
Related
Here is the description of the feature I really struggle to do.
Mockup
Description
A generated pdf document contains many sections
Some sections can print on many pages
We don't know the size of the content (variable height)
The page must not have margins (the headers are positioned (0,0) and have the same width as the page, documents are printed bordeless)
The content can be anything : paragraphs, titles, images, graphs, svg elements, tables, ...
Objective
When the content of a section auto break on the next page, that page should have a margin equal to the header
Exemple: the section #2 is printed on the pages 2 & 3 ; the page 3 should have a top margin.
Problem
Because the page margins are set to "0", we should define a padding/margin after a natural page break but, I can't find how to make it work nicely (1)
Technical
I'm using RelaxedJS (pdf is generated with Chromium)
Thank you so much in advance if you know how to handle that specific case. I've read so many documentation. The best candidate could be CSS Fragmentation Box Decoration Break Clone but I can't make it work with blocks, only inline elements and paragraphs.
(1) I have tried a solution using table and a thead setting the margin on top of the page... but it's not working when you fill the cells with content. I guess the has serious limitations when using #page rules.
I had to face the same issue a few days ago.
The idea was simple, you have to do this:
Set #page margins (considering the height of the header and footer)
Set header and footer position: fixed and adjust the top and bottom properties.
Control the .page-content with page-break-after to make sure the content go to the next pages.
Notice that I used the DOMPDF Laravel to generate the PDF. May be there are some differences using RelaxedJS but anyway you can try this just in case.
I hope this can help you. Here is the same code in Codepen
#page {
margin: 160px 0px;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
h2 {
text-align: left;
margin-left: 50px;
}
header {
background-color: yellow;
width: 100%;
height: 120px;
color: black;
display: flex;
align-items: center;
position: fixed;
top: -120px;
left: 0px;
right: 0px;
}
.page-content {
margin-top: 0px;
margin-bottom: 60px;
}
.page-content p {
page-break-after: always;
padding: 5px 30px;
}
.page-content p:last-child {
page-break-after: never;
}
footer {
position: fixed;
bottom: 50px;
right: 0;
left: 0;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: lightblue;
height: 50px;
}
footer, .page-content {
margin-left: 100px;
border-left: solid black 1px;
}
<header><h2>HEADER SECTION #</h2></header>
<div class="page-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque neque vel lectus rutrum, quis suscipit tortor ornare. Maecenas a enim sit amet neque vehicula imperdiet. Donec auctor convallis tellus. Suspendisse a arcu a tortor congue aliquet vel a justo. Cras sit amet pulvinar tortor. Vestibulum vel lobortis libero, eu accumsan ipsum. Donec felis sem, consequat quis pharetra sit amet, facilisis eget odio. Suspendisse nec vestibulum urna, non fermentum lorem.</p>
<p>Sed orci neque, fringilla nec urna at, iaculis laoreet metus. Nam fringilla sit amet sapien iaculis malesuada. Duis pellentesque odio vitae quam pellentesque sollicitudin. Duis nec commodo mauris, ac eleifend nunc. Vestibulum ac finibus nisi. Aliquam at neque augue. Cras metus mi, ultricies vitae dui sit amet, lacinia aliquet nunc. Duis vitae urna et arcu auctor tristique et id lectus. Praesent ut sollicitudin nibh. Mauris quis vehicula ipsum. Quisque feugiat nec felis et cursus. Donec neque ante, accumsan a tincidunt at, ultrices et lectus. Nullam finibus, ipsum facilisis euismod accumsan, nulla quam ultrices odio, id efficitur purus nisl id lacus. Duis bibendum est quis ligula aliquam rhoncus. Nunc dapibus, odio vel tincidunt faucibus, justo dolor tempor nisl, eu maximus nibh odio nec risus. Nullam ut lacinia purus.</p>
<p>Praesent finibus nisi congue sodales elementum. Vestibulum mauris libero, varius a urna at, vestibulum eleifend nisl. Maecenas et metus dapibus, semper quam a, suscipit libero. Mauris malesuada pretium maximus. Sed semper urna vitae iaculis mattis. Praesent luctus, ipsum et consequat lacinia, purus nisi scelerisque sem, eu luctus metus erat at arcu. Aenean aliquam fermentum condimentum.</p>
<p>Pellentesque felis mi, semper ac ullamcorper vel, accumsan ac tortor. Donec vestibulum varius enim, vitae tempor ligula accumsan eget. Etiam quis nunc felis. Phasellus scelerisque, purus eget sollicitudin gravida, felis justo euismod dui, ut fringilla nulla nunc vitae risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo pretium sapien eleifend molestie. Nullam consequat ligula sit amet purus sodales vehicula. Duis placerat aliquet augue, ut dapibus turpis malesuada sit amet. Vivamus id nulla odio. Integer a velit ac eros rutrum tempus. Vestibulum quis sodales turpis.</p>
<p>Vivamus eu enim fringilla turpis euismod finibus id quis dolor. Pellentesque ex massa, congue at nisl at, lacinia ornare urna. Aenean pretium posuere dictum. Nullam justo metus, eleifend a dictum sit amet, gravida ut arcu. Fusce libero leo, sollicitudin at est non, venenatis auctor nulla. Vivamus luctus tellus eu metus interdum congue eget non magna. Curabitur congue felis nulla, eu consectetur tellus viverra et. Nunc ullamcorper ac nisl a elementum. Morbi viverra magna in orci tristique, eget suscipit nunc suscipit. Morbi sodales dolor a feugiat bibendum. Duis nunc nisl, pulvinar at sem quis, cursus lacinia arcu. Aliquam in dictum arcu.</p>
</div>
<footer>Page X</footer>
-webkit-line-clamp css not able to add in email template. How can add this property in email template
I have made one video where i have added my needed property of css to inspect element then my desired result will be show then you can understand what i mean. Check this link for video video
It seems that you cannot have that functionality in an email.
Below are two sources with full lists and compatibility of email clients supporting CSS.
I could not find -webkit-line-clamp or line-clamp anywhere.
Here you can see all valid CSS for HTML emails https://caniuse.email/
EDITED:
Also here https://elasticemail.com/supported-css/
EDITED 2:
Maybe you could achieve something like that using overflow: hidden together with a gradient. There is no reason that would not work;
.text-truncate{
width: 300px;
height: 200px;
overflow: hidden;
}
.text-truncate p {
text-align: justify;
}
.text-truncate:after {
content: '';
display: block;
position: absolute;
top: 110px; /* Extra 10px */
height: 100px;
width: inherit;
background-image: linear-gradient( transparent 30%, white 70%);
}
<div class="text-truncate">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius imperdiet dui, nec dictum ante viverra eget. Aenean lobortis bibendum mi eget pulvinar. Mauris eu turpis ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris nec dolor tempor, aliquam est non, mollis augue. Fusce consequat enim arcu, vitae vulputate metus faucibus ac. Sed nec purus eget quam vulputate fringilla. Vestibulum nec metus est. Nam felis mauris, tincidunt vitae arcu non, vulputate luctus lacus. Pellentesque eget ultricies velit. Duis vehicula, velit eget maximus feugiat, lorem libero egestas turpis, eu ullamcorper nisl neque eget dolor.
Quisque quam orci, scelerisque mollis urna eu, suscipit tristique nunc. Phasellus sit amet sagittis mauris. Cras faucibus auctor quam, nec sollicitudin tellus volutpat id. In sed condimentum massa. Ut eleifend velit purus, et tincidunt dui ornare ac. Aenean finibus enim sit amet leo dignissim, sit amet egestas nibh iaculis. Nam sed lacinia diam, accumsan hendrerit tellus. Suspendisse maximus lobortis ligula quis finibus. Morbi eu libero in velit pellentesque convallis at bibendum lectus. Integer scelerisque, turpis sed sodales sagittis, dui augue cursus sem, ut bibendum tellus odio in leo.
</p>
</div>
Read More
I am experimenting with CSS's shape-outside property using an image, but at least in Safari, the resulting shape is always based on the original image size and I don't see any way of actually scaling the image based on the box size, which would be necessary for a truly responsive design (not to mention making life easier for initial testing purposes).
For example, in this CSS snippet:
#shapetest {
float: left;
width: 100px;
height: 300px;
background: url('some-image.png');
shape-outside: url('some-image.png');
background-size: contain;
}
while the background is scaled to cover the div, the shape is still at the original size of some-image.png, which isn't unexpected. However, I'd really like to be able to scale the shape to fit within the box, without having to generate multiple renditions of the shape.
Am I missing some sort of scaling function for shape-outside? The resources I can find on this indicate that the scaling factor for a shape-outside image isn't actually specified just yet, making this somewhat less useful for designs where the object might scale based on a viewport-relative size, for example.
EDIT: In particular I want to be able to specify the height of the image (and have the width respond accordingly). The initial answer on this question worked well with a specified width, but the following attempt at reproducing this doesn't work, as the specified height of the div flows the text downward, and setting the div to float:left causes its own box to supercede the shape in the flow:
div.inset {
height: 1.5in;
}
div.inset img {
float: left;
width: auto;
height: 100%;
shape-outside: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png');
}
<div class="inset"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum ornare fermentum. Praesent at leo volutpat, tempus eros vel, tempus diam. Morbi in viverra tortor. Etiam lobortis cursus elementum. Mauris eget lectus eget dolor posuere varius vitae a mi. Praesent nec commodo tellus. Nam facilisis tincidunt risus ac consequat. Nam arcu tellus, aliquam sodales metus vel, mollis porta purus. Suspendisse sagittis hendrerit dolor, sit amet accumsan libero cursus sit amet. Duis non fringilla ante. Vestibulum vestibulum scelerisque leo, sit amet elementum mauris. Donec eget dui mollis, venenatis dui non, viverra urna. Nam molestie, felis ut mollis ultricies, erat turpis ullamcorper sem, nec eleifend quam ex ac eros. Praesent sodales ligula quis dui maximus fermentum. Suspendisse tempor luctus elit.
Doing it with a specified width and computed height works fine, however:
div.inset {
width: 1.5in;
}
div.inset img {
float: left;
width: 100%;
height: auto;
shape-outside: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png');
}
<div class="inset"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum ornare fermentum. Praesent at leo volutpat, tempus eros vel, tempus diam. Morbi in viverra tortor. Etiam lobortis cursus elementum. Mauris eget lectus eget dolor posuere varius vitae a mi. Praesent nec commodo tellus. Nam facilisis tincidunt risus ac consequat. Nam arcu tellus, aliquam sodales metus vel, mollis porta purus. Suspendisse sagittis hendrerit dolor, sit amet accumsan libero cursus sit amet. Duis non fringilla ante. Vestibulum vestibulum scelerisque leo, sit amet elementum mauris. Donec eget dui mollis, venenatis dui non, viverra urna. Nam molestie, felis ut mollis ultricies, erat turpis ullamcorper sem, nec eleifend quam ex ac eros. Praesent sodales ligula quis dui maximus fermentum. Suspendisse tempor luctus elit.
The specs say the following:
The shape is computed to be the path or paths that enclose the area(s) where the opacity of the specified image is greater than the shape-image-threshold value. [...]
The image is sized and positioned as if it were a replaced element whose specified width and height are the same as the element’s used content box size.
So using the background-size property doesn't change anything to the element's content box size. Using the actual image element instead should make the computed shape respond to the current content box size of the image. You can now simply set a relative unit like % for the width of the image element to achieve responsiveness.
Here is a working example. You can change the width of the container and the width of the image as well as its shape should respond to the changing container width:
.shape {
float: left;
width: 100%;
shape-outside: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png);
}
.container {
width: 40%;
}
<div class="container">
<img class="shape" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png" />
</div>
This approach relies on a width-only div not having a height of its own, however. But this solution also works:
img.inset {
float: left;
width: auto;
height: 1.5in;
shape-outside: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png');
}
<img class="inset" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum ornare fermentum. Praesent at leo volutpat, tempus eros vel, tempus diam. Morbi in viverra tortor. Etiam lobortis cursus elementum. Mauris eget lectus eget dolor posuere varius vitae a mi. Praesent nec commodo tellus. Nam facilisis tincidunt risus ac consequat. Nam arcu tellus, aliquam sodales metus vel, mollis porta purus. Suspendisse sagittis hendrerit dolor, sit amet accumsan libero cursus sit amet. Duis non fringilla ante. Vestibulum vestibulum scelerisque leo, sit amet elementum mauris. Donec eget dui mollis, venenatis dui non, viverra urna. Nam molestie, felis ut mollis ultricies, erat turpis ullamcorper sem, nec eleifend quam ex ac eros. Praesent sodales ligula quis dui maximus fermentum. Suspendisse tempor luctus elit.
I would like to... well look at the SO answer box. That is behavior what I'm looking for - scrollbar appears on text overflow but user can resize it manually.
My question is, is it possible to do such thing natively with CSS?
With my current setup, initially div is small (less then max-height) and I can resize it but only between current text height and max-height. When more text is inserted and scrollbar appear then I can't change it's size at all.
CSS
element.style {
resize: vertical;
max-height: 200px;
overflow: auto;
padding: 10px;
}
To be more precise I want following to happen:
If height of text is smaller then defined max-height then element sets it's size to minimal value needed for text to be completely visible (without scrollbar). - works
If height of text exceeds defined max-height then element will take max-height and scrollbar will appear. - works
If user don't wont to see scrollbar or simply want to see more text at once, he can resize the element to any desired height and max-height will take that new height as it's value. - don't work, user can't resize over max-height.
It would probably be faster to write JS than writing this question but I would like this have such behavior for static html pages.
Is this the styling you are looking for?
For example:
#element {
resize: vertical;
height: auto;
min-height:200px;
resize: vertical;
overflow: auto;
padding: 10px;
width: 95%;
border:1px solid;
}
<textarea id="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt, turpis eu aliquam aliquet, justo mi lobortis nibh, dictum sodales nunc quam non ipsum. Ut condimentum dui vel consectetur faucibus. Duis eu purus et massa ultricies blandit vel non felis. Morbi ut metus interdum, blandit mauris ac, vestibulum lorem. Etiam aliquam tincidunt magna, et ullamcorper enim pulvinar et. Aenean et auctor turpis, sed posuere eros. Integer magna lacus, accumsan sit amet hendrerit a, sagittis sed ipsum. Fusce leo neque, sollicitudin vel lectus eget, maximus cursus felis. Pellentesque rutrum volutpat enim, quis semper diam semper ac. Mauris ultrices molestie maximus. Vivamus feugiat posuere ultrices. Quisque blandit, lacus sed tempor ullamcorper, nunc ligula iaculis felis, ut eleifend mauris lacus a tortor. Fusce at cursus orci, at posuere nisi. In vel suscipit eros, eget cursus lacus.
Aenean ut neque sit amet orci gravida volutpat. Etiam vehicula nec augue ut vulputate. Integer fermentum est id leo mollis, quis accumsan quam commodo. Vivamus varius nibh turpis, ac tincidunt dolor consectetur non. Aliquam aliquam scelerisque orci sit amet posuere. Vivamus blandit quis ante vitae consectetur. Aliquam semper eros eu odio porttitor sollicitudin. Donec id mollis arcu. Etiam tortor est, dignissim sagittis lorem non, auctor commodo velit. Nulla facilisi. Morbi ultrices eleifend urna sit amet suscipit. Maecenas augue ante, lobortis at justo sit amet, malesuada faucibus justo. Nulla sit amet lorem in felis convallis feugiat ac fringilla urna. Vivamus finibus aliquam auctor. Fusce ante tortor, tempor id elit eget, sodales ultrices quam.
</textarea>
I have a content container that is 500px wide and floated to the right. This container contains text and then an image and then some more text. Ultimately I would like to pull this image out of the bounding 500px container and have it span the full width of the page, which for argument sake is 1000px wide. In effect the images will be full-width (1000px wide) while the content container is only 500px wide. What is the best way to do something like this so that the image can be at full width?
jsfiddle.net/QCb3R/
I would like to pull the image to extend fully outside of the .content div.
<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id dapibus mauris. Curabitur lectus metus, tincidunt sit amet varius et, euismod et neque. Sed a odio odio. Morbi placerat condimentum fermentum. Nam eleifend congue malesuada. Vivamus vel lorem eu leo blandit placerat. Nunc turpis justo, iaculis vestibulum interdum sit amet, luctus nec dui. Duis ultrices eleifend sem eget mattis. Quisque at purus nisi. Duis porta porttitor nisi nec ornare. Nam eu dolor urna, a suscipit libero. Morbi risus dui, egestas eget consectetur quis, malesuada vitae orci. Maecenas pulvinar malesuada elit eget sagittis. Curabitur congue, mauris quis pretium ultricies, augue nisl dapibus libero, eu lacinia sem nunc commodo purus. Quisque tellus purus, sodales a consequat in, adipiscing in odio. Donec non felis at felis sodales varius vitae non lorem.</p>
<img src="http://lorempixel.com/500/300/" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id dapibus mauris. Curabitur lectus metus, tincidunt sit amet varius et, euismod et neque. Sed a odio odio. Morbi placerat condimentum fermentum. Nam eleifend congue malesuada. Vivamus vel lorem eu leo blandit placerat. Nunc turpis justo, iaculis vestibulum interdum sit amet, luctus nec dui. Duis ultrices eleifend sem eget mattis. Quisque at purus nisi. Duis porta porttitor nisi nec ornare. Nam eu dolor urna, a suscipit libero. Morbi risus dui, egestas eget consectetur quis, malesuada vitae orci. Maecenas pulvinar malesuada elit eget sagittis. Curabitur congue, mauris quis pretium ultricies, augue nisl dapibus libero, eu lacinia sem nunc commodo purus. Quisque tellus purus, sodales a consequat in, adipiscing in odio. Donec non felis at felis sodales varius vitae non lorem.</p>
</div>
</div>
And the CSS:
.container {
width: 1000px;
background-color: #eee;
}
.content {
width: 500px;
float: right;
}
It is quite easy to create that effect, but not by setting the image to be absolutely positioned.
Here's a jsFiddle
.container {
width: 1000px;
background-color: #eee;
}
p {
width: 500px;
float: right;
}
.content {
width: 1000px;
float: right;
}
The problem with setting the image to be absolutely positioned is exactly because it takes the image out of the normal document flow. You would have to fill up the gap left by the original image with a place holder element of the same height, and then position the absolutely positioned image over the top of the place holder element. That sounds like a job for JavaScript as it would require access to the DOM to retrieve the position of elements on the page, that can't be done with CSS and HTML only.