When I use fxLayout="row" in parent div and fxLayout="column" in child div
its getting collapsed or overlapped in IE 11, but works in other browsers
kindly refer the stackbliz link for the issue
https://stackblitz.com/edit/angular-wcmerb
<div fxLayout="row" fxLayoutAlign="none" fxFlex="1 1 auto">
<div class="offer-text" fxLayout="column">
<div class="m-b-15 text-14">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div class="martop-20" fxLayout="row" fxLayoutAlign="end end" fxFlex="1 1 auto">
Condition Apply
</div>
</div>
</div>
after doing so many combination this one worked for me, posting here so that it will be help full for other person
<div fxLayout="row" fxLayoutAlign="none" fxFlex="1 1 auto">
<div class="offer-text" fxLayout="column">
replace the above code with the below one it, will work in all the browsers if you are looking for even structure, for the bottom text in Angular flex layout
<div fxLayout="column" fxLayoutAlign="none" fxFlex="1 1 auto">
Related
I have a div contains a row with 2 columns. Left column contains an image and right side contains some text. I've tried 100s of different combinations but couldn't figure out how to avoid overlapping problem. As you can see the images, when I start to resize the window, it starts to overlapping.
<div class="py-5">
<section class="my-5"><!-- Section -->
<div class="container"><!-- Container -->
<div class="row"><!-- Grid row -->
<!-- Grid column -->
<div class="col-xs-12 col-md-6">
<img th:src="#{/img/about.jpg}" src="" alt="">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-xs-12 col-md-6">
<!-- Section heading -->
<h1 class="h1-responsive font-weight-bold mb-4">About Us</h1>
<!-- Section description -->
<p class="lead grey-text mx-auto">
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>
<!-- Grid column -->
</div><!-- Grid row -->
</div><!-- Container -->
</section><!-- Section -->
</div>
I would love to have some margin top when its small as well, to have a clear separation.
UPDATE
Ryan Maffey, your solution works good up until a certain point. This is the result just before going for mobile view. Looks so bad at this point. I would love to have image on its own row if it shrinks more than 50%. Is it possible?
UPDATE 2
I finally found the combination I was looking for. This result solved all my problems.
<div>
<section>
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-6 my-4">
<img style="width: 100%;" th:src="#{/img/about.jpg}" alt="">
</div>
<div class="col-md-12 col-lg-6 my-4">
<h1 class="h1-responsive font-weight-bold mb-4">Header</h1>
<p class="lead grey-text mx-auto">Lorem ipsum...</p>
</div>
</div>
</div>
</section>
</div>
It looks as though the image is overflowing the column.
Adding CSS width: 100% onto the image will mean that it is only ever as wide as the width of the column it's in.
In the Mobile view you need to center the image vertically. Just use the parent div's style of that image to display: inline-block; height: 100%; vertical-align: middle; and that image to vertical-align: middle; max-height: 100px;
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 want to change the orientation of the col in small screen so i took the help of bootstrap Responsive utilities
<div class="row">
<div class="col-md-4 hidden-sm hidden-xs">
<h3>News title will go here with short description</h3>
<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,</p>
Read more <span class="read-more-btn-symbol">»</span>
</div>
<div class="col-md-8 hidden-sm hidden-xs ">
<img class="img-responsive" src="images/mid2.jpg">
</div>
<div class="col-md-8 visible-sm visible-xs">
<img class="img-responsive" src="images/mid2.jpg">
</div>
<div class="col-md-4 visible-sm visible-xs ">
<h3>News title will go here with short description</h3>
<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,</p>
Read more <span class="read-more-btn-symbol">»</span>
</div>
</div><hr>
but i dont want to write the same line twice and add different responsive classes ?
how do i fix this without writing the same thing twice
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-8">b</div>
<div class="col-md-8">b</div>
<div class="col-md-4">a</div>
</div><hr>
I try it with the last version of bootstrap and it works.
But I prefer work in separate divs with class="row".
You can add classes in the same line like this--
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4 hidden-sm hidden-xs"></div>
Then wrap all the div's inside it
Hope this helps!
<div class="row">
<div class="col-lg-12">
<div class="container-fluid top">
<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 typ
</p>
</div>
</div>
i have given col-lg-12 to a div, but on giving position: fixed why it is taking least size. why still i need to give width:100 percentage to div.
A simple Bootstrap architecture like
<div class="container-fluid">
...
</div>
You can see more on http://getbootstrap.com/css/#overview-container
Your correct architecture (not always, but most of the time) is:
container - row - col
So in this case it would be something like this:
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<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 typ
</p>
</div>
</div>
</div>
Now, if the text doesn't go all the way to the edge is because col-lg-* classes have a gutter padding of 15px. Simply remove the col-lg-* class and you will have the row instead which it doesn't have a padding.
See my demo here
EDIT
Credit to Tim Lewis:
"the container and container-fluid both have a 15px margin and row has a -15px margin. Make sure to not wind up with a -15px or 30px margin, depending on how you use them"
I think it should be corrected as
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
I would like to make my left sidebar stay in place when I scroll up and down. I only like the content scroll. The content is the one with the h4 Task 1 Content and is displayed on the right side.
<div class="container page">
<div ng-include="'app/components/navbar/navbar.html'"></div>
<div class="row page">
<div class="small-12 large-4 columns sidebar">
<div class="row">
<a class="medium-6 columns menu-item button">
<div class="text-center">
<i class="show-for-large-up fi-page-add></i>
<p>Task 1</p>
</div>
</a>
<a class="medium-6 columns menu-item button">
<div class="text-center">
<i class="show-for-large-up fi-page-edit"></i>
<p>Task 2</p>
</div>
</a>
</div>
</div>
<div class="small-12 large-8 columns content">
<h4>Task 1 Content</h4>
<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.</p>
<div class="form-group large-6">
<p><input type="text" ng-model="someModel" class="form-control" placeholder="Enter string"></p>
</div>
</div>
</div>
</div>