Currently I'm struggling with flexbox column. Checked so many websites, but still no solutions to be found on the internet for this problem.
The case:
On the right side of my viewport I've got a full-height flex-column, containing 2 elements (see headset icon and hangup button). I used flex-column to vertically align my elements.
The first element should be on the top right corner, the second element should be at the center right.
Since it's a flex-column I can't use align-self-center on the second element, because it will be centering on the x-axis instead of the y-axis.
I was wondering if this is even solvable with just flexbox or if I need to position this centered element a different way?
I'm using the bootstrap 4 flex classes to apply flexbox.
Code example: https://jsfiddle.net/mv1e7py0/18/
<div class="flex-container flex-column main-containere video-container">
<div class="communication-controls d-flex justify-content-between">
<div class="left-controls d-flex flex-column justify-content-between">
<button class="chat-toggle">
Chat
<div class="indicator bg-red"></div>
</button>
<button class="mic-toggle">
Mic
</button>
</div>
<div class="right-controls d-flex flex-column justify-content-between">
<button class="speaker-toggle">
Headset
</button>
<button class="dismiss-call red align-self-center">
<span>Hang up</span>
</button>
</div>
</div>
</div>
What I want it to look like:
#miranda-breekweg here are 2 quick solutions that I hope you'll find helpful:
In both cases we'll keep justify-content set to space-between.
the first thing that comes to mind is to simply set the height of the right column to 50% (+ half the height of that button you want to center)
.right-controls {
height: calc(50% + /half the height of your button/);
}
the second and probably the easiest solution is to simply add auto margins (top and bottom) to the targeted button. This way, you don't have to worry about calculations:
.dismiss-call {
margin: auto 0;
}
Fiddle:
https://jsfiddle.net/mv1e7py0/39/
Related
I have a 3 columns design where the first column has a fixed width of 630px, the middle column should take all available space and the third column has a fixed width of 200px.
I set it up using bootstrap Flex, with flex-fill in the middle column. It looks all dandy but when I start filling up the middle section, it grows eating the space of the last one.
The code, simplified, looks like this:
//body css: height: 100%, oveflow: hidden
<div class="mainContainer d-flex flex-row w-100"> //css: height 100vh,
<div class="leftColumn d-flex">
//inner content ar boxes with fixed width leaning to the 600px
//this part looks perfect
</div>
<div class="MainArea flex-fill d-flex flex-column">
<div class="MainAreaUpperRowOfCards flex-fill d-flex flex-row flex-wrap">
// here I add cards with fixed size, they are lied down
// in a row, and they wrap nicelly.
// But when they wrap this section starts to grow eating the
// third colum's space
</div>
</div class="MainAreaLowerRow d-flex flex-row justify-content-center">
//css: height: 250px, margin-bottom: -60px
//here are some cards that only show the upper part, hence the -60px
</div>
<div>
<div class="RightColumn d-flex flex-column"> //css: width 220px; background and magins..
//here some cards with players information
//this is the column being eaten.
</div>
</div>
This is what it looks like at the beginning and after adding some cards:
So I have two questions:
How do I fix the width of the right-most column? (green arrow in the picture)
How do I remove the space on the wrapping of the cards? (red arrow in the picture)
I added an animation for convenience:
Change width: 220px; to min-width: 220px;.
It's hard to help you without a live demo. Try to remove flex classes one by one and see if any of these classes are causing this space.
I am using TailwindCSS and have a nested HTML structure like so:
<div class="my-4">
<div class="my-4">
<!-- Some Content -->
</div>
</div>
What I don't understand is why the inner div is placed in such a way that its border aligns with the border of the outer div and the margins which I applied overlap. However, I noticed that when I add a border around the outer div, the margins suddenly behave how i would expect: the outer div contains the elements including margins.
Here is a jsfiddle to illustrate my point: https://jsfiddle.net/1vptz5fc/
How can I get the divs to behave like they do with borders, just without adding a border?
Is would say you should use the padding py that will fix it , look:
.test {
border: 1px solid red;
}
<script src="https://cdn.tailwindcss.com"></script>
<div class=" my-4 bg-green-500 py-1" id="parent">
<div class="my-4">
with py
</div>
<div class="my-4">
Other Content
</div>
</div>
<button type="button" onclick="document.getElementById('parent').style.border = 'none';">
Click Me
</button>
<div class="test my-4 bg-green-500" id="parent">
<div class="my-4">
with border
</div>
<div class="my-4">
Other Content
</div>
</div>
<button type="button" onclick="document.getElementById('parent').style.border = 'none';">
Click Me
</button>
It seems like it's the default behaviour if there's no element between parent and child.
Margin collapsing occurs in three basic cases:
Adjacent siblings
No content separating parent and descendants
Empty blocks
There's a stackoverflow thread that might help you:
How to disable margin-collapsing?
More information on margin collapse:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
You can probably add display: inline-block; to get the expected results regarding the margin but you will have to adjust with other styles.
How to get this aligned as i was not able to align
<div class="d-flex justify-content-between">
<span>Total Items: #Model.Count </span>
<div class="d-flex flex-row align-items-center">
<span class="text-black-50">Sort by:</span>
<div class="price ml-2">
<span class="mr-1">price</span>
<i class="fa fa-angle-down"></i>
</div>
</div>
</div>
If you want a quick solution, assign the elements a specific percent width and set flex-grow: 0;.
However, flexbox is probably not the right solution to your problem in the first place, since you can only align items in one direction.
If you need your columns to be aligned, try CSS Grid Layout, which is similar to flexbox but allows you to use both rows AND columns to align your items.
(I know some people have an opposition to W3schools, but their CSS Grid tutorial is helpful for getting started)
(There's a similar question here, but I am too much of a noob yet to translate this onto Bootstrap)
What I want is to have an area on the page between "header" and "footer" (let's call it "body"), which may have a
some fixed section, like BS4 "row", put on the top,
some variable content, consisting of several BS "rows", AND aligned
vertically on the middle of what is left of the body (or of the body
itself)
Can it be done in a responsive manner, and without JS (using only Bootstrap 4 CSS) ?
I've tried some stuff:
<body>
<div id="root" class="container">
<div style="height: 100%;">
<div><h1>HEADER</h1></div><hr>
<div style="min-height: 60%;">
<div class="h100">
<div>some badge</div><br>
<div>
<div class="row justify-content-between">
<div class="col-3">Item #2</div>
<div class="col-3 text-right">
<div>some stats</div>
</div>
</div>
<div class="">
<div class="row justify-content-center">
<div class="col text-center"><h3>THIS SHOULD BE IN THE MIDDLE OF A BLANK SPACE</h3></div>
</div>
<div class="row justify-content-center">
<div class="col-4 text-right"><button class="btn btn-link">it's just below and left</button></div>
<div class="col-4 text-left"><button class="btn btn-link">it's just below and right</button></div>
</div>
</div>
</div>
</div>
</div><hr>
<div class="footer">FOOTER</div>
</div>
</div>
</body>
(https://jsfiddle.net/f93mhdbr/) but as long as I add "d-flex" onto "body" div, or any of it's children, all the previous "row"/"col"-based layout turns into horrible mess ! (see https://jsfiddle.net/f93mhdbr/2/)
I suspect this is due to Bootstrap itself using Flexbox for column and rows,
but maybe any solution exists?
I will try to work on improving this question, I know it's very poor, but I right now I am too much in a despair to work it all out...
UPDATE: added links to whatever I was trying to reproduce
You need to use the flex property to achieve it. Using flex-grow here will make your variable element to grow and fill the remaining height of its container, if there is any. Then all is left to do is set align-items-center on the element to align it on the x-axis.
Here is the Fiddle
Please note I added background-colors so it's easier for you to see how much space each element uses, or use an inspector.
You can set any fixed height for the header, footer and content-top. The height of content and content-remaining will adapt responsively, because they have the property flex-grow: 1 set on them. Here's an example.
To explain further, because the container wrap has a min-height: 100-vh, the content element will grow to fill the entire viewport relative to the rest of the flexible items inside the wrap container. The same logic applies to content-remaining, the only difference is that its parent is the content element and not the wrap container.
As last, I added the IE fix for the min-height property on flex-items. It's a known bug and a quick and reliable fix is to wrap it in a separate flex container.
Hopefully this was helpful to you, if you have any questions left please comment on this answer.
For some reason I don't understand the 3 column grid system is exceeding my 100% width.
code
<div class="row" style="border: 1px solid red">
<div class="add_promo col-12 col-md-offset-0 col-xs-12 col-xs-offset-0">
<input type="text" placeholder="ingresar código..." class=" col-md-6 col-md-offset-0 col-xs-6 col-xs-offset-0" />
<button type="" class="btn btn-default btn-lg btn-success col-3 col-md-offset-0 col-xs-3 col-xs-offset-0" >Enviar</button>
<button type="" class="btn btn-default btn-lg btn-danger col-md-3 col-md-offset-0 col-xs-3 col-xs-offset-0">Cancelar</button>
</div>
</div>
Fiddle: https://jsfiddle.net/DTcHh/12328/
Thanks
In bootstrap, each column element has padding-left and padding-right which is used to create the 'gutter' in between the columns. However, this means that there is a gutter being created to the left of the first column, and to the right of the last column.. Because people often have nested rows, which almost always want the outer edges to be flush with the parent container, the .row class in bootstrap has negative margin-left and margin-right properties, equal to the column gutter width. This pulls the outer sides of the row outwards, allowing the outer gutters to sit outside of the container element.
This is what you are experiencing here... Your .row element is pulling the content just outside of the parent element. In order to solve this, bootstrap also supplies another class, built to serve as the main outer container for housing the grid system, and meant to hold .row elements.
It is aptly named .container
You can read more here:
http://getbootstrap.com/css/#overview-container
Here is an updated version of your Fiddle, to demonstrate:
https://jsfiddle.net/DTcHh/12329/
As a side note, if you were to not want that outer gutter even on the main parent element, you could forgo the .container element, and simply change the <div class="row" ... to be <div class="clearfix" ...
.row and .clearfix perform mostly the same function (holding floated elements - columns, in the case of rows - without them being removed from page flow), the primary difference of .row being the negative outer margins.