I want to apply a vertical divider in my view.
I have done that: (see code snippet in full expanded view)
.grid-divider {
position: relative;
padding: 0;
}
.grid-divider>[class*='col-'] {
position: static;
}
.grid-divider>[class*='col-md-4']:nth-child(n+1):before {
content: "";
border-left: 1px solid #DDD;
position: absolute;
top: 0;
bottom: 0;
}
.col-padding {
padding: 0 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row grid-divider">
<div class="col-md-4 text-center">
<h1>Prévisionnel</h1>
<div class="form-group">
<label class="control-label col-md-3 control-label-tv" for="field_budgetCoutMateriaux">Budget Cout Materiaux</label>
<div class="col-md-3">
<input type="number" class="form-control" name="budgetCoutMateriaux" id="field_budgetCoutMateriaux" ng-model="vm.chantier.budgetCoutMateriaux" />
</div>
</div>
</div>
<div class="col-md-4 text-center">
<h1>Prévisionnel</h1>
<div class="form-group">
<label class="control-label col-md-3 control-label-tv" for="field_budgetCoutMateriaux">Budget Cout Materiaux</label>
<div class="col-md-3">
<input type="number" class="form-control" name="budgetCoutMateriaux" id="field_budgetCoutMateriaux" ng-model="vm.chantier.budgetCoutMateriaux" />
</div>
</div>
</div>
<div class="col-md-4 text-center">
<h1>Prévisionnel</h1>
<div class="form-group">
<label class="control-label col-md-3 control-label-tv" for="field_budgetCoutMateriaux">Budget Cout Materiaux</label>
<div class="col-md-3">
<input type="number" class="form-control" name="budgetCoutMateriaux" id="field_budgetCoutMateriaux" ng-model="vm.chantier.budgetCoutMateriaux" />
</div>
</div>
</div>
</div>
But I am getting that :
I don't know how to place the divider in a better way.
Is there a way to well separate the three parts?
Thanks.
Follow this css:
.grid-divider>[class*='col-'] {
position: relative;
}
.grid-divider>[class*='col-md-4']:nth-child(n+1):before {
content: "";
border-left: 1px solid #DDD;
position: absolute;
top: 0;
bottom: 0;
right: 0;
}
Related
In the default CSS code for radio buttonn, it is gray when it is not selected and is blue when it is selected:
I however need it to be black in both states. Thus, I have overriden SCSS for radio buttons. Here comes my code:
HTML:
<div class="col-md-2 col-sm-6">
<div class="row">
<div class="col-md-12">
<label>Earlier experience in this field?</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="radio">
<label><input type="radio" formControlName="earlierExperience" value="1">Yes</label>
</div>
</div>
<div class="col-md-6">
<div class="radio">
<label><input type="radio" formControlName="earlierExperience" value="0">No</label>
</div>
</div>
</div>
</div>
CSS:
input[type='radio']:after {
width: 15px;
height: 15px;
border-radius: 50%;
top: -2px;
left: -1px;
position: relative;
background-color:white;
display: inline-block;
visibility: visible;
border: 1px solid black;
}
input[type='radio']:checked:after {
border: 4.5px solid black;
}
The problem with this code is that the small circle in the middle of the checked button is not shown anymore:
Can you help me with this?
You can use the new property accent-color which sets the colour for the input. Broswer support is limited to Chrome and Firefox at the moment so you will create fallbacks for other browsers.
input {accent-color: black;}
input {
accent-color: black;
}
<div class="col-md-2 col-sm-6">
<div class="row">
<div class="col-md-12">
<label>Earlier experience in this field?</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="radio">
<label><input type="radio" formControlName="earlierExperience" value="1">Yes</label>
</div>
</div>
<div class="col-md-6">
<div class="radio">
<label><input type="radio" formControlName="earlierExperience" value="0">No</label>
</div>
</div>
</div>
</div>
For solution, you can use property filter in css.
input[type='radio'] {
filter: grayscale(100%) contrast(200%);
}
input[type='radio'] {
filter: grayscale(100%) contrast(200%);
}
<div class="col-md-2 col-sm-6">
<div class="row">
<div class="col-md-12">
<label>Earlier experience in this field?</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="radio">
<label>
<input
type="radio"
formControlName="earlierExperience"
value="1"
/>Yes
</label>
</div>
</div>
<div class="col-md-6">
<div class="radio">
<label>
<input
type="radio"
formControlName="earlierExperience"
value="0"
/>No
</label>
</div>
</div>
</div>
</div>
Custom solution with box-shadow, pseudo-element and input binding to label
.radio {
margin-left: 0.125em;
}
.radio label {
position: relative;
padding-left: 1.5em;
cursor: pointer;
}
.radio label::after {
content: '';
width: 1em;
height: 1em;
position: absolute;
top: 0;
left: 0.25em;
border-radius: 50%;
box-shadow: inset 0 0 0 2px black;
}
input[type='radio'] {
position: absolute;
visibility: hidden;
}
input[type='radio']:checked~label::after {
box-shadow: inset 0 0 0 2px black, inset 0 0 0 4px white, inset 0 0 0 10px rgb(0, 0, 0);
}
<div class="col-md-2 col-sm-6">
<div class="row">
<div class="col-md-12">
<label>Earlier experience in this field?</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="radio">
<input id="yes" type="radio" name="radio" formControlName="earlierExperience" value="1" />
<label for="yes"> Yes </label>
</div>
</div>
<div class="col-md-6">
<div class="radio">
<input id="no" type="radio" name="radio" formControlName="earlierExperience" value="0" />
<label for="no"> No </label>
</div>
</div>
</div>
</div>
I am making a login page and a signup page for my program and what is supposed to happen is that they are both supposed to be stacked on top of each other but one of them is not supposed to be displayed. The problem that I am having is that they are unable to stack on top of each other. I have seen someone who said try to use position: absoloute but I tried that and the format of the whole website messed up so perhaps not that method. I am using boostrap classes with some of this if that helps at all.
<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<h1 class="burning_text">WELCOME!</h1>
<div id="main-menu" class="container-fluid">
<div class="row">
<div class="col"></div>
<div class="col" id="outer_container">
<div id="main_container">
<form id="login_form" class="form-horizontal bg-secondary animate__animated" action="javascript:void(0);">
<div class="row">
<div class="row form-group" style="position:relative; left:10%;">
<label class="temporary control-label">Name:</label>
<input id="login_name_input" class="form-control" type = "text" required maxlength="40" placeholder="username">
</div>
<div class="row form-group" style="position: relative; left: 10%">
<label class="temporary control-label">Password:</label>
<input id="login_password_input" class="form-control" type = "password" required maxlength="40" placeholder="password">
<button id="login_alter_button" type="button" style="position: relative; bottom: 35%; left: 100%; height: 40px;"><i class="fas fa-eye-slash"></i></button>
</div>
<div class="row form-group">
<button class="btn btn-info" id="login_submit_button" style="margin: 40px; position: relative; top: 50%; right:130%;">login <i class="fas fa-door-open" style="font-size: 48px;"></i></button>
</div>
<div class="row">
<button class="btn btn-primary" id="switch_signup_button" type="button" style="position: relative; left: 207%; font-size: 15px; height: 30px;">switch to signup <i class="fas fa-sign-in-alt"></i></button>
</div>
</div>
</form>
<form id="signup_form" class="form-horizontal bg-primary animate__animated" action="javascript:void(0);">
<div class="row">
<div class="row form-group" style="position:relative; left:10%;">
<label class="temporary control-label">Name:</label>
<input id="signup_name_input" class="form-control" type = "text" required maxlength="40" placeholder="username">
</div>
<div class="row form-group" style="position: relative; left: 7%">
<div class="col-10">
<label class="temporary control-label">Password:</label>
<input id="signup_password_input" class="form-control" type = "password" required maxlength="40" placeholder="password">
</div>
<div class="col-2">
<button id="signup_alter_button" type="button" style="position: relative; top: 45%; right: 90%; padding: 5px;"><i class="fas fa-eye-slash"></i></button>
</div>
</div>
<div class="row form-group">
<button class="btn btn-info" id="signup_submit_button" style="margin: 40px">signup <i class="fa fa-user-plus" style="font-size:48px;"></i></button>
</div>
<div class="row">
<button class="btn btn-secondary" id="switch_login_button" type="button" style="position: relative; left: 93%; top: 80%; font-size: 15px; height: 30px;">switch to login <i class="fas fa-user"></i></button>
</div>
</div>
</form>
</div>
</div>
<div class="col"></div>
</div>
</div>
Whats currently happening is that they are being stacked on top of each other in a display: block kind of fashion.
Here are the CSS classes I am using (the ones I made myself and the ones that are probably useful in this situation):
#login_form
{
left: 100%;
font-size: large;
font-family: Rockwell;
display: block;
}
#signup_form
{
font-size: large;
font-family: Rockwell;
display: block;
position: relative;
z-index: -1;
bottom: 50%;
}
I don't have the complete CSS but they stack for me. If my answer doesn't work please let me know.
Edited
a different solution is using display: none; to make the second form disappear and change it back to display:block; again using javaScript when switching between forms I think that's the best solution.
Also please remember that absolute positioned elements are removed from the flow
.main_container {
position: relative;
}
#login_form {
font-size: large;
font-family: Rockwell;
display: block;
position: absolute;
width: 100%;
left: 0;
top: 0;
}
#signup_form {
font-size: large;
font-family: Rockwell;
display: block;
position: absolute;
z-index: -1;
width: 100%;
left: 0;
}
I have several containers with radio buttons. I want a container of a selected radio button to become selected:
input[type="radio"]:checked+.container {
border: 5px solid red;
}
<div class="container">
<input class="btn-radio" type="radio" value="123" name="rd" />
</div>
<div class="container">
<input class="btn-radio" type="radio" value="1234" name="rd" />
</div>
<div class="container">
<input class="btn-radio" type="radio" value="12345" name="rd" />
</div>
Why doesn't it work?
Here is the working code which I commented above
input[type="radio"]:checked + .border {
border: 5px solid red;
}
.container {
position: relative;
max-width: 100px;
margin: 10px;
}
input {
position: relative;
z-index: 100;
}
.border {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
<div class="container">
<input class="btn-radio" type="radio" value="123" name="rd" />Input 1
<div class="border"></div>
</div>
<div class="container">
<input class="btn-radio" type="radio" value="1234" name="rd" />Input 2
<div class="border"></div>
</div>
<div class="container">
<input class="btn-radio" type="radio" value="12345" name="rd" /> Input 3
<div class="border"></div>
</div>
Here is a solution without new elements, you can use the ::before of the input to make the border on the container. Good Luck!
.container {
position: relative;
margin-bottom: 2em;
}
input[type="radio"]:checked::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 5px solid red;
}
<div class="container">
<p>container 123</p>
<input class="btn-radio" type="radio" value="123" name="rd" />
</div>
<div class="container">
<p>container 1234</p>
<input class="btn-radio" type="radio" value="1234" name="rd" />
</div>
<div class="container">
<p>container 12345</p>
<input class="btn-radio" type="radio" value="12345" name="rd" />
</div>
Use id insted of that. Give them individual id.
#id:checked + .container {
border: 5px solid red;;
}
For better result use the id for container as well.
I am using bootstrap 3. Here is my code
.divisionify {
margin-bottom: 5px;
position: relative;
border-top: 2px solid gray;
}
.form-title {
position: relative;
color: #7cc0e1;
font-size: 20px;
text-align: left;
margin-top: 10px;
margin-bottom: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<div class="form-title">Apply for Plan</div>
<div class="divisionify"></div>
<form class="form-horizontal">
<div class="form-group">
<label for="institution-type" class="control-label">Type of institution</label>
<div class="">
<input type="email" class="form-control" id="institution-type" placeholder="Type of institution">
</div>
</div>
<div class="form-group">
<label for="name" class="control-label">Name</label>
<div class="">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</div>
</form>
</div>
</div>
And it produces this layout
You can see the title 'Apply for Plan' does not align with the form controls on the left hand side.
it is because of these settings by Bootstrap
margin-left: -15px;
margin-right: -15px;
I can fix this issue by adding them too to my css class .form-title and .divisionify
However is there a better way to fix the alignment?
This is my desired layout
Why not just override the Bootstrap styles with your own?
Add this to your code:
.form-group {
margin-right: 0 !important;
margin-left: 0 !important;
}
Give a padding of the left and right of the .form-title and .divisionify
.divisionify {
margin-left: -15px;
margin-right: -15px;
}
.form-title{
margin-left: -15px;
margin-right: -15px;
}
Check live
The problem with using the !important thing is that everything will end up being important to you. I would use parent-to-child calls example:
#father.child{margin-right: 0px; margin-left: 0px;}.
With this, you will govern without using the !important. Think that using the !important you are going to change the default responsive of Bootstrap to the whole page for this case.
DOC:What are the implications of using "!important" in CSS?
You can add an additional id to the elements and style them according to your wish. In this way you can avoid !important. This is the way preferred by me.
Edited code snippet
.divisionify {
margin-bottom: 5px;
position: relative;
border-top: 2px solid gray;
}
.form-title {
position: relative;
color: #7cc0e1;
font-size: 20px;
text-align: left;
margin-top: 10px;
margin-bottom: 5px;
}
#applyPlan {
margin-left: -15px;
margin-right: -15px;
}
#division {
margin-left: -15px;
margin-right: -15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<div id= "applyPlan" class="form-title">Apply for Plan</div>
<div id="division" class="divisionify"></div>
<form class="form-horizontal">
<div class="form-group">
<label for="institution-type" class="control-label">Type of institution</label>
<div class="">
<input type="email" class="form-control" id="institution-type" placeholder="Type of institution">
</div>
</div>
<div class="form-group">
<label for="name" class="control-label">Name</label>
<div class="">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</div>
</form>
</div>
</div>
I have a form where I want to put some <div> elements on the same line.
I want to have confirm password in the same line as password.
HTML
<form action="pages/php/signup.php" method="post">
<div>
<div>Name :
<div id="gtext_form">
<input type="text" name="name" />
</div>
</div>
</div>
<div class="line">
<div class="st_column">E-mail :
<div class="text_form">
<input type="text" name="email" />
</div>
</div>
<div class="nd_column">Login :
<div class="text_form">
<input type="text" name="login" />
</div>
</div>
</div>
<div class="line">
<div class="st column">Password :
<div class="text_form">
<input type="password" name="password" />
</div>
</div>
<div class="nd_column">Confirm password :
<div class="text_form">
<input type="password" name="password2" />
</div>
</div>
</div>
<div class="line">
<input type="submit" name="valider" value=" OK " />
</div>
</form>
CSS
#gtext_form input {
width: 640px;
height: 20px;
}
.text_form input {
width: 280px;
}
.st_column {
float: left;
width: 280px;
display: inline;
}
.nd_column {
float: right;
width: 280px;
display: inline;
}
.line {
padding-right:0px;
padding-left:0px;
width: 640px;
height: 60px;
}
JSFiddle
There is en error in your class name:
<div class="st column">Password :<div class="text_form"><input type="password" name="password"/></div></div>
The name should be st_column
Hi you didn't have the class for the password correct int he html. It was missing and underscore. Trying something like this:
JS Fiddle
Change your class for Password in your html to: class="st_column"
CSS
#gtext_form input {
width: 640px;
height: 20px;
}
.text_form input {
width: 280px;
}
.st_column {
float: left;
width: 280px;
display: inline;
}
.nd_column {
float: right;
width: 280px;
display: inline;
}
.line {
padding-right:0px;
padding-left:0px;
width: 640px;
height: 60px;
}
In your second <div class="line">
You have a div that reads:
<div class="st columns">
However this should be:
<div class="st_columns">
JsFiddle
The reason the confirm password wasn't on the same line as the password is because you are missing the _ in the classname: http://jsfiddle.net/7a9dL/2/
Corrected HTML:
<form action="pages/php/signup.php" method="post">
<div><div>Name :<div id="gtext_form"><input type="text" name="name"/></div></div></div>
<div class="line">
<div class="st_column">E-mail :<div class="text_form"><input type="text" name="email"/></div></div>
<div class="nd_column">Login :<div class="text_form"><input type="text" name="login"/></div></div>
</div>
<div class="line">
<div class="st_column">Password :<div class="text_form"><input type="password" name="password"/></div></div>
<div class="nd_column">Confirm password :<div class="text_form"><input type="password" name="password2"/></div></div>
</div>
<div class="line"><input type="submit" name="valider" value=" OK " /></div>
</form>
Try adding this :
.line div {
display: inline-block;
}
Tested with Firefox 27.