I am using bootstrap but while using row class I am getting horizontal scroll bar
<div class="row" style="margin-top: 10px; margin-right: 10px;">
<div class="card col-md-3" style="max-height:fit-content; background-color: khaki;" >
<div class="d-flex justify-content-center mg">
<img src="https://image.flaticon.com/icons/png/512/897/897219.png" style="max-width:50%;" alt="Card image cap">
</div>
<div class="d-flex justify-content-center">
<h5 class="card-title">Artificial intelligence</h5>
</div>
</div>
<div class="card col-md-3" style="max-height:fit-content; background-color: cornflowerblue;" >
<div class="d-flex justify-content-center mg" >
<img src="https://image.flaticon.com/icons/png/512/888/888991.png" style="max-width:50%;" alt="Card image cap">
</div>
<div class="d-flex justify-content-center">
<h5 class="card-title">Web development</h5>
</div>
</div>
<div class="card col-md-3" style="max-height:fit-content; background-color: darkcyan;" >
<div class="d-flex justify-content-center mg" >
<img src="https://image.flaticon.com/icons/png/512/2641/2641044.png" style="max-width:50%;" alt="Card image cap">
</div>
<div class="d-flex justify-content-center">
<h5 class="card-title">Image processinge</h5>
</div>
</div>
</div>
Output
image output
please help
I have deleted fourth row from code due code code limitation on stackoverflow
Because you didn't give us your whole CSS style sheet this is hard to debug, so I give you a method to debug this yourself.
You can use the * and outline to see which items are out of line and correct them to float properly.
* {
outline: 1px solid purple;
}
* > * {
outline: 1px solid blue;
}
* > * > * {
outline: 1px solid red;
}
/* example CSS not part of the answer */
div, span {
padding: 20px;
margin: 4px;
}
h1 {
padding: 10px;
margin-bottom: 12px;
}
<div>
<h1>Testing page</h1>
<div>
<div>Wooow</div>
<span>This</span><span>is</span><span>Doge</span>
<div>
<div>
New level
</div>
</div>
</div>
</div>
My best guess is that you are using on the "row" class the margin-right where you should be using the padding-right. The "row" class uses 100% of the space it's put on, and you are using 100% + 10px, hence the scrollbar.
One other guess is the row below that seem bigger, it could be reason for scrollbar.
Related
I'm using ngbootstrap and angular, but I think the problem here is more of html/css matter.
I want to make a container to scroll horizonstally, I've found few threads about it, but cannot make it work in my case...
Here's my code
html:
<div style="width: 100%; background-color: rgb(177, 177, 177);">
<div class="container" >
<div class="my-container">
<h1>Usługi</h1>
<p>Nasza firma posiada uprawnienia UDT w zakresie montażu i konserwacji urządzeń dźwigowych, w tym:</p>
<div class="col-12 horizonstall-scroll" style="margin-left: auto; margin-right: auto; padding: 0;">
<div class="row">
<div class="card-container d-flex justify-content-center" *ngFor="let item of items">
<div class="card my-card" style="width: 18rem;">
<img class="card-img-top" src="{{item.smallImg}}" alt="lift">
<div class="card-body">
<h5 class="card-title">{{item.name}}</h5>
<p class="card-text">{{item.shortDesc}}</p>
<a class="btn btn-primary" (click)="openModal(item)" >Czytaj więcej</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
css:
.my-container {
padding-left: 15px;
padding-right: 15px;
background-color: rgb(216, 209, 209);
box-shadow: 0px 10px 25px 13px rgba(0,0,0,0.75);
}
.horizonstall-scroll > .row {
overflow-x: auto;
white-space: nowrap;
}
.horizonstall-scroll > .row > .card-container {
display: inline-block;
float: none;
}
Hi maybe this might help because I have had this problem before and I fixed it using this solution and its using bootstrap which is better in your case
Horizontal scrollable div's in a bootstrap row
hope this solution helps your needs, Cheers :)
I am attempting to target a specific class which is the first class name inside a div. The attempt I have made looks like the following:
.container-fluid:first-child div.row {
padding-top: 200px;
}
The HTML for the CSS.
<div class="container-fluid">
<div class="row justify-content-md-center"> <<TRYING TO TARGET
<div class="col-3 text-center">
<div class="row">
<img src="/assets/images/fssLogo.png"/>
</div>
</div>
</div>
</div>
As you can see i want to target only the first row inside the container-fluid tag but the padding is also getting applied to the row inside the col-3 class.
Could somone point me in the right direction.
It should be
.container-fluid >.row:first-child {
padding-top: 200px;
}
.container-fluid > .row:first-child {
background-color: red;
padding-top: 200px;
}
.innerRow {
background-color: pink;
}
<div class="container-fluid">
<div class="row justify-content-md-center">
<div class="col-3 text-center">
<div class="row innerRow">
<img src="http://via.placeholder.com/350x150" />
</div>
</div>
</div>
</div>
Or
.container-fluid >.row {
padding-top: 200px;
}
.container-fluid > .row {
background-color: red;
padding-top: 200px;
}
.innerRow {
background-color: pink;
}
<div class="container-fluid">
<div class="row justify-content-md-center">
<div class="col-3 text-center">
<div class="row innerRow">
<img src="http://via.placeholder.com/350x150" />
</div>
</div>
</div>
</div>
But the 2nd snippet is more preferable, it is because you are targeting .row that is the direct child of container-fluid, unless you have another row that is also a direct child of container-fluid, you can use the 1st snippet to only target the first row child.
> is used to target the direct child of a parent, regardless if there is a class that has the same name lower in the hierarchy
.parent > .someClass {
color: blue;
}
<div class="parent">
<p class="someClass">TARGETED</p>
<div>
<p class="someClass">NOT TARGETED</p>
</div>
</div>
Remove > and both text will be blue
Currently on my page I have this layout
<div class="card">
<div class="card-block">
<h4 class="card-title text-muted">UltimateWarrior15</h4>
<h6 class="card-subtitle text-muted">
Adventurer card
</h6>
</div>
<img data-src="holder.js/100px180/?text=Image">
<div class="card-block">
<div class="form-group row">
<label for="player-level-text" class="col-xs-2 col-form-label">Rank</label>
<div class="col-xs-10">
<label class="form-control text-muted">D</label>
</div>
</div>
</div>
</div>
It gives pretty simple result
But what I want to achieve is to move rank value from label formatted similar to input to some image asset or maybe just label with bigger font, that would overlap image like this
How to achieve this using HTML and CSS?
Sample
https://jsfiddle.net/46qnx1LL
You can achieve this with a simple negative margin, e.g. margin-top: -75px;. With setting the border: none; and background: transparent; only the font is visible. Now you only need to apply text-align: right; to the parent div and your letter is on the right side.
Here is an example:
.card-block .col-form-label {
display: none;
}
.card-block > .row > div {
text-align: right;
}
.card-block .text-muted {
border: none;
background: transparent;
font-size: 4em;
font-weight: bold;
margin-top: -75px;
color: black !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
<div class="card-block">
<h4 class="card-title text-muted">UltimateWarrior15</h4>
<h6 class="card-subtitle text-muted">
Adventurer card
</h6>
</div>
<img data-src="holder.js/100px180/?text=Image">
<div class="card-block">
<div class="form-group row">
<label for="player-level-text" class="col-xs-2 col-form-label">Rank</label>
<div class="col-xs-10">
<label class="form-control text-muted">D</label>
</div>
</div>
</div>
</div>
You can apply the CSS position:relative; and then specify an offset such as top:-50px;left:-20px; which would shift the element 20 pixels to the left and 50 pixels up. You can also specify right and bottom and use positive or negative values.
If you find that the element is hidden underneath another element, then you can move it up to a higher layer by specifying the z-index:layer number; so that the element is positioned on the right layer.
JS Fiddle
This is similar to the layout I'm trying to achieve:
The code I have now
<div class="row ">
<div class="col-lg-6 row-eq-height push-right">
<img src="1.jpg" class="img-responsive">
</div>
<div class="col-lg-6 row-eq-height">
<div class="eq-row-text ">
<p class="row-text">Text description for image </p>
</div>
</div>
</div>
<div class="row ">
<div class="col-lg-6 row-eq-height ">
<div class="eq-row-text ">
<p class="row-text"> Text description for the image </p>
</div>
</div>
<div class="col-lg-6 row-eq-height">
<img src="1.jpg" class="img-responsive">
</div>
</div>
I have tried using CSS class "no-padding" and also tried playing around with margins. when i apply 0 padding, the left side of the first image touches the edge of the browser( this is desired), however the other edge(right side of image) still has some empty space.
How do I get rid of that empty space get the results like the reference layout?
.col-md-6{
padding-right: 0px;
padding-left: 0px;
}
There could be an issue with the <p> padding/margin, could also be an issue with the <img> padding/margin. However it seems to be an issue with the sizing of the elements within the row.
I did however seemingly fix the issue in my PEN HERE
I added a height: *** to the row class, this may be needed for desired results as you are using row-eq-height bootstrap class.
HTML
<div class="row ">
<div class="col-lg-6 row-eq-height push-right">
<img src="1.jpg" class="img-responsive">
</div>
<div class="col-lg-6 row-eq-height">
<div class="eq-row-text ">
<p class="row-text">Text description for image </p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 row-eq-height ">
<div class="eq-row-text ">
<p class="row-text"> Text description for the image </p>
</div>
</div>
<div class="col-lg-6 row-eq-height">
<img src="1.jpg" class="img-responsive">
</div>
</div>
CSS
p{
margin: 0;
padding: 0;
}
img{
margin: 0;
padding: 0;
}
.row {
margin: 0;
padding: 0;
height:60px;
background-color: #eee
}
If using the LESS/SASS source: change #grid-gutter-width in the variables file to 0
If you want to get rid of the white space you will need to make your image bigger to span the cols. You can manually adjust the width of an image using css:
img {
width: 100%;
}
I am having problem with the bootstrap rows, where I am getting more white space at top and bottom of the rows, which I need to remove, I want the row to have just the height of the text present inside it...
HTML is given below :
<div class="row">
<div class="col-sm-6 text-muted">
<p>Author</p>
</div>
<div class="col-sm-6 text-right font-bold">
<p>abcd</p>
</div>
</div>
<div class="row row-divider"></div>
<div class="row">
<div class="col-sm-6 text-muted">
<p>Date Created</p>
</div>
<div class="col-sm-6 text-right font-bold">
<p>Nov 28, 19:30</p>
</div>
</div>
<div class="row row-divider"></div>
<div class="row">
<div class="col-sm-6 text-muted">
<p>File Type</p>
</div>
<div class="col-sm-6 text-right font-bold">
<p>Microsoft Word</p>
</div>
</div>
<div class="row row-divider"></div>
<div class="row">
<div class="col-sm-6 text-muted">
<p>Last Modified</p>
</div>
<div class="col-sm-6 text-right font-bold">
<p>Dec 08, 11:00</p>
</div>
</div>
All you need to do is add the following CSS to your code:
.row-divider {
height: 1px;
margin: 0px;
overflow: hidden;
background-color: #e7eaec;
}
p {
margin: 0;
padding: 0;
line-height: 1;
}
You basically tell all your paragraphs to have 0 margins so the line height is equal to the text height.
On a different note, you might want to use text-muted class on the <p> tags instead of the whole <div> that contains those <p> tags. Why? because for example tomorrow you will add two more lines to that div that wouldn't need to be text-muted, you would need to define a new class to cancel those values.
Style the things you need and only those.
If you want the left text and right text on the same line in Jsfiddle just change the col-sm-x class to col-xs-x class, basically, jsfiddle view is a bit small and that's why you see two lines.
You have to set:
p{
margin: 0;
line-height: 14px; /*you can reduce this value to achieve what you want*/
}
Here a JSFiddle example to play with
Note that .row-divider has margin: 9px 0px if you want you can reduce it to closer to the text above it.
Check this out for more information about line-height http://www.w3schools.com/cssref/pr_dim_line-height.asp
p{
margin: 5px 0px;
}
.clearfix {
zoom: 1;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
line-height: 0;
}
.clearfix:after {
clear: both;
}
use clearfix class with row.