https://codepen.io/06444929923/pen/gOMKaJd
<div class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 MuiGrid-direction-xs-column">
<div class="x-a MuiGrid-root MuiGrid-item">
<div class="x-b">
<div class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2">
<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto">Lorem ipsum</div>
<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true">
Lorem
</div>
<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto">
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
I have created a codepen as above to demonstrate the issue. Classes for material UI are also included. It is all okay when viewing the page using chrome. However, unexpected spaces are inserted into the div for Safari.
The yellow div should have the same height as the blue one however it isn't in Safari. It is not margin or padding when I inspect using developer tools. What is causing the issue?
Related
I have a complex Bootstrap-4 grid-layout. Now, suddenly inside a column, I need to make the background (not the content!) reach from left of the browser-window to the right of the browser-window, the whole width. Is there any way this can be done?
<div class="container">
<div class="row">
<div class="col">
<h2 class="font-weight-light">Hello!</h2>
<p>
This background should stay white.
</p>
</div>
</div>
<div class="row mybackground">
<div class="col">
The red background should fill ALL of the browser-width from left to right, but keep the area above and below with white background.
</div>
</div>
</div>
https://jsfiddle.net/enu2vxdw/
If you look at the fiddle, the background of < div class="mybackground" > should reach from left to right (no white paddings left and right), but the content of it should stay as it is.
Any idea how to do this with the least amount of changes (because unfortunately there are a lot places in the code where this needs to be done, so a simple css-class would be awesome).
Instead of adding rows inside a container, you should now have sections with containers.
An example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<section>
<div class="container">
<div class="row">
<div class="col">
<h2 class="font-weight-light">Hello!</h2>
<p>This background should stay white.</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col">
<h2 class="font-weight-light">Hello!</h2>
<p>This background should stay white.</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row bg-danger text-white">
<!--div class="col"-->
<div class="container">
<div class="row">
<div class="col">
<p class="mt-3">The red background should fill ALL of the browser-width from left to right, but keep the area above and below with white background.</p>
</div>
</div>
</div>
<!--/div-->
</div>
</div>
</section>
The container-fluid can stretch full width. To align the content you'll have to introduce a container again.
You'll end up with quite a lot of nesting which doesn't look too pretty but I don't know another Bootstrap way around this.
This result will be fully responsive regarding the spacing.
I have a list of dynamic items, some of them may have an icon on top of it, some of them not. I need padding from top inside elements that don't have the icon and located in row where an element have the icon. Width of items is fixed, and icon height is fixed too. So the "grid" may contain different columns count depending on screen width.
Something like this:
Is it possible to make such kind of layouts? How to do it?
<div class="container">
<div class="item">
<div class="dynamic-content-1">
Lorum ipsum
</div>
</div>
<div class="item item_with-icon">
<div class="icon"></div>
<div class="dynamic-content-2">
Lorum ipsum
</div>
</div>
<div class="item">
<div class="dynamic-content-1">
Lorum ipsum
</div>
</div>
<div class="item">
<div class="dynamic-content-1">
Lorum ipsum
</div>
</div>
<div class="item">
<div class="dynamic-content-2">
Lorum ipsum
</div>
</div>
<div class="item">
<div class="dynamic-content-1">
Lorum ipsum
</div>
</div>
<div class="item">
<div class="dynamic-content-3">
Lorum ipsum
</div>
</div>
<div class="item">
<div class="dynamic-content-2">
Lorum ipsum
</div>
</div>
<div class="item item_with-icon">
<div class="icon"></div>
<div class="dynamic-content-1">
Lorum ipsum
</div>
</div>
</div>
Update
I need a solution where the blocks are stretched to the full row height. In case somebody need simple alignment as on the picture see the
Codepen
I think I understand: On rows where there are no top ("fixed height") boxes, the top padding should be removed (like in your image). There should be no gap when there is no top box in the row.
I don't believe this can be done with CSS alone. Since your elements wrap dynamically, the number of items per row will vary. CSS can't target elements in this scenario because in HTML/CSS parent containers don't know when child elements wrap.
You'll need a JavaScript solution.
I'm trying to align some content in Bootstrap 4. It's not working the way I think and I don't understand why. Specifically, I'm unable to vertically or horizontally align content in a column. For example, in this Bootply, I have the following:
<div class="container">
<div class="row">
<div class="col-8">
<h2 class="display-4">Some Text</h2>
<p class="lead">
Some other details go here. This portion can go up to three lines of text. It will wrap around to the next line. A YouTube video will be available in the right side.
It's not there because Bootply doesn't allow iframes.
</p>
</div>
<div class="col-4">
<div style="border:solid 2px #ddd;">
A vertically centered YouTube video.
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-3">
<div class="fa fa-arrow-right" style="font-size:3.0rem;"></div>
</div>
<div class="col-9">
<h3 class="card-title">Detail</h3>
<p class="card-text">Here's some more info for you. This could go up to three lines of text. How do I center the arrow?</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
How do I vertically align the YouTube video so that it's centered? How do I vertically align the arrow so that it's centered? I can't seem to even get the arrow to center horizontally. I tried using justify-content-center as mentioned here without any luck. What am I doing wrong?
You need to use nested flexbox
.col-3 {
display:flex;
align-items:center;
justify-content:center;
}
Bootply
I am using the grid system (Bootstrap 3.3.4) to try to make about four columns. The only problem is it puts the grid in the background. And the footer just sits on top of everything in the grid. Here is the jsFiddle, notice how the last little bit of text is cut off by the navbar on the bottom. Here is my code:
<div class="jumbotron">
<h1>Example page header</h1>
</div>
<div class="col-md-2">
<div ng-repeat="category in main_business_categories">
{{category}}
</div>
</div>
<div class="col-md-2">
<p>column2</p>
</div>
<div class="col-md-2">
<p>third</p>
</div>
<div class="col-md-6">
<p>fourth</p>
</div>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
Made with love by Jeremy Martinez
</div>
</div>
How do I get it to where everything (header, footer, and text in grid) are all on the same depth. Right now, grid is in background and everything else is in foreground.
First you should wrap your columns inside a .container or .container-fluid and .row: https://jsfiddle.net/bhbhv38f/2/
The .navbar-fixed-bottom cause the behaviour you describe. You should remove that class to get the footer at the end of your content, see https://jsfiddle.net/bhbhv38f/3/
can you tell me where's the problem with my code in IE?
http://dv-projects.bluefile.cz/huno/
Slideshow does not work. Seems like a problem with CSS.
IE version: 11.0.2
HTML:
<div class="slider-wrapper">
<article class="slider">
<div class="slide-1">
<div class="slider-image"></div>
<div class="slider-info">
<h2>Nový produkt v nabídce</h2>
<p>Lorem ipsum...
</p>
</div>
</div>
<div class="slide-2">
<div class="slider-image"></div>
<div class="slider-info">
<h2>Novinka na trhu!</h2>
<p>Lorem ipsum...
</p>
</div>
</div>
<div class="slide-3">
<div class="slider-image"></div>
<div class="slider-info">
<h2>Kvalita a spolehlivost zaručena</h2>
<p>Lorem ipsum...
</p>
</div>
</div>
<div class="slider-radio-buttons">
<div class="on slide1"></div>
<div class="off slide2"></div>
<div class="off slide3"></div>
</div>
</article>
</div>
Thanks
Absolutely positioned elements aren't affected by the parents opacity being set to 0. In order to resolve this, set the opacity on the children to "inherit":
.slider-image,
.slider-info {
opacity: inherit;
}
This appears to have resolved the issue for me in IE11.
As was pointed out in the comments above, your document is getting loaded into Quirks mode in some older versions of Internet Explorer. It appears to be the result of the Mark of the Web:
<!-- saved from url=(0014)about:internet -->
This should go below your Doctype, as demonstrated in the linked documentation:
<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html>