I am using a bootstrap 4 card:
<div class="card" style="height:"500px;width:100px">
<div class="card-body">
<div class="top-portion">
This portion can span from one to many lines.
</div>
<div class="content" style="overflow-y">
....
....
</div>
</div>
</div>
I need the ".content" div to occupy the remaining vertical space and be scrollable when needed. I know that I am supposed to put "max-height:..." at its style.
However, the problem is that I do not know the exact value to put because the ".top-portion" section varies in height.
<div class="card" style="height:500px; width:100px;overflow: hidden;">
<div class="card-body d-flex flex-column">
<div class="top-portion mb-auto">
This portion can span from one to many lines.
</div>
<div class="content" style="overflow-y:auto;max-height: 200px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
use this code for your card. and "top-portion" height never disturb content. I have use "mb-auto" it means margin-bottom:auto; if you want to put content area bottom of card.
Related
With Vuejs and Bootstrap v5.0.1 I make image at left and text right aligned and with code :
<div class="d-flex">
<div class="float-start">
<img class=" item_image_left_aligned" :src="itemDetailsImage.url" >
</div>
<div class="float-end">
<div v-html="itemDetails.description"></div>
</div>
</div>
I have text aligned at right, but I got empty space under image if text is long.
How can I fill area under image with text ?
Thanks in advance!
Since you are looking for a floating solution, you don't need the d-flex. Only make the image floating left, not the text.
Not sure what your item_image_left_aligned class does.
<div>
<div class="float-start">
<img class="item_image_left_aligned" :src="itemDetailsImage.url" />
</div>
<div>
<div v-html="itemDetails.description"></div>
</div>
</div>
is this what you are looking for. I have added h-100 bootstrap class to the image.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
<div class="float-start">
<img class=" item_image_left_aligned h-100 " width="100" src="https://dummyimage.com/100x100/000/fff" >
</div>
<div class="float-end">
<div v-html="itemDetails.description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
This question already has answers here:
Centered elements inside a flex container are growing and overflowing beyond top [duplicate]
(3 answers)
Closed 1 year ago.
I've been playing around with this issue for a while. Stack Overflow suggested this link to take a look and see if that solve my question but it is not quite the case here, because the is no image related and there is no relative and absolute position involve which I think is key in this approach.
I want to set up an overflow-y when some text exceeds the height of an image in the background. So far I got two approaches:
One where I can center the text but it cuts off when overflow is called.
Another one where I cannot center the text (it stays up) but overflow is working fine.
The following block do not center vertically the text:
<div class="w-full text-md border border-red-600">
<div class="relative">
<img class="w-full h-96" src="https://i.imgur.com/hAodNjT.jpg" />
<div class="flex justify-between items-center absolute h-full top-0 w-full sm:w-1/2" style="background-color: rgba(255, 255, 255, 0.7)">
<div class="overflow-auto h-full">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>
</div>
</div>
The following block cut off the text from the top:
<div class="w-full text-md border border-red-600">
<div class="relative">
<img class="w-full h-96" src="https://i.imgur.com/hAodNjT.jpg" />
<div class="flex justify-between items-center absolute h-full overflow-auto top-0 w-full sm:w-1/2" style="background-color: rgba(255, 255, 255, 0.7)">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>
</div>
Any feedback is welcome.
The following block do not center vertically the text
Why do not center vertically, The last div where you used dumy test you have used class h-full when you used h-full then this div got height 100% and it will take whole space of this parent element.
You have to use max-h-full when you use this then it will not always take the whole space.
Run this
<div class="w-full text-md border border-red-600">
<div class="relative">
<img class="w-full h-96" src="https://i.imgur.com/hAodNjT.jpg" />
<div class="flex justify-between items-center absolute h-full top-0 w-full sm:w-1/2" style="background-color: rgba(255, 255, 255, 0.7)">
<div class="overflow-auto max-h-full">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>
</div>
</div>
I have hunted high and low and I am 90% convinced my problem stems from floating elements and that the answer to my problem is the proper application of clear.
Unfortunately I am not well versed enough in CSS to know where to apply the fix and hacking at it doesn't seem to be getting me there, can someone help?
I want the well to expand to encompass my BootStrap column elements and their children.
I have the following HTML in a CodePen if you want to take a look at it live:
<div class="container-fluid">
<div class="well">
<div class="col-md-1">
<button type="button" class="btn btn-success" ng-click="upVote(vote)"><i class="fa fa-2x fa-thumbs-up"></i></button>
<button type="button" class="btn btn-danger" ng-click="downVote(vote)"><i class="fa fa-2x fa-thumbs-down"></i></button>
</div>
<div class="col-md-10">
<label> Sample title field</label>
<div class="basic-panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>
<div class="col-md-1" style="text-align: center;">
<div>Score</div>
<span class="badge" style="font-size: 42px !important;">42</span>
</div>
</div>
</div>
The problem here is that you do not include a row element to hold all of the col div's.
So all you need to do is add the class row to the same div that your class well is in.
Like so:
<div class="container-fluid">
<div class="well row">
<div class="col-md-1">
<button type="button" class="btn btn-success" ng-click="upVote(vote)"><i class="fa fa-2x fa-thumbs-up"></i></button>
<button type="button" class="btn btn-danger" ng-click="downVote(vote)"><i class="fa fa-2x fa-thumbs-down"></i></button>
</div>
<div class="col-md-10">
<label> Sample title field</label>
<div class="basic-panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>
<div class="col-md-1" style="text-align: center;">
<div>Score</div>
<span class="badge" style="font-size: 42px !important;">42</span>
</div>
</div>
Here is a Bootply to give you a visual.
Now since a row can only hold up to 12 columns.. you won't be able to add any more col inside that row since 1 + 10 + 1 = 12... you will have to create another row unless of course you make your current col's smaller.
Hope this helps!
I'm new to bootstrap and working on a project to help figure it out. I also don't know much LESS yet.
I have 2 columns: col-xs-3 and col-xs-9. In the 9 column, I have a canvas that I would like to retain a particular aspect ratio. I don't actually care what the aspect ratio is, as long as it's the same everywhere. Specifically, as wide as the column and a proper height for the given width.
I've tried using percentages for width and height, but even if that did work, it'd be less than ideal in a dynamic height column.
This example works fine for me. I think you need to do two things: remember to set the width and height properties on the canvas, and then you can set the canvas width to 100% and its height to auto. It should cause the canvas to always be the full width of its container and force its height to remain in proportion.
CSS:
canvas {
background-color: blue;
width: 100%;
height: auto;
}
HTML:
<div class="container">
<div class="row">
<div class="col-md-4">
<canvas id="canvas" width="300" height="300">
Sorry, your browser doesn't support the <canvas> element.
</canvas>
</div> <!-- /col-md-4 -->
<div class="col-md-4">
<p>item 1: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div> <!-- /col-md-4 -->
<div class="col-md-4">
<p>item 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div> <!-- /col-md-4 -->
</div> <!-- /row -->
</div>
JS:
$( document ).ready(function() {
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
});
A fiddle demo
So I have this problem, where I have my navigation bar that respondes to screen sizes.
All looks fine, but I need it to be sticky. Whenever I do this, It floats on top of my first hero picture, and with a section of about 40-50px at the top that I can't get rid of.
If someone could please give me a hand with this. It has been doing my head in for 2 weeks now.
Here is the JSfiddle: http://jsfiddle.net/fxar8/
<header>
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<li>Teaching and Learning</li>
<li>News and Events</li>
<li>Contact</li>
<li>Home</li>
<li>Home</li>
</ul>
Menu
</nav>
</header>
<div class="hero-image first">
<h1 class="big">Sample Text</h1>
</div>
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="grid-6">
<h1>About Us</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Read More</p>
</div>
</section>
</div>
</section>
<a name="tl"><div class="hero-image second"></a>
<h1 class="big">Sample Text</h1>
</div>
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="grid-4">
<h1>Teaching & Learning</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="grid-2">
<img src="images/tl.jpg" />
</div>
</section>
</div>
</section>
<a name="ne"><div class="hero-image third"></a>
<h1 class="big">Sample Text</h1>
</div>
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="grid-2">
<img src="images/ne.jpg" />
</div>
<div class="grid-4">
<h1>News and Events</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</section>
</div>
</section>
<a name="contact"><div class="hero-image fourth"></a>
<h1 class="big">Sample Text</h1>
</div>
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="grid-2">
<center><img src="images/2501.jpg" class="rounded" /></center>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="grid-2">
<center><img src="images/2502.jpg" class="rounded" /></center>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="grid-2">
<center><img src="images/2503.jpg" class="rounded" /></center>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</section>
</div>
</section>
<footer class="grid-full">
<p>© BHS 2014.</p>
<p class="right"> Designed by Begintoend</p>
</footer>
Cheers in advanced
So basically you have to modify a few things, because 'Teaching an Learning' doesnt fit.
// This is to fit longer text (Teaching and Learning)
// + padding so it looks nicer
nav a {
min-width: 150px;
padding: 0 15px;
}
// Total width needs to be adjusted
// because we increased the size of navbar (Teaching..)
nav ul {
width: 1000px;
}
// The gap was caused by h1 element's top margin inside hero
.big {
margin-top: 0;
}
Also don't forget to adjust viewports - widths at which to transofrm the menu, since the menus' width has increased