I have an issue with box sizing that includes general information. Depending if a particular card has an image, then card is bigger or smaller. How I can keep the box always with the same size?
<div className='card' syle='max-height:300px'>
<img onError="this.src= 'https://d27jswm5an3efw.cloudfront.net/app/uploads/2019/07/insert-image-html.jpg'" className="card-img top max-height:50px" src={item.img !== undefined ? item.img : "https://d27jswm5an3efw.cloudfront.net/app/uploads/2019/07/insert-image-html.jpg"}/>
<div className="card-body" syle='max-height:300px'>
<h3 className="card-title">{item.subject}</h3>
<p className="card-text">{item.description}</p>
<div className="col-8-center">
<div className="row justify-content-center">
<div className='col-3 text-center'>Likes: <strong>{item.likes}</strong></div>
</div>
<button type='button' className='col-4 border bg-danger justify-content-center text-white btn-lg'>Dislike</button>
<button type='button'className='col-4 border bg-success text-center text-white'>Like</button>
</div>
</div>
</div>
This is how it's displayed now:
Entries without a picture:
Entry with a picture:
Related
How can I adjust my 'card' so that it is displayed across the entire width of the screen?
I am using bootstrap
<div class="card">
<h4 style="margin-top: 5px; width: 100%;">{{$tipo->tipo }}</h4>
</div>
i need width similar to footer
If you are using the latest Bootstrap 4 then this code will create a card across the entire width:
<div class="card w-100 mt-2">
<h4>Restaurante</h4>
</div>
If there is still a gap then it is likely you have padding on the container div surrounding the card, so you would need to remove that.
the first thing you need to notice it's that card class display is flex in bootstrap.Also card-body has a 20px padding.So the first thing you need is use p-0 in card-body then devide your card body to multi row.So you below code:
<div class='card'>
<div class='card-img-top'>
<img src='...' />
</div>
<div class='card-body p-0'>
<div class='row mx-0'>
<div class='col-12 p-2'>
...card content
</div>
</div>
<div class='d-block px-0'>
<h4>Your footer</h4>
</div>
</div>
</div>
if you put a clear image to view what you want,I will help you more.I hope I could help you.
I'm using bootstrap 4.4.1.
I've been loking for a responsive list group that will be same height with other components. In the image I want both columns on second row to be same height of image and to hide other list items behind an scrolling group.
Here is the html file : https://jsbin.com/jaqacoq/edit?html,output
<div class="col-md-8 my-col p-4">
<img class="img-fluid" src="img3.jpg" alt="Image not Found">
</div>
<div class="col-md-4 p-2 my-col">
<div class="container">
<div class="row my-row">
<div class="col my-container">
Col 1
</div>
<div class="col my-col">
Col 2
</div>
</div>
<div class="row my-row">
<div class="col">
<div class="overflow-auto">
<div class="">Item 1</div>
<div class="">Item 1</div>
<div class="">...</div>
</div>
</div>
</div>
</div>
</div>
Expected result, but without using fixed size :
What you need here is a bit of jQuery to calculate the height of your image so you can set the height of your list group based on that.
With jQuery you can calculate height with .height()
Here's an example on how to use it:
$('#div2').css('height', $('#div1').height()+'px');
And here's an example with your code that is working:
https://www.codeply.com/p/Pv1dwtjQ9E
Y-overflow don't work without either height or max-height option, so you should specify height of your .comments-block in any units besides percents.
Another approach I can think of: position: fixed all your interface elements and resize/scroll only the central element.
So I'm writing a code where I need to evenly place cards next to each other with rows when using flex. However, I'm getting some spacing on the right side and can't work out a reason why is that happening. I tried inspecting the element, but it just shows the entire card extends to the right, but there is no real reason behind why it does that. I've scrolled through CSS code, and there's no additional width on the right.
<section id="jobs">
<!--Employing cards-->
<div class="container-fluid container-fluid-shorter bg-white">
<!--Assistant card-->
<div class="row">
<div class="col-md-6 col-lg-4 my-3">
<div class="card width-37">
<div class="card-body d-flex align-items-center justify-content-between">
<h6 class="card-title font-weight-lighter pb-3">Custom units</h6>
<p class="card-text">
<h4 class="text-grey font-weight-light text-capitalize pb-3 pt-3">home page hero</h4>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 my-3">
<div class="card width-37">
<div class="card-body d-flex align-items-center justify-content-between">
<h5 class="card-title font-weight-lighter pb-3">Vlastní jednotky</h5>
<p class="card-text">
<h4 class="text-grey font-weight-light text-capitalize pb-3 pt-3">home page hero</h4>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 my-3">
<div class="card width-37">
<div class="card-body d-flex align-items-center justify-content-between">
<h5 class="card-title font-weight-lighter pb-3">Vlastní jednotky</h5>
<p class="card-text">
<h4 class="text-grey font-weight-light text-capitalize pb-3 pt-3">home page hero</h4>
</div>
</div>
</div>
</div>
</div>
<!--End of employing cards section-->
</section>
Adjustments I've made to the CSS :
.width-37{
max-width: 37.5vh;
}
.card-body{
padding-left: 0; !important;
padding-right: 0; !important;
}
I'm trying to place all the items in the row where there is a small spacing between each item and all items will create rows as you set rows for different screen sizes large, medium, small. For some reason flex item is doing spacing on the right side of each item there is. It is 480 pixels wide and 180 height. I would like it to be 180 x 180 pixels so same height and width. Anyone got an idea on why is this happening?
.width-37{
max-width: 37.5vh;
}
This is causing the spacing on right side. Also, there should be no ; before !important
This is due to how block level elements are rendered and not a Flexbox specific issue. Block level elements always take up the full width of the containing element. If you set a width on a block level element, and it does not fill the containing element, the remaining space will be filled with margin.
Example
div {
min-height: 24px;
}
div:nth-child( 1 ) {
width: 100px;
background-color: rebeccapurple;
}
div:nth-child( 2 ) {
max-width: 200px;
background-color: gold;
}
div:nth-child( 3 ) {
width: 20vw;
background-color: silver;
}
<div></div>
<div></div>
<div></div>
The default flow of content is left to right and why the element is to the left. All the space to the right of each element is margin. This is what is happening inside of your Bootstrap column elements.
This is the why
*Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
Documentation here
In order to remove the padding on your gutter you can add the class no-gutters to your row.
Consider the below Angular 2 Template code :
<div *ngIf="artist">
<header class="artist-header">
<div *ngIf="artist.images.length > 0">
<img class="artist-thumb img-circle" src="{{artist.images[0].url}}">
</div>
<h1>{{artist.name}}</h1>
<p *ngIf="artist.genres.length > 0">
Genres : <span *ngFor="let genre of artist.genres">{{genre}}</span>
</p>
</header>
<div class="artist-albums">
<div class="row">
<div class="col-md-3" *ngFor="let album of albums">
<div class="card bg-faded card-body album">
<div *ngIf="album.images.length > 0">
<img class="album-thumb img-thumbnail" src="{{album.images[0].url}}">
<h4>{{album.name}}</h4>
<a class="btn btn-default btn-block" routerLink="/album/{{album.id}}">Album Details</a>
</div>
</div>
</div>
</div>
</div>
</div>
In spite of applying class="col-md-3", all divs are appearing in a new line vertically. Below is the image shown. I want that 3 div should appear horizontally in one line. What's need to be changed within the above code?
If the whole code you posted is looped to display all these images, each of the col-md-3 is in a seperate row div, which creates a linebreak each time. So try to make the loop inside that row div, only for the col-md-3 elements.
Add the other bootstrap options to the div:
col-lg-3 col-md-3 col-sm-3 col-xs-3
Be sure that you do not have any margins or haven't override the default width from bootstrap using "!important" flag.
Try to see the live CSS using "inspect element" option in your browser and try to change the data there so you can figure out what is going on.
EDIT: As requested here is the jsfiddle
When the screen gets too small for the text to fit in the row, it just overlaps other rows, rather than extending the row height. Perhaps this is because I set row heights on every row as a percentage value, in order to lay out my html page with even spacing and vertical alignment. How do I correct this overlapping of text onto other rows? Should I be looking into somehow vertically aligning my rows without setting their height? Or can I keep it the way it is and add some kind of overflow property to each row to tell them to extend their height when necessary?
All relevant images and code:
screenshot of fullscreen (good - no problems yet)
screenshot of hovering over the middle row element on smaller screens (problems)
screenshot of hovering over the bottom row of smaller screens:
all my html for the page:
<div id="landing-page" class="text-uppercase">
<div class="row hidden-lg-up" style="height:20%;overflow-y:auto;">
<div class="col-xs-3 flex-xs-middle">
<img width="100" src="images/monster2.png" />
</div>
<div class="col-xs-3 offset-xs-6 flex-xs-middle">
<img class="pull-xs-right" width="100" src="images/monster4.png" />
</div>
</div>
<div class="row" style="height:95%;overflow-y:auto;">
<div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down flex-xs-top flex-sm-middle">
<img width="80%" src="images/monster2.png" />
</div>
<div class="col-md-12 col-lg-6 flex-xs-middle ">
<div id="motto-text" style="text-align: center;">
<h5 class="text-muted display-6">the vegan repository</h5>
<h1 class="display-3">
find vegan stuff* near you.
</h1>
<a id="try-now-button" class="with-border clickable" href="#search-filter-page">
<h5 class="text-center medium-text">try now</h5>
</a>
</div>
</div>
<div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down flex-xs-top flex-sm-middle">
<img class="pull-xs-right" width="80%" src="images/monster4.png" />
</div>
</div>
<div class="row" style="height:5%;overflow-y:auto;">
<h4 class="display-6 flex-xs-bottom">
*Stuff like restaurants, meat alternatives, dairy alternatives, and much more!
</h4>
</div>
</div>
all my css for the page:
div#landing-page {
background-color: #696969;
height: 100%;
padding: 110px 40px 0px 40px;
overflow-y: auto;
min-height:470px;
}
EDIT: As requested here is the jsfiddle
Alright. Now the question is clear. The problem was easy to fix.
The problem is in the following div. You have specified it to have col-md-12 but you didn't force it when the screen is xs
<div class="col-md-12 col-lg-6 flex-xs-middle ">
<div id="motto-text" style="text-align: center;">
<h5 class="text-muted display-6">the vegan repository</h5>
<h1 class="display-3">
find vegan stuff* near you.
</h1>
<a id="try-now-button" class="with-border clickable" href="#search-filter-page">
<h5 class="text-center medium-text">try now</h5>
</a>
</div>
</div>
so the simplest thing is to add col-xs-12 class to prevent overlapping
See example