Hi I would like to share the following code:
<div class="row full-width full-height wrapper-container">
<div class="row full-width" style="flex: 0 0 auto;">...Items here...</div>
<div class="row full-width wrapper-fullfill" style="flex: 1 1 auto; margin-top: 0.5rem;">
<div ng-class="showList" class="row col-xs-12 col-sm-7 col-lg-8 wrapper-container">
<div class="row full-width dropdown-places-type-mobile">
<div class="input-container col-xs-12 no-padding" style="display:inline-block;">
<div class="text-info text-info-menu" type="text" dropdown-menu="placesType" dropdown-model="placeType">Tipo de espacios</div>
<img src='../images/arrow-select-primary.png' class="input-icon-menu" />
</div>
</div>
<div class="row full-width wrapper-fullfill" style="overflow-y:scroll; padding:0;">
<div class="row col-xs-12">
<div ng-repeat="place in places" class="col-xs-12 col-sm-6 col-lg-4">
<div ng-include="'./views/items/place-card.html'">
</div>
</div>
</div>
</div>
</div>
<div ng-class="showMap" class="col-xs-12 col-sm-5 col-lg-4" style="overflow: hidden; padding:0;">
<ui-gmap-google-map ng-if="showMapMobile" center='map.center' zoom='map.zoom' options='map.options'>
<ui-gmap-markers fit="true" models="placeMarkers" coords="'self'" icon="'icon'" options="'options'">
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
</div>
</div>
Here the css for wrapper-container and wrapper-fullfill:
.wrapper-container {
flex-direction: column;
flex-flow: column;
}
.wrapper-fullfill {
flex-grow: 1;
}
I have a flex wrapper-container and inside a wrapper-fullfill class to fullfill al the remaining space until cover all the div with the element.
The problem is that in Chrome and Firefox the behaviour is the expected one, but in Safari the nested wrapper-container is not working as expected.
I would like to know if you could help me to find a solution for that. I am really stuck on this.
Here you can find the full code of the page with the css and the html elements:
http://test.nomadespacios.com/#!/places
Thank you very much in advance.
Related
I am facing a problem with the Bootstrap-4 grid system. There are 12 columns, and whenever I use less than 12 columns, the rows are automatically centered. I want left alignment, how can this be fixed?
A snippet of my code:
<div class="row justify-content-start con-flex">
<?php foreach($books as $book):?>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div id="single-book">
<div id="book-image">
<?php print '<img src = "'.strip_tags($book->book_image).'" alt = "">';?>
<div id="addto-cart"><i class="fas fa-shopping-cart"></i> Add to cart</div>
</div>
<div class="book-text">
<div id="book-name"><?= substr(htmlentities($book->book_name),0,21) ?></div>
<div id="author">By <i><?= htmlentities($book->author) ?></i></div>
<div id="price"><?= htmlentities($book->price) ?>.TK</div>
<div id="book-details">
<?php print 'View details'; ?>
</div>
</div>
</div>
</div>
<?php endforeach;?>
</div>
image of code:
enter image description here
According to Bootstrap doc that should solve your problem
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
content here...
</div>
<div class="col-4">
content here...
</div>
</div>
</div>
The code you have should be working fine, columns will be aligned left by default; maybe what you are seeing is the result of using .container instead of .container-fluid which uses the full width of the viewport. It's either this or you might have some custom CSS that's affecting the layout of the columns
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row ">
<div class="col-4 col-md-4 border">content here...</div>
<div class="col-4 col-md-4 border">content here...</div>
</div>
</div>
<div class="container-fluid">
<div class="row ">
<div class="col-4 col-md-4 border">content here...</div>
<div class="col-4 col-md-4 border">content here...</div>
</div>
</div>
This problem was for my other base CSS.
Instead of:
*{
margin: 0 auto;
}
For this margin: 0 auto; in my main style.css file My bootstrap's grids were not working properly. Now I remove this margin: 0 auto from *.
Now
I write
* {
margin: 0;
padding: 0;
}
Now my bootstrap grids are working properly
I know this may be easy for most of you but I'm stuck with this issue.
I need to implement this design:
Layout Design
... and for now I've got this Current layout.The general structure is a row with col-3 and col-9, this col-9 has two rows, one for name and job title, and the other one for statistics in the page (col-3 for each of them). I need them to fill the height of his parent, but height property doesn't work. Which could be a clean solution? Thanks a lot.
Here is the structure, it's pretty simple tho.
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img ...>
<span>..</span>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">...</h2>
<h4 class="text-muted">...</h4>
</div>
</div>
<div class="row text-center">
<div class="col-md-3 stat">
<h3>...</h3>
<small>...</small>
</div>
...
</div>
</div>
Use position: relative on the parent and then position:absolute; bottom: 0; on the children.
Nice explanation there.
Flexbox would be my recommendation although CSS tables might be an option too.
Codepen Demo
Snippet Demo (view Fullscreen)
.user-image {
background: pink;
}
.user-image img {
display: block;
margin: auto;
}
.profile-header {
display: flex;
}
.right {
background: #c0ffee;
display: flex;
flex-direction: column;
}
.stats {
margin-top: auto;
}
.stat {
background: lightgrey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img src="http://www.fillmurray.com/300/200" alt="" />
<span>User Ranking</span>
</div>
<div class="col-md-9 right">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">User Name</h2>
<h4 class="text-muted">reference</h4>
</div>
</div>
<div class="row text-center stats">
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
</div>
</div>
I have three rows in my container. I'd like to apply one background across the bottom two rows. I don't want a background on the 1st row. I want to use one background ac I know I missing something, but can't figure out in the code where to edit it. My background only shows up in the first row of columns.
I don't want to apply a class to each .row that needs the background. The point is to specify the background once and have it apply to the two bottom rows.
Here's my bootply:
http://www.bootply.com/X5WsoQbuM1
Here's my HTML:
<div class="content-section-d">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>How many apples can you eat?</h2>
<p>
The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple. I.</p>
</div>
</div>
<h2>Join us to pick the apples:</h2>
<div class="row centered-text" id="backgroundazul">
<div class="col-md-4 col-xs-12">
<h3>4,000,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>1,500,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>150,000+</h3>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-12">
<h3>68,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>2,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>3 years</h3>
</div>
</div>
</div>
<!-- /.container -->
Here's my CSS:
#backgroundazul {
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
padding: 0 0 50px 0;
}
If you want the background for all row use a class and repeat row
/* CSS used here will be applied after bootstrap.css */
.backgroundazul {
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
padding: 0 0 50px 0;
}
<div class="container">
<div class="row">
<h2>Join us to access:</h2>
</div>
<div class="row centered-text backgroundazul " >
<hr class="section-heading-spacer">
<div class="col-md-4 col-xs-12">
<h3>4,000,000+</h3>
<p>Apples</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>1,500,000+</h3>
<p>Oranges</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>150,000+</h3>
<p>Mangos</p>
</div>
</div>
<div class="row centered-text backgroundazul " >
<div class="col-md-4 col-xs-12">
<h3>68,000+</h3>
<p>Bananas</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>2,000+</h3>
<p>Honeydew</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>3 years</h3>
<p>Blueberries</p>
</div>
</div>
Apply an id to you .container element and then apply the background to the .row elements.
<div id="backgroundazul" class="container">
<div class="row">
<!-- ... -->
</div>
<div class="row">
<!-- ... -->
</div>
</div>
#backgroundazul .row {
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
padding: 0 0 50px 0;
}
Updated Bootply. Note that you did not wrap your second row of data in a .row and will not have the background applied. I do not know if this was intentional or not.
The solution is simple - you just need to insert in your css code a single line, so the code will look like:
#backgroundazul{
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
background-size: cover;
padding: 0 0 50px 0;
}
And that's it :-)
I have this demo : https://jsfiddle.net/DTcHh/18752/ I want that image height is based on right side so that image always goes to the end of div. Any suggestion?
<div class="blog_list">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="blog_image">
<img src="img/property_img.png" />
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="blog_details">
<div class="blog_title">This comfortable apartment is located in the heart of Zurich</div>
<div class="blog_posted">POSTED ON: <span>JANUARY 24 2016 14:35h </span>IN <span>KREIS 1</span></div>
<p class="blog_more-details">
Wheather a single room studio or multi-room apartment, each has at least one own bathroom and a fully quipped kitches.
</p>
<div class="sold_by">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-12 ">
<div class="profile-image"><img src="img/profile.png" /></div>
</div>
<div class="col-md-10 col-sm-10 col-xs-12 no-padding-left">
<span class="property">ARTICLE WRITEN BY</span>
<span class="property_name">Janine Lindenmuller</span>
<div class="blog_read_more">
READ MORE
</div>
</div>
</div>
</div>
</div></div></div></div></div></div>
i think u need to remove bootstrap grid class and have to write some custom css with display:table-cell
for example
.img,.text {
display: table-cell;
vertical-align: top;
}
.img {
width:60%;
}
.text {
width:40%;
}
Also use low dimension image. Fiddle here
Set your image row like this:
JSFiddle
<div class="col-md-12 col-sm-12 col-xs-12">
I'm trying to get a simple grid-like webpage done where there are 8 DIVs spanning across 9 positions.
I've done the following for another part of the website using Bootstrap's grid system without running into any kind of issue (Not the actual content, just a mockup using Photoshop)
What I want to do is this:
Having in mind that when the site is viewed in a mobile device, the order of the elements must be more-or-less preserved. Also Bootstrap standard margins/paddings must be used
Ideally this would be fixed-height DIVs inside of which I'll put an image or some text, depending on which one. The double-height one will contain a picture
<div class="wrapper" id="mypage">
<section class="grid-container service">
<ul class="small-grid grid-col-3">
<li class="col-3">
<div id="subtitle">
SUBTITLE 1
</div>
</li>
<li class="col-3">
<div id="title">
TITLE
</div>
</li>
<li class="col-3">
<div id="subtitle">
SUBTITLE 2
</div>
</li>
<a href="">
<li class="col-3 img-dynamic-size" style="background-image: url('../1.jpg')">
</li>
</a>
<a href="">
<li class="col-3 img-dynamic-size" style="background-image: url('../2.jpg')">
</li>
</a>
Sample code of the 1st screen
Thank you, I can't figure out how to do it after thinking about it for some time...
Okay.. I think I'm following you, I've just drawn up some sample bootstrap code for you to see what I'm talking about. You can achieve this look by just stripping out relevant padding/margin and using the Bootstrap equal-height columns experiment
I have just stripped out all relevant margin and padding on the nested rows in the example but you can obviously play with these values only cancelling out or amending the vertical/horizontal margin/padding as required for your own use.
HTML
<div class="container">
<div class="row">
<div class="col-xs-4 border">
<div id="subtitle">SUBTITLE 1</div>
</div>
<div class="col-xs-4 border">
<div id="title">TITLE</div>
</div>
<div class="col-xs-4 border">
<div id="title">TITLE</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-xs-8 nopadding">
<div class="row nomargin">
<div class="col-xs-6 nomargin border">Some Content...</div>
<div class="col-xs-6 nomargin border">Some More Content...</div>
</div>
<div class="row nomargin">
<div class="col-xs-6 nomargin border">Some Content Below...</div>
<div class="col-xs-6 nomargin border">Some More Content Below...</div>
</div>
</div>
<div class="col-xs-4 border">Content matching height using the 'row-eq-height' class</div>
</div>
CSS
.nomargin {
margin:0;
}
.nopadding {
padding: 0;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.border {
border: 1px solid red;
min-height: 50px;
}
You can see a jsFiddle here