<div class="checkbox-password">
<div>
<mat-checkbox class="example-margin">Remember me</mat-checkbox>
</div>
<div>
<a routerLink="/forgotPassword" class="createAccount"
routerLinkActive="active"> Forgot Password? </a>
</div>
</div>
Using the above code I get remember me and forgotPassword next to each other, I need help in giving space between them, I have tried the following CSS code. Thanks in advance.
CSS:
.checkbox-password {
padding: 5px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between
}
Try giving a class to the div, and applying the styles to the div.
For example:
<div class="checkbox-password">
<div class="remember-me">
<mat-checkbox class="example-margin">Remember me</mat-checkbox>
</div>
<div>
<a routerLink="/forgotPassword" class="createAccount"
routerLinkActive="active"> Forgot Password? </a>
</div>
And in the css
.remember-me {
margin-bottom: 10px;
}
Related
As you will tell from this question I'm still new with Flexbox as well as with SASS. I have an MVC app where I'm trying to align the header login information depending on if they are authenticated or not.
What I'm trying to accomplish is to have my header with a logo to the left and some login/register buttons flush to the bottom in a single row if you are not authenticated or their username and logoff/account info stacked on top of each other if they are authenticated.
I'm trying to use flexbox to accomplish these. The idea is I would have an overall parent container "header_account-info", the logo in the "header__logo" child container, and other login parts in either "header_account-user" or "header-account-login". For testing I'm using the "header-account-login" container.
With the code below I can not get the "header-account-login" container to have a background color (using for testing) nor can I get it to align to the bottom.
I put this in Code Pen and see the same results.
https://codepen.io/anon/pen/WgGxQL
Why would I not see a background color in my "header-account-login" container and I thought I had the correct setting to make the buttons go to the end (bottom) of the container?
HTML
<div class="header">
<div class="header__logo">
<img src="~/images/logo.png" class="header-logo" />
</div>
<div class="header_account-info">
<div class="header-account-login">
<a href="#Url.Action("Register", "Account")" id="registerLink" class="btn btn-outline-secondary">
<i class="far fa-user-plus"></i> Register
</a>
<a href="#Url.Action("Login", "Account")" id="loginLink" class="btn btn-outline-secondary">
<i class="fas fa-sign-in-alt"></i> Log In
</a>
</div>
</div>
</div>
SASS
.header {
display: flex;
padding: 3px;
&__logo {
/*flex: 1;*/
margin-right: auto;
background-color: aqua;
height: 100px; /*TESTING*/
}
&__account-info {
display: flex;
background-color: aquamarine;
}
&__account-user {
background-color: blanchedalmond;
}
&__acount-login {
align-items: flex-end;
background-color: aquamarine;
}
}
Why would I not see a background color in my "header-account-login" container and I thought I had the correct setting to make the buttons go to the end (bottom) of the container?
Because you have typos in your HTML/CSS - in some cases you are using a single underscore and in others two. Also "account" is incorrectly spelled in some places.
As for the lauot, I think this will suffice:
.header {
display: flex;
padding: 3px;
justify-content: space-between;
}
.header__logo {
/*flex: 1;*/
margin-right: auto;
background-color: aqua;
height: 100px;
}
.header__account-info {
display: flex;
align-items: flex-end;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="header">
<div class="header__logo">
<img src="http://www.fillmurray.com/g/140/100" class="header-logo" />
</div>
<div class="header__account-info">
<div class="header__account-login">
<a href="#Url.Action(" Register ", "Account ")" id="registerLink" class="btn btn-outline-secondary">
<i class="far fa-user-plus"></i> Register
</a>
<a href="#Url.Action(" Login ", "Account ")" id="loginLink" class="btn btn-outline-secondary">
<i class="fas fa-sign-in-alt"></i> Log In
</a>
</div>
</div>
</div>
Here is one way to make it work:
.header-account-info {
position: relative;
}
.header-account-login {
background-color: red;
position: absolute;
bottom: 0px;
right: 0px;
width: 158px;
}
The way you are trying to call your class (i.e. "&__acount-login") is wrong - just give yourself the full class name like my example.
I have currently tried to set the vertical-align CSS to middle but it does not output as I would like.. thanks for feedback
<template>
<!-- block to be tested -->
<div data-v-5a5e3060="" class="layout row">
<div data-v-5a5e3060="" class="flex xs12">
<div data-v-5a5e3060="" class="text-xs-center">
<button data-v-5a5e3060="" type="button" class="btn btn--round">
<div class="btn__content">Clear</div>
</button>
<button data-v-5a5e3060="" type="submit" class="btn btn--round">
<div class="btn__content">LOGIN!<i data-v-5a5e3060="" aria-hidden="true" class="icon icon--right material-icons">lock_open</i></div>
</button>
<span data-v-5a5e3060="">Link to Forgot password?</span>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
span {
float: right;
vertical-align: middle;
}
</style>
Just use flex on the container element of the buttons and span, for instance:
.action-container {
display: flex;
align-items: center;
}
Also if using Vuetify, have a look here, there are inbuilt flex directives, so you can apply them directly on the container element without writing any additional CSS. For example, there's an align-center prop you can use.
Try to apply the following CSS to the span tag:
span {
position: absolute;
right: 0;
top: 0;
height: 100%;
display: flex;
align-items: center;
}
If it doesn't work add position: relative to the container div
I have the following HTML code:
<span class="container">
<span id="item1" class="item">
<button class="removeitem"></button>
<span class="text"></span>
</span>
<span id="item2" class="item">
<button class="removeitem"></button>
<span class="text"></span>
</span>
<span id="item3" class="item">
<button class="removeitem"></button>
<span class="text"></span>
</span>
</span>
Imagine the #item3 extends .container, but overflow is hidden. How can I achieve that the elements inside are still visible and will continue in the following row?
I tried the following (in Sass-syntax):
.container
display: flex
justify-content: flex-start
flex-wrap: wrap
But #item3 will just appear on the next row.
I tried making everything display: inline, but then I can not assign any height-properties.
I attached an image of what I want to achieve.
This is what the layout should look like. #item3 continues in the next row:
What you are asking is not technically possible unless you use the natural wrapping of text as in this example:
.item {
display: inline;
background: yellow;
margin-right: 5px;
border: 2px solid green;
line-height: 2;
}
Fiddle:
https://jsfiddle.net/658tdurx/1/
This bootstrap accordion is built using AngularJS: http://jsfiddle.net/Mrbaseball34/c6Lw2/
<div class="accordion-group ng-scope" ng-repeat="program in programs">
<div class="accordion-inner">
<div class="acc_label ng-binding">The Certified Insurance Counselors Program (CIC)</div>
<div class="pull-right select_links">
<a ng-click="reselect($index)" class="ng-binding">Select All</a> |
<a ng-disabled="!select_action($index)" ng-click="program.expand=!program.expand" class="ng-binding">Expand</a>
</div>
</div>
<div ng-repeat="topic in program.topics" collapse="!program.expand && !topic.checked" class="ng-scope collapse" style="height: 0px;">
<div class="accordion-inner">
<label class="checkbox"><input type="checkbox" value="CIC Agency Management" ng-checked="topic.checked" ng-model="topic.checked" class="ng-pristine ng-valid"><span class="ng-binding">CIC Agency Management</span></label>
</div>
</div>
<div ng-repeat="topic in program.topics" collapse="!program.expand && !topic.checked" class="ng-scope collapse" style="height: 0px;">
<div class="accordion-inner">
<label class="checkbox"><input type="checkbox" value="CIC Commercial Casualty" ng-checked="topic.checked" ng-model="topic.checked" class="ng-pristine ng-valid"><span class="ng-binding">CIC Commercial Casualty</span></label>
</div>
</div>
</div>
But I cannot get the "Select All | Expand" links aligned in the middle of the container.
Can any CSS gurus help out?
Don't worry about the "Select All | Expand" functionality. I just need the alignment corrected.
Also, I'm sorry that the CSS files have to be online vs. embedded in the fiddle.
I don't think it was made clear, I wanted the "Select All | Expand" links centered vertically like this:
After changes recommended by #Mohsen:
When expanded, it should stay near the group title.
horizontal align:
remove pull-right class and set text-align:center to .select_links:
DEMO
HTML
<div class="select_links"> <!-- pull-right remove -->
<a ng-click="reselect($index)" class="ng-binding">Select All</a>
|
<a ng-disabled="!select_action($index)" ng-click="program.expand=!program.expand" class="ng-binding">Expand</a>
</div>
CSS
.select_links {
position: relative;
line-height: 100%;
vertical-align: middle;
text-align: center; /* added */
}
update - vertical align
need to set position:relative on your accordion-group, for doing that you can add this class to that tag like this:
<div class="accordion-group ng-scope relative" <!-- relative added -->
ng-repeat="program in programs">
...
</div>
bring back pull-right and add vertical (or something else) class to your links container like this:
<div class="pull-right select_links vertical"> <!-- vertical added -->
...
</div>
then add these styles to your CSS:
.relative{
position:relative;
}
.vertical{
position: absolute;
right: 5px;
top: 50%;
margin-top: -3px; /* you can change it if is not enough */
}
jsFiddle is HERE
note: you can add this styles to your bootstrap classes but I think this is not a good way.
edit: set relative class to the title container: DEMO
<div class="accordion-inner relative">...</div>
try this
.select_links {
position: relative;
line-height: 100%;
vertical-align: middle;
margin: 0 auto;
width: 70%;
}
I have a varying number of inline-block divs that I want to collectively take up 100% of their parent. Can this be done without JavaScript? The only way I can think of is with a table but it's of course bad practice to use a table solely for layout purposes.
|----------------------|
|{ div 1 }{ div 2 }|
or
|{div 1}{div 2}{div 3}|
|----------------------|
I have also tried { display:block; float:left; } but it doesn't seem to make a difference.
You can use display:table-cell on your inner divs to do this. For the browser to make the inner divs behave like table cells, it also needs two layers of containing elements: one to acts as the table, and another to act as the table-row.
For a structure like this:
<div class="outer">
<div class="middle">
<div class="inner">Item 1</div>
<div class="inner">Item 2</div>
<div class="inner">Item 3</div>
<div class="inner">Item 4</div>
</div>
</div>
Use this CSS:
div.outer {display:table;}
div.middle {display:table-row;}
div.inner {display:table-cell;}
A nice structure to use is a UL wrapped in a DIV: the DIV acts as a table, the UL as a row, and the LI's as table-cells.
This technique is not well supported in older browsers - for anything older than IE8, you're out of luck entirely.
Let me know if you need more sample code than that!
You can utilize css3 benefits here. I was also facing this issue now i have fixed that using below example code
.parent-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
-webkit-justify-content: space-around;
flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
}
.child-item {
margin: 5px;
text-align: center;
padding: 10px;
background-color: red;
color: #fff;
}
<ul class="parent-container">
<li class="child-item">1</li>
<li class="child-item">2</li>
<li class="child-item">3</li>
<li class="child-item">4</li>
<li class="child-item">5</li>
<li class="child-item">6</li>
<li class="child-item">7</li>
</ul>
Thanks & Regards,
Lingeshram
The accepted answer missed an important CSS property which is necessary to work:
table-layout: fixed;
This is the correct answer:
HTML:
<div class="outer">
<div class="middle">
<div class="inner">Item 1</div>
<div class="inner">Item 2</div>
<div class="inner">Item 3</div>
<div class="inner">Item 4</div>
</div>
</div>
</div>
CSS:
div.outer {display:table; table-layout: fixed;}
div.middle {display:table-row;}
div.inner {display:table-cell;}
I'd like to expound on #lingeshram's answer. Flexboxes have come so far that I think it's really the way to do it now. If you have to support old browsers, be sure to check caniuse first.
.container {
display: flex; /* or inline-flex */
}
.col {
flex-grow: 1;
border: 1px solid #000;
}
.col2x {
flex-grow: 2;
border: 1px solid #000;
}
Evenly split three children
<div class='container'>
<span class='col'>Inner 1</span>
<span class='col'>Inner 2</span>
<span class='col'>Inner 3</span>
</div>
<br>
Evenly split two children
<div class='container'>
<span class='col'>Inner 1</span>
<span class='col'>Inner 2</span>
</div>
<br>
Split three children, but the middle is twice the size of the others
<div class='container'>
<span class='col'>Inner 1</span>
<span class='col2x'>Inner 2</span>
<span class='col'>Inner 3</span>
</div>
Here is a pretty good guide to the different ways you can use flexbox.