I am using Tailwindcss and trying to achieve a design, in which there is a scroller in middle section.
However, the scroller is disabled and it's full height is not fit to it's parent.
Following is the part of the code:
<div class="h-full bg-green-200">
<div class="overflow-y-scroll">
<p class="my-10">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex
eius fugit optio sapiente provident enim nihil at nemo
molestiae quo, inventore consectetur esse nisi, consequuntur
consequatur! Dolor facilis quasi molestiae?
</p>
<p class="my-10">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex
eius fugit optio sapiente provident enim nihil at nemo
molestiae quo, inventore consectetur esse nisi, consequuntur
consequatur! Dolor facilis quasi molestiae?
</p>
<p class="my-10">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex
eius fugit optio sapiente provident enim nihil at nemo
molestiae quo, inventore consectetur esse nisi, consequuntur
consequatur! Dolor facilis quasi molestiae?
</p>
</div>
</div>
I tried giving h-full, h-fit. I also tried using grow, flex-1. But it isn't working as expected.
Full code here in sandbox:
https://codesandbox.io/s/spring-sun-e9mrrv
h-full : sets an element’s height to 100% of its parent, as long as the parent has a defined height.
you have set the overflow as hidden to the parent element. So basically your div has full height as its content but the overflow is hidden.
You have also set overflow of your div to scroll but since its fitting its content wholly in the div, the scrollbar is disabled as there is nothing to scroll.
You can either set a fixed height to the div where you need the scroll or some of the parent divs.
Check out the solution here
Change your
overflow-y-scroll To
overflow-y-auto
Related
I'm trying to place an 17x17 px png image at the beginning of a centered div text like that:
[img] text text
text text text text text
text text text text text
<div style="text-align: center; height: 45px; width: 200px">
<img src="icon" />
<div>
Some longer text.
</div>
</div>
The "difficulty": The text must remain in the div and the div must not contain anything but the text. And the div also must stay a div, or at least must have a height property.
I tried a lot with css but it never works out how I need it. Thanks!
EDIT: The text inside the div is not necessarily long. It can also be just one word.
You can use the pseudo-element ::before to display your image inside your div:
#myDiv::before {
content: url('image.png');
}
Here's a working fiddle.
I think you need something along these lines:
A header to have the icon and the title centered
A section with the rest of the text
And that can easly be done with some lines of flex box. Something along these lines:
<header class="center-text">
<img src="https://forum.starmen.net/include/images/smilies/cool3.png" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, eum, debitis earum dignissimos nobis quos, nulla voluptates temporibus voluptatum ad repellat, nam dicta. Recusandae
ea quasi eligendi, nulla labore molestias.
</header>
<section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis sint voluptatem, id fuga adipisci dolor ut deleniti, est provident quis expedita nostrum ipsum sunt maiores obcaecati esse repellat tempore sed. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Perspiciatis sint voluptatem, id fuga adipisci dolor ut deleniti, est provident quis expedita nostrum ipsum sunt maiores obcaecati esse repellat tempore sed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis sint
voluptatem, id fuga adipisci dolor ut deleniti, est provident quis expedita nostrum ipsum sunt maiores obcaecati esse repellat tempore sed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis sint voluptatem, id fuga adipisci dolor
ut deleniti, est provident quis expedita nostrum ipsum sunt maiores obcaecati esse repellat tempore sed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis sint voluptatem, id fuga adipisci dolor ut deleniti, est provident quis expedita
nostrum ipsum sunt maiores obcaecati esse repellat tempore sed.
</section>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.center-text {
display: flex;
justify-content: center;
}
</style>
http://jsfiddle.net/mgLtz5kg/
<div class="row expanded">
<div class="row expanded paddedrow">
<div class="small-12 medium-4 columns paddedcirclediv">
<div class="small-12 columns circlediv"></div>
</div>
<div class="small-8 columns factoid childbox">
<h3>lorem</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto, voluptatibus minus assumenda harum ipsum. Beatae in at quam accusantium enim asperiores, hic nulla eum, nihil quae omnis error, labore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto, voluptatibus minus assumenda harum ipsum. Beatae in at quam accusantium enim asperiores, hic nulla eum, nihil quae omnis error, labore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto, voluptatibus minus assumenda harum ipsum. Beatae in at quam accusantium enim asperiores, hic nulla eum, nihil quae omnis error, labore.</p>
</div>
</div>
<div class="row expanded">
<div class="small-12 medium-4 columns paddedcirclediv">
<div class="small-12 columns circlediv"></div>
</div>
<div class="small-8 columns factoid">
<h3>ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto, voluptatibus minus assumenda harum ipsum. Beatae in at quam accusantium enim asperiores, hic nulla eum, nihil quae omnis error, labore.</p>
</div>
</div>
</div>
Using foundations small-12, medium-6 style notation how do you approach vertically aligning content in a responsive div. In the codesnippet above I want the content on the right to be middle aligned to correspond to the circular div on the rights centre.
I know this is a popular question but all the responses require me to either define a width, or specifically state where on the page the div is located using 'top' and 'left' tags.
Is that really the way you do it?
Check out this JSFiddle for a solution to your problem: http://jsfiddle.net/61hov4rp/65/. (Tested in latest versions of Chrome, Safari, Opera, Firefox, Tor).
The trick is to use FlexBox. Without it, you will need to hard-code some values, as others have suggested (margins, paddings, heights or widths - it's unavoidable), but FlexBox finally allows you to align content vertically in a responsive flexible-width div.
In future projects you could use Foundation 6, which supports FlexBox. Check out their Flex Grid documentation.
I have two <div>. One of them with 'Lorem ipsum' text, second - with numbers. I found, that div with numbers, don't wrap numbers to new line in fixed width <div>. Is anybody can explain, why number don't wrap to new line, maybe this situation described somewhere in specifications?
JSFiddle.
div {
width: 200px;
}
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quasi consequatur nobis magni molestias repudiandae rerum quisquam quo dolore dolorem! Sit eligendi accusamus aliquam consectetur inventore minima, fugiat qui quia.</div>
<div>111111111111111111111111111111111111111111111111</div>
Because the browser treats numerals as regular text and won't break it unless you tell it to with something like the word-wrap or word-break property. Add a rule like:
div {
width: 200px;
word-wrap:break-word;
}
to do that.
jsFiddle example
div {
width: 200px;
word-wrap: break-word;
}
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quasi consequatur nobis magni molestias repudiandae rerum quisquam quo dolore dolorem! Sit eligendi accusamus aliquam consectetur inventore minima, fugiat qui quia.</div>
<div>111111111111111111111111111111111111111111111111</div>
I'm creating my first website, using Twitter Bootstrap 3.
I want to create a feedback section using thumbnails.
What I need is to vertical-align social buttons in the bottom of each thumbnail no matter of thumbnail's height.
Here is my HTML code:
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail vertical-container">
<img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
<div class="caption">
<h3>Lorem Ipsum!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ut earum libero quaerat modi facilis suscipit qui at, minus tempore, fugiat ipsam, consequatur veniam iste itaque tempora dignissimos consectetur quas.</p>
<div class="vertical-container1">
<p>VK Instagram</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
<div class="caption">
<h3>Lorem Ipsum!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci!</p>
<p>VK Instagram</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
<div class="caption">
<h3>Lorem Ipsum!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci!</p>
<p>VK Instagram</p>
</div>
</div>
</div>
</div>!
How it looks now:
You can do this by positioning divs. Assign position relative to the container div. in your case col-md-4 but as it's a bootstrap class you have to give it other class name and assign position relative to it.
And position of the div containing buttons. (in your case vertical-container1) to position absolute
parentWrapperDiv{position:relative;}
buttonsContainer{position:absolute;bottom:0;}
You could set a minimum height for your text area using a custom class;
<p class="min-height">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos...</p>
.min-height {
min-height:100px;
}
this will ensure all the text area's are the same height even if there is not enough text to push the buttons down.
An Exmaple
of course this could go the other way and end up having too much text in which case you'll want to add a maximum height thus;
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos...
.max-height {
max-height:120px;
overflow:hidden; // this will cut the text off
}
you try code before:
.thumbnail {position:relative;}
.thumbnail a.btn {position:absolute;bottom:0;left:0;}
If you have every created a dynamic page, you may notice that if you start out with a page height that does not require a scrollbar and then add content dynamically, the scroll bar will appear. When it does this, it "pushes" all of my content to the left the width of the scroll bar and it appears that everything on the page jumps a little.
Is it possible to make the scrollbar act as if it were position absolute so that instead of pushing my content all to the left, it just lays over the content. I do not like the way the content all "jumps" to the left; it looks nasty.
Thanks
you can use overflow: overlay to avoid your content being pushed, what is does is instead of taking your container space it position the scrollbar to top of you content
.overlay {
width: 100px;
height: 100px;
overflow: overlay;
}
.auto {
width: 100px;
height: 100px;
overflow: auto;
}
<h2>scrollbar on content</h2>
<div class="overlay">
<div class="scrollbox-content">Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>
<h2>scrolbar sharing space with content</h2>
<div class="auto">
<div >Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>
the div with overlay css placed on top of the overflown div however the div with auto overflow pushes the data.
Using this for container with text is not an ideal solution, but I chooses text so the difference would be clear
You could, but it wouldn't be perfect. Copying the code from this post:
// Used like $('#my-id').hasScrollbar();
jQuery.fn.hasScrollbar = function() {
var scrollHeight = this.get(0).scrollHeight;
//safari's scrollHeight includes padding
if ($.browser.safari)
scrollHeight -= parseInt(this.css('padding-top')) + parseInt(this.css('padding-bottom'));
if (this.height() < scrollHeight)
return true;
else
return false;
}
You could query to see if the scroll bar is present. Before this, however, you'll have a global variable that is the width of the viewport prior to the scrollbar appearing:
var viewportWidth = $(window).width();
And after running the function above, you could compare this viewportWidth with the new viewport width of the window with the scroll bar, and margin-right the body the negative amount of the difference.
What you ask cannot be done.
You could however, force it to appear at all times:
#id {
overflow: scroll;
}
But this is horribly ugly.