I have a form with two rows (col-md-6). On the left side there are some fields, on the right side, there's only one textarea.
Now what I wanted to do is make the textarea the same height as all the other fields together.
I thought this would be easily possible when setting a display: flex; to the row, so that the tow col-md-6's are the same height and then add height: 100% to the input-group, but unfortunately I was wrong. The input will not expand to the full height.
Here's my HTML code:
<div class="row" style="display: flex;">
<div class="col-md-6">
<div class="input-group">
<div class="input-group-addon">Input 1:</div>
<input type="text" class="form-control"></textarea>
</div>
<div class="input-group">
<div class="input-group-addon">Input 2:</div>
<input type="text" class="form-control"></textarea>
</div>
<div class="input-group">
<div class="input-group-addon">Input 3:</div>
<input type="text" class="form-control"></textarea>
</div>
</div>
<div class="col-md-6">
<div class="input-group" style="height: 100%;">
<div class="input-group-addon">Textarea:</div>
<textarea class="form-control" style="height: 100%"></textarea>
</div>
</div>
</div>
I added the styles inline to reduce the code here on stackoverflow.
So again, I could get the two columns to the same height, but I'm unable to set the height of the textarea to 100%.
Can anyone tell how this could work? If possible without JavaScript!
textarea {
height: 100%;
}
<div class="row" style="display: flex;">
<div class="col-md-6">
<div class="input-group">
<div class="input-group-addon">Input 1:</div>
<input type="text" class="form-control">
</div>
<div class="input-group">
<div class="input-group-addon">Input 2:</div>
<input type="text" class="form-control">
</div>
<div class="input-group">
<div class="input-group-addon">Input 3:</div>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="input-group" style="height: 100%;">
<div class="input-group-addon">Textarea:</div>
<textarea class="form-control"></textarea>
</div>
</div>
</div>
Related
How can I make all the elements have the same height without needing to define a static height?
[
http://jsfiddle.net/o5fjsgur/
<div class="row">
<div class="col-sm-12 col-md-5 flex-center" style="border:1px solid red;">
<div class="md-form">
<select class="browser-default custom-select" mdbInput mdbValidate >
<option >CAMBIARR esta joda</option>
</select>
</div>
</div>
<div class="col-sm-12 col-md-1 flex-center" style="border:1px solid red;height: 100%;">
<div style="height: 100%;">
holi
</div>
</div>
<div class="col-sm-12 col-md-5" style="border:1px solid red;">
<div class="md-form m-0 p-0 flex-center mt-3">
<div class="form-check">
<input type="radio" class="form-check-input" id="creacion" name="creacion_soporte" mdbInputDirective>
<label class="form-check-label" for="creacion">Creación</label>
</div>
<div class="form-check" >
<input type="radio" class="form-check-input" id="soporte" name="creacion_soporte" mdbInputDirective>
<label class="form-check-label" for="soporte">Soporte</label>
</div>
</div>
</div>
</div>
If you use flex-box, or if you use Bootstrap 4 with the new grid system (see https://getbootstrap.com/docs/4.2/layout/grid/), which uses flex-box, you'll get the expected results. height: 100% has no effect on a floating element.
See http://jsfiddle.net/8d9Lxemb/
In this simple example, when I have a validation error on the First Name input box on the left side of the form, the E-Mail form element gets pushed down the page.
When I have the same error on the right side of the form though, this behavior does not happen.
I don't see any difference in the code. Here are some screen shots. I was unable to get this to work in jsfiddle or codepen, so here is the link to the test page and I've also pasted my html below:
https://www.blastyourresume.com/testing/formalignment/test.cfm
To reproduce the error on that page, type something in the firstname field, then delete it. If you repeat this process on the right side, you don't get the same behavior.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container" align="center">
<form name="frmSignup" id="frmSignup" method="post">
<div class="col-sm-6 col-xs-12 col-md-6">
<div class="form-group" align="left">
<label>First Name</label>
<input type="text" placeholder="First Name" id="firstname" name="firstname" maxlength="50" class="form-control">
</div>
</div>
<div class="col-sm-6 col-xs-12 col-md-6">
<div class="form-group" align="left">
<label>Last Name</label>
<input type="text" placeholder="Last Name" id="lastname" name="lastname" maxlength="50" class="form-control">
</div>
</div>
<div class="col-sm-6 col-xs-12 col-md-6">
<div class="form-group" align="left">
<label>E-Mail Address</label>
<input type="text" placeholder="E-Mail" id="email" name="email" maxlength="100" class="form-control">
</div>
</div>
<div class="col-sm-6 col-xs-12 col-md-6">
<div class="form-group" align="left">
<label>Confirm E-Mail Address</label>
<input type="text" placeholder="Confirm E-Mail" id="confirmemail" name="confirmemail" maxlength="100" class="form-control">
</div>
</div>
<div class="col-sm-12 col-xs-12 col-md-12">
<button type="submit" name="btnSubmit" class="btn btn-primary" id="btnSubmit"> Submit </button>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Flex approach
add display:flex to your parent container. Display flex will make
your columns equal height.
#frmSignup {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
Absolute positioning of error messages.
.form-group {
position: relative;
}
.errormessageclass {
position: absolute;
top: 100%;
left: 0;
width: 100%;
}
For some reason when validation message is shown for the first name input it causes email field to be pushed left and confirm email goes to the next row. I found that it could be fixed if you wrap you form groups in <div class="row"></div> like:
<div class="row">
<div class="col-sm-6 col-xs-12 col-md-6" style="">
<div class='form-group>first name</div>
</div>
<div class="col-sm-6 col-xs-12 col-md-6" style="">
<div class='form-group>last name</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12 col-md-6" style="">
<div class='form-group>email</div>
</div>
<div class="col-sm-6 col-xs-12 col-md-6" style="">
<div class='form-group>confirm email</div>
</div>
</div>
https://codepen.io/
But it sound like a rough hack.
I also would be grateful to get an explanation of why pushing effect happens.
div class="container">
<div class="row">
<div class="col-md-6">
<form class="form-inline" action="#" method="POST" role="form" name="myForm" style="margin-top: 50px;">
<div class="well">
<div class="form-group col-sm-12">
<label class="Control-label col-sm-4" id=""> Email:</label>
<label class="Control-label col-sm-4" id=""> Username:</label>
<label class="Control-label col-sm-4" id=""> Password:</label>
</div>
<div class="row">
<div class="form-group ">
<div class="input-group col-sm-12">
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Email here" ng-model="Email" required/>
</div>
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Username here" ng-mode="Username" required/>
</div>
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Password here" ng-mode="Password" required/>
</div>
</div>
</div>
<h1> Test </h1>
</div>
</div>
</form>
</div>
</div>
and my CSS code is :
.form-control{
width: 150px;
}
h1{
color:red;
}
Good Day mate, i am just confuse if im doing right or not. i want to resize the input on my website which defined as class "form-control" but when i do the css above nothing changes. can someone help me if my selector or wrong or my codes is? thank you
P.S the test below is just a xample if the css is being link in my editor and yes the color red is being executed
The more specific the selector, the more precedence it has. For example :
.mydiv .myclass {
background-color: blue;
}
.myclass {
background-color: red;
}
Even tho the red background is defined after the blue one, the first one is more specific in the class that it is applied to, and in case you have the following code, the blue background will be applied :
<div class="mydiv">
<div class="myclass">
</div>
</div>
So what you want to do in your case, and this is the most basic but still the better solution, is to add a class to your form in order to be able to specify the width of the form-control elements for this form :
<form class="form-inline cool-form">
<div class="well">
<div class="form-group ">
<div class="input-group col-sm-12">
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Email here" ng-model="Email" required/>
</div>
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Username here" ng-mode="Username" required/>
</div>
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Password here" ng-mode="Password" required/>
</div>
</div>
</div>
</div>
</form>
And then specify the width in your css :
.cool-form .form-control {
width: 250px;
}
try this:
note: and you are missing to close your first div i.e <div class="container">
.form-control::-webkit-input-placeholder {
color: red;
width: 250px;
}
h1 {
color: red;
}
<div class="container">
<div class="row">
<div class="col-md-6">
<form class="form-inline" action="#" method="POST" role="form" name="myForm" style="margin-top: 50px;">
<div class="well">
<div class="form-group col-sm-12">
<label class="Control-label col-sm-4" id="">Email:</label>
<label class="Control-label col-sm-4" id="">Username:</label>
<label class="Control-label col-sm-4" id="">Password:</label>
</div>
<div class="row">
<div class="form-group ">
<div class="input-group col-sm-12">
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Email here" ng-model="Email" required/>
</div>
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Username here" ng-mode="Username" required/>
</div>
<div class="col-sm-4">
<input class="form-control" placeholder="Enter Password here" ng-mode="Password" required/>
</div>
</div>
</div>
<h1> Test </h1>
</div>
</div>
</form>
</div>
</div>
You are using Bootstrap and form-control class is used from Bootstrap CSS.
Use (Easy way)
.form-control{
width: 150px !important;
}
to override your code over Bootstrap CSS
The best practice -
In your case the class is .form-control (Bootstrap class)
To overcome this is to define new class and add new changes to your own class.
.form-control-override{
width: 150px;
}
and use this form-control-override in your HTML code instead of form-control
Just started learning Bootstrap and for example have designed this form like this, I want to know if those column numbers even make sense according to each other?
<form class="form-horizontal">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Website Active
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<label>Display this message when the website is not active</label>
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
</div>
</div>
</div>
</form>
See here the difference of what I explained in comments :
In your case, a more proper structure could be :
<div class="container">
<div class="row">
<form class="form-horizontal">
<div class="col-sm-6">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox"> Website Active
</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Display this message when the website is not active</label>
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
</div>
</form>
</div>
</div>
And you have to add a .container or .container-fluid class around your .row
You can have .row as much as you wants in a single .container class.
See your code on a bootply fiddle
When I resize my window smaller I wonder why the textboxes do not shrink in width either?
It looks the same on FF,IE and Chrome. How can I say to the textboxes to adapt their width when the window is resized?
I can give the text input this style: `style="display:block;width:auto"
Then the textbox does not overflow the div but then it seems to have a fixed width and is not stretched anymore to the divs end what I do not like at all.
<div class="row">
<div class="span6">
<div class="row">
<div style="background-color: green" class="span3">
<span>Schoolyear name</span>
</div>
<div style="background-color: orange" class="span3">
<input type="text" />
</div>
</div>
<div class="row">
<div style="background-color: red;" class="span3">
<span>Schoolyear from</span>
</div>
<div style="background-color: yellow" class="span3">
<input type="text" />
</div>
</div>
<div class="row">
<div style="background-color: red" class="span3">
<span>Schoolyear to</span>
</div>
<div style="background-color: yellow" class="span3">
<input type="text" />
</div>
</div>
<div class="row">
<div style="background-color: red" class="span3">
<span>Start week</span>
</div>
<div style="background-color: yellow" class="span3">
<label class="radio">
<input type="radio" />Week A</label>
<label class="radio">
<input type="radio" />Week B</label>
</div>
</div>
<div class="row">
<div style="background-color: blue" class="span3">
<span>Weekly rotation</span>
</div>
<div style="background-color: greenyellow" class="span3">
<select>
<option>Please select</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</div>
<div style="background-color: gray" class="span3">
<div class="row">
<div class="span3">Days to display</div>
<div class="span3">
<label class="checkbox">
<input type="checkbox" />Sunday</label>
<label class="checkbox">
<input type="checkbox" />Sunday</label>
<label class="checkbox">
<input type="checkbox" />Sunday</label>
<label class="checkbox">
<input type="checkbox" />Sunday</label>
<label class="checkbox">
<input type="checkbox" />Sunday</label>
<label class="checkbox">
<input type="checkbox" />Sunday</label>
<label class="checkbox">
<input type="checkbox" />Sunday</label>
</div>
</div>
</div>
<div class="span3">
<div class="row">
<div style="background-color: red" class="span3">Weeks start day</div>
<div style="background-color: yellow" class="span3">
<label class="radio">
<input type="radio" />Tuesday</label>
</div>
<div style="background-color: red" class="span3">
<label class="radio">
<input type="radio" />Monday</label>
</div>
</div>
</div>
</div>
<div class="row">
<div style="background-color: burlywood" class="span12">99999999999999999999</div>
</div>
This will do the trick!
Demo
input[type="text"], select{
width:100%;
box-sizing: border-box;
}
I can see you are using a grid system on your markup, you should take a look if this grid system provide you a option to do that, that would be the better way to accomplish what you want.
Anyway for do that you should use `%``instead of pixels or auto, example:
CSS
input{
width: 80%;
}
And if its possible a url so we can't take a look would make much easier to help you out
What you have to do is :
<div style="background-color: orange; width:100%" class="span3">
^^^^^^^^^^|________________set this as per your size in % or px
<input type="text" style="width:50%;"
^^^^^^^^^^|___________set this in % as per your need.
Check this Resize Input Demo