I'm currently making an Electron app with the View powered by Vue.js
I currently have this (for testing purposes)
<template>
<div class="formWrapper">
<div class="inputGroup">
<span class="inputPrepend"><i class="fa fa-user"></i></span>
<input type="text" name="" value="">
</div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.formWrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.inputGroup {
align-self: center;
}
</style>
I end up with this result:
But I cannot seem to get the vertical centering to happen.
I have made sure all parent elements have a height: 100%; but still can't get it to go down, also why do I need to specify align-self if the parent flex container formWrapper has specified center for align-items and justify-content
Thanks.
You need to set body to height: 100vh, and formWrapper and all parent elements to height: 100%.
Live example:
body {
height: 100vh;
}
.formWrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
<div class="formWrapper">
<div class="inputGroup">
<span class="inputPrepend"><i class="fa fa-user"></i></span>
<input type="text" name="" value="">
</div>
</div>
There might be a smarter way to do this, but this is the best I could figure out.
Related
i am so confused about flexbox. i tried to use it to align some inputs in a simple form but it won't work the way i was intending. first i did this:
.container {
width: 40vw;
display: flex;
justify-content: space-between;
}
and in html:
<div class="container">
<form id="location">
<input type="text" placeholder="Location">
<input type="submit" value="Get the weather!">
</form>
</div>
i was hoping the justify-content: space-between would add space between the two inputs so they floating out to the outer bounds of the container. not happening. after reading this: justify-content property isn't working i tried the following:
.container {
width: 40vw;
display: flex;
justify-content: center;
}
.item {
flex-grow: 1;
}
and in html
<div class="container">
<form id="location">
<div class="item"><input type="text" placeholder="Location"></div>
<div class="item"><input type="submit" value="Get the weather!"></div>
</form>
</div>
now it looks even worse, because the divs are on top of each other, instead of next to each other. adding flex-direction: row doesn't change a thing. any advice?
#location{
width: 40vw;
display: flex;
justify-content: space-between;
}
<div class="container">
<form id="location">
<div class="item"><input type="text" placeholder="Location"></div>
<div class="item"><input type="submit" value="Get the weather!"></div>
</form>
</div>
You have made .container div as your flex-container, which has only one flex-item #location form: You must make #location form your flex container so that it has two child elements to space-between your 400px width container And it will work fine
To brush up some fundamentals about flex-box visit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
If i understands correctly you need to add flexbox to parent. Your location is parent of the input elements.
.container {
width: 40vw;
#location {
display: flex;
justify-content: space-between;
}
}
This is happening because you are targeting the wrong element.
Flex works on a parent of the element that you want to move.
You want to move elements of the form, so you should apply flex to your form tag instead of the div.container.
Because the form tag is also just a div, not an element to be moved.
Here is solution to your problem : https://codepen.io/Juka99/pen/OJRmPVN
Try use flex box for #location.
The parent of 2 inputs, are form not container.
This question already has answers here:
Flex / Grid layouts not working on button or fieldset elements
(3 answers)
Closed 2 years ago.
I've been trying to fix a css flow layout issue that appears only on Chrome.
I have a set of radio buttons with labels below that should be rendered in one row like this:
Chrome renders the buttons like this, however:
Here's a link to the js fiddle: https://jsfiddle.net/xk6zL91y/13/
.buttonsRow {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
border: none;
padding: 2rem 0rem;
}
.buttonContainer {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.buttonContainer > input {
width: auto;
}
<div class='columnLayout'>
<h2>HEADER</h2>
<fieldset id='dummy' class='buttonsRow'>
<div class='buttonContainer'>
<input type='radio' id='0' name='0' value='0' />
<label for='0'>0</label>
</div>
<div class='buttonContainer'>
<input type='radio' id='1' name='1' value='1' />
<label for='1'>1</label>
</div>
<div class='buttonContainer'>
<input type='radio' id='2' name='2' value='2' />
<label for='2'>2</label>
</div>
</fieldset>
</div>
Instand of fieldset put elements in div and it will works. For some reason it can't works when you use it in fieldset.
I am having difficulty in centering my login card. This is what it looks like as of now:
This is my code:
.html
<!-- ============================================================== -->
<!-- Simple four boxes Row -->
<!-- ============================================================== -->
<div fxLayout="row" fxLayoutWrap="wrap">
<!-- column -->
<div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
<mat-card>
<mat-card-content>
<!-- Row -->
<div fxLayout="row" fxLayoutWrap="wrap">
<!-- column -->
<div fxFlex.gt-sm="50" fxFlex.gt-xs="50" >
<div class="contains">
<div class="login-box">
<mat-card class="mat-elevation-z2" style="background-color: #26C6DA">
<mat-card-header style="background-color: teal; color: whitesmoke;">Login</mat-card-header>
<mat-card-content>
<form class="form my-2 my-lg-0" #loginForm="ngForm" (ngSubmit)="login()">
<mat-form-field>
<input type="text" class="text-white" placeholder="Username" name="username" [(ngModel)]="model.username" required matInput/>
</mat-form-field>
<mat-form-field>
<input type="password" placeholder="Password" name="password" [(ngModel)]="model.password" required matInput/>
</mat-form-field>
<button
type="submit"
mat-raised-button
class="btn btn-primary btn-sm btn-block"
[disabled]="!loginForm.valid"
>
Submit
</button>
</form>
</mat-card-content>
</mat-card>
</div>
</div>
<br/><br/>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<!-- column -->
</div>
and this is in the CSS
.contains {
text-align: center;
}
.login-box, .register-box {
display: inline-block;
margin: auto;
width: 75%;
}.login-page, .register-page {
background: #d2d6de;
}
I am trying to learn css and/or flexbox and bootsrap. I have tried using styles from research but I still couldn't get it to work.
Please help me align in to the center of white background. I really appreciate your help.
Aplly this css to the login card itself, i.e. to class="login-box".
.login-box{
margin: auto;
margin-top: 15%;
}
As explaination, margin auto sets automatic suiting margin to horicontal center your div and its content of course so your mat-card.
I like to use margin-top: 15% for the space to the top of the site, which looks usually quite well. It will look like the following:
I did it this way:
put the card inside a ,
then style it like this
.login-wrapper {
max-width: 75%;
width: 100%;
margin: 2em auto;
}
A wrapper div can be added to the login card. The wrapper div should be having display as flex. Assign width to 100vw and height to 100vh. Now to align it horizontally to center, use justify-contents: center and to vertically center it, use align-items: center. This will ensure that the content inside the wrapper is aligned to center.
.wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
I'm trying to make a media query to display an input below the other instead on your side using Flexbox. As you can see, with my current code, I'm getting this:
But if I change the flex-direction to column, the input width is not the original. This is the result:
This is the my HTML:
<div id="mc_embed_signup">
<form action="//eliasgarcia.us8.list-manage.com/subscribe/post?u=55cf7078733f0b62eb97733e3&id=ace40b1824" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">No te pierdas ningún artículo</label>
<div class="mc-wrapper">
<input type="email" value="" name="EMAIL" id="mce-EMAIL" placeholder="Correo electrónico" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_55cf7078733f0b62eb97733e3_ace40b1824" tabindex="1" value="">
</div>
<div>
<input type="submit" value="Suscríbete" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div>
<div class="mc-error">
</div>
</div>
</form>
</div>
And this is my CSS:
#mc_embed_signup {
label {
font-size: 2em;
font-weight: bold;
display: block;
text-align: center;
}
.mc-wrapper {
display: flex;
justify-content: space-between;
padding: 30px 0px 0px 0px;
}
#mce-EMAIL {
width: 100%;
margin: 0px 30px 0px 0px;
border: 2px solid $medium-grey;
border-radius: 4px;
text-indent: 20px;
}
.button {
margin: 0px auto;
cursor: pointer;
}
}
Why is this happening?
NOTE: I can't provide a Fiddle because this is an integration with MailChip, so it calls a JS Script and it's not working properly on Fiddle, I don't know why... But the script doesn't add any extra classes, only the ones above.
The flex children of a flex parent with flex-direction: row (the default for display: flex) will be equal heights. So since your left input is a direct child of .mc-wrapper, it's height will be equal to the height of the item beside it, and that will cause the input's height to grow since the flex child on the right is taller.
When you switch to a flex-direction: column you no longer have adjacent children in a row, and flexbox will not try to match the heights, so the input will be whatever height it is naturally.
Add
flex-flow: wrap;
This way, the height will remain as it.
display: flex; won't affect it
IMPORTANT
There is a style called align-items which by default is stretch. This is what it makes the elements width/height to match it's parents depending on flex-direction.
For anyone getting here, this might be useful: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You must change just "align-items".
I have this HTML case:
<section>
<hgroup>
<h1>Our Products</h1>
<h3>We build all kind of containers</h3>
<p>Lorem Ipsum is simply dummy text of the printing..</p>
</hgroup>
<button class="full-color pull-right">View All Products</button>
</section>
...and the CSS is like that:
section {
display: flex;
flex-direction: row;
justify-content: space-between;
}
Now input height is same as hgroup
But, if I add to the section:
align-items: baseline;
the input height is like you expected. You must avoid:
align-items: inherit/unset/stretch/initial/normal
You just need to add flex-flow: wrap-reverse to the flex parent and then everything goes well :)
example:
.parent {
display:flex;
flex-direction: column-reverse;
flex-flow: wrap-reverse;
}
Good Luck
I've noticed the 'input' element does not stretch or shrink to fill a flex container. Does anyone know why and if there is a solution?
My example below shows the container class c being used on Div elements (which stretch properly). And a single class e, used for the right-justified fixed-length end. The row of divs stretch and shrink as expected, the row of inputs do not.
div.c {
display: flex;
flex-direction: row;
align-content: stretch;
}
div.d {
flex: 1;
}
div.e {
display: inline-block;
flex: 0 0 30px;
background-color: red;
}
<div class='c'>
<div class='d'>A</div>
<div class='d'>B</div>
<div class='d'>C</div>
<div class='d'>D</div>
<div class='e'>E</div>
</div>
<div class='c'>
<input class='d'></input>
<input class='d'></input>
<input class='d'></input>
<input class='d'></input>
<div class='e'></div>
</div>
note i am aware of this link:
input / button elements not respecting flex-grow
However using min-width: 0; box-sizing: border-box; has no effect for me.
Because you specified div.d not input.d or div .d or just .d. Also, no need to close the input tag.
div.c {
display: flex;
flex-direction: row;
align-content: stretch;
}
.d {
flex: 1;
}
div.e {
display: inline-block;
flex: 0 0 30px;
background-color: red;
}
<div class='c'>
<div class='d'>A</div>
<div class='d'>B</div>
<div class='d'>C</div>
<div class='d'>D</div>
<div class='e'>E</div>
</div>
<div class='c'>
<input class='d'>
<input class='d'>
<input class='d'>
<input class='d'>
<div class='e'></div>
</div>