How do I place this input element in the bottom of his div parent and center it?
If you're looking to use just CSS for this one you could use position: absolute; on the input and position: relative; on the parent.
.parent {
position: relative;
}
input {
bottom: 0;
position: absolute;
width: 100%;
}
Alternatively you could use flexbox along the lines of:
.parent {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
parent{
position: relative;
}
child {
position: absolute;
bottom: 0;
}
Related
My DIV 1 is causing overlap with the CANVAS causing not draggable and not clickable the object inside of it.
How can I "hide" the area of DIV 1?
EDIT:
Here we are some code:
.DIV1 {
align-items: flex-end;
justify-content: flex-end;
flex-direction: row;
display: flex;
}
.PARENT of DIV1 {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
}
.CANVAS {
width: 100%;
height: 100%;
}
.PARENT of everything {
width: 100%;
height: 100%;
justify-content: center;
display: flex;
}
You could always use pointer-events to get the desired results.
.DIV1 {
pointer-events: none;
}
.DIV1 .child-that-need-pointer-events {
pointer-events: all;
}
Following code works as expected (block is centered) in Chrome and Firefox but in Safari child container is slightly off:
#container {
width: 100%;
background: yellow;
height: 20px;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
}
#content {
padding: 0px;
background: linen;
position: fixed;
}
My question would be - how to center "position: fixed" element in a "display: flexbox" parent in Safari?
Element with position: fixed (or position: absolute) won't behave in the same way in Safari as they do in Chrome/Firefox.
To center a flex item in Safari you need to use transform: translate
Updated codepen
Stack snippet
#container {
width: 100%;
background: yellow;
height: 20px;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
}
#content {
padding: 0px;
background: linen;
position: fixed;
left: 50%;
transform: translateX(-50%);
}
<div id="container">
<div id="content">THIS CONTENT IS NOT CENTERED IN SAFARI</div>
</div>
This question already has answers here:
How does flex-wrap work with align-self, align-items and align-content?
(2 answers)
Closed 5 years ago.
I am trying to align each child DIRECTLY after one another (vertically). Apparently align-items: flex-start doesn't do that completely because there is some auto-spacing between each child.
Below is a snippet of the result I get. The children align themselves along their parent's available space, which is not what I like to achieve. What I want is each child to align directly after its previous sibling (vertically, as in the snippet).
Thanks in advance!
EDIT: flex-flow: column wrap and align-content: flex-start both did the trick. I forgot, however, to add align-self: flex-end to the last child, which doesn't work when either of the two solutions above is applied.
* {
box-sizing: border-box;
}
#container {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
align-items: flex-start;
flex-flow: row wrap;
}
#container > div {
width: 100%;
margin: 10px;
border: 2px solid #ff0000;
}
#container > div:nth-child(1) { height: 5%; }
#container > div:nth-child(2) { height: 10%; }
#container > div:nth-child(3) { height: 20%; align-self: flex-end; }
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
You need to set align-content: flex-start on parent element because initial value is stretch.
stretch
If the combined size of the items along the cross axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the cross axis.
* {
box-sizing: border-box;
}
#container {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
align-items: flex-start;
flex-flow: row wrap;
align-content: flex-start;
}
#container > div {
width: 100%;
margin: 10px;
border: 2px solid #ff0000;
}
#container > div:nth-child(1) { height: 5%; }
#container > div:nth-child(2) { height: 10%; }
#container > div:nth-child(3) { height: 20%; }
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
Update: Another solution is to set flex-direction: column then you can use margin to position specific flex item.
* {
box-sizing: border-box;
}
#container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
}
#container > div {
width: calc(100% - 20px);
margin: 10px;
border: 2px solid #ff0000;
}
#container > div:nth-child(1) {
height: 5%;
}
#container > div:nth-child(2) {
height: 10%;
}
#container > div:nth-child(3) {
height: 20%;
margin-top: auto;
}
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
You need to set column for the flow
#container {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
align-items: flex-start;
flex-flow: column wrap;
}
#container > div:nth-child(3) { height: 20%; margin-top: auto; }
Updated:
Add margin top auto to the last child
https://jsfiddle.net/qghsgze5/2/
I'm trying to put an image on the right and left edges of the container's with the :before and :after.
But for some reason the containers totally .... up when I add a position absolute to the before and afters...
It has probably something to do with the standard bootstrap before and afters on the containers
Any idea how I can go around this?
.header,
.spotlight,
.main,
.footer {
>.container {
position: relative;
&:before {
content: " ";
position: absolute;
background: url("../img/right.png");
height: 100%;
display: block;
width: 6px;
right: -6px;
z-index: 999999;
top: 0;
}
&:after {
content: " ";
position: absolute;
background: url("../img/left.png");
height: 100%;
display: block;
width: 6px;
left: -6px;
z-index: 999999;
top: 0;
}
}
}
Example how the shadow(image) should look
I have the following markup
<button class="filter"><div class="radio"><div class="circle"></div></div> <span>Account Management</span></button>
and CSS
.filter {
font-size: 3vw;
text-align: left;
line-height: 1.6;
padding: 0px;
display: block;
height:auto;
overflow: hidden;
margin-bottom: 3px;
}
.filter span {
background: $leithyellow;
height: 100%;
overflow:auto;
display: block;
width: calc(100% - 60px);
float: left;
margin-left:10px;
padding-left:20px;
}
I cannot get the span to expand to 100% height of the button. Can this be done?
Heights apply only if the heights are defined properly for the ancestors. If you want the height to work, that's a tricky one. You can use one of my favourites, but you need to make sure it works in all the cases:
Give position: relative; to the parent.
Give position: absolute; to the element that needs full height and width.
Give the element, 0 values for all the sides.
Snippet
.parent {
position: relative;
width: 100px;
height: 50px;
background: red;
}
.parent .child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: skyblue;
}
<div class="parent">
<span class="child"></span>
</div>
In the above snippet, it is noted that this can also work, if you give:
.parent {
position: relative;
width: 100px;
height: 50px;
background: red;
}
.parent .child {
position: absolute;
width: 100%;
height: 100%;
background: skyblue;
}
<div class="parent">
<span class="child"></span>
</div>
One good part about this approach is, you don't need to use the dangerous calc:
.parent {
position: relative;
width: 150px;
height: 50px;
background: red;
}
.parent .child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 60px;
background: skyblue;
}
<div class="parent">
<span class="child"></span>
</div>
Note: On a related note, you can also have a look at this question and answer: Calc() alternative to fixed side bar with content?
Set display: flex to the parent
Set align-self: stretch for the child
This will stretch the height of the child div/button to fit the height of its parent without doing any trick.
By using position: absolute instead of flex-box, it won't be very nice eventually when you have more stuff added or re-arrange later on would be the nightmare.