I am trying to keep a textarea and a button in one line while having the textarea extend horizontally as much as possible:
<div class="col-md-10 form-inline">
<textarea class="form-control"></textarea>
<button>small button</button>
</div>
The "form-inline" class on the col makes both in one line, however, it shrinks the textarea. If I remove "form-inline", then the textarea stretches 100% - but the button appears in the next line.
Is it possible to have both in one line with a wide textarea?
Try doing something like this:
.form-inline { position: relative; padding-right: 160px; }
.form-inline > textarea { width: 100%; }
.form-inline > button { width: 150px; height: 35px; position: absolute; top: 0; right: 0; }
Check Demo Fiddle here.
set width for textarea in percentage
<div class="col-md-10 form-inline">
<textarea class="form-control" style="width:90%"></textarea>
<button>small button</button>
</div>
.form-control{
display: inline-block;
width: auto;
}
Related
I'd like to add an icon right before the placeholder in a textarea but don't know how to do it.
Here is my code:
<div class="center-part">
<div class="user-input">
<textarea class="share" name="share" type="text"
placeholder="">
</textarea>
</div>
</div>
Thank you.
It is not possible to combine an icon and text in a placeholder. Because you are only able to use 1 font in it. If you could use different fonts inside the placeholder then this would be possible by using fontAwesome.
You can add a span (positioned inside the textarea) and shift the placeholder to the right of the icon by doing this:
HTML (added span in your code):
<div class="center-part">
<div class="user-input">
<textarea class="share" name="share" type="text" placeholder=" Icon before this"></textarea>
<span class="icon"></span>
</div>
</div>
CSS:
.center-part {
position: relative;
min-height: 50px;
min-width: 200px;
}
.share {
min-height: 50px;
min-width: 200px;
}
.icon {
position: absolute;
background: red;
width: 15px;
height: 15px;
left: 10px;
top: 5px;
}
You can see a demo at Codepen
I have a very simple input form. I want to align the labels with the input controls so they are at the same level.
I've decided to use align-items: baseline because no matter what the padding, height, etc, it will always align correctly. But, for some reason, when using it with an input of type textarea it does NOT align to the baseline, it aligns at the bottom. Why?
Sure, I can fix it using self-align and padding-top for the textarea, but that defeats the purpose of having something flexible without the need of fixing the padding in some inputs.
I just need to understand to logic, or is this is a bug/known issue?
* {
margin: 0;
padding: 0;
}
form {
width: 500px;
margin: 0 auto;
background-color: #e4e4e4;
}
form .control ~ .control {
margin-top: 20px;
}
.control {
display: flex;
align-items: baseline;
}
.control>div:nth-child(1) {
flex: 0 1 150px;
text-align: right;
padding-right: 20px;
}
.control>div:nth-child(2) {
flex: 1;
}
.control input,
.control textarea {
width: 100%;
padding: 20px;
}
.control textarea {
height: 100px;
}
<form>
<div class="control">
<div>
<label>Label goes here</label>
</div>
<div>
<input type="text" name="pretitle" value="">
</div>
</div>
<div class="control">
<div>
<label>Article</label>
</div>
<div>
<textarea name="article"></textarea>
<p class="explain sub">HTML allowed</p>
</div>
</div>
<div class="control">
<div>
<label>Label</label>
</div>
<div>
<input type="text" name="pretitle" value="">
</div>
</div>
</form>
https://jsfiddle.net/bnaL94u6/13/
The problem is not the textarea but the padding you are adding to both input and textarea, in textarea, you won't notice the it grows because 20pxx2 (40px) is not higher than 100px, but the input itself without the padding has only 19px, and when you add 40px of padding it will have a total height of 59px. and the the label will align in the middle of those 59px
I'd like to have a form with 3 <input>s and one textarea below. All of them are inside a container. The 2 first <input>s have min and max width and a % the 3rd input has min and % but no max width.
I would like that when I make the window big enough so that the 1st and 2nd reach their max width, the 3rd one grows to 100% instead of staying limited to 45% and the rest staying in spaces.
HTML:
.container{
width: 70%;
margin: 0px auto;
padding: 10px;
}
.form{
text-align: center;
}
#text{
margin-top: 5px;
width: 95%;
}
#iName{
width: 15%;
min-width: 45px;
max-width: 70px;
}
#iDate{
width: 30%;
min-width: 120px;
max-width: 150px;
}
#iTitle{
width: 45%;
min-width: 120px;
}
<div id="container" class="container">
<div id="form" class="form">
<input id="iDate" value="28/03/2017 13:19"></input>
<input id="iName" value="Jhon"></input>
<input id="iTitle" value="My title"></input><br>
<textarea id="text" rows="4" cols="50">
Some Text
</textarea><br>
<button id="update">Update</button>
</div>
...
</div>
This is a great case scenario to use flexbox.
https://jsfiddle.net/2nfo8exr/
As you can see, you can still set the min-width and max-width restrictions, but it will make sure to use all of the remaining space on that 3rd input to fill up the width.
Also please notice input tags are self-closed and you don't need </input> as that's not valid HTML.
Perhaps this solves the problem (if I understand the problem correctly).
#iTitle {
/*
where 95% is the width of textarea
where 150px + 70px is the max width of the other inputs
where -12px is the space (4px * 3) in between div elements
*/
width: calc(95% - (150px + 70px) - 12px);
min-width: 120px;
}
Here the pure code you can use it without any addition
HTML
<div id="container" class="container">
<div class="row">
<div id="form" class="form">
<input id="iDate" value="28/03/2017 13:19">
<input id="iName" value="Jhon">
<input id="iTitle" value="My title"><br>
<textarea id="text" rows="4">ASfadfasbncaksjb</textarea>
<br />
<button id="update">Update</button>
</div>
CSS
.container {
width: 70%;
margin:0 auto;
}
.form {
text-align: center;
}
#text {
margin-top: 5px;
width: 98%;
}
#iName {
width: 15%;
}
#iDate {
width: 40%;
}
#iTitle {
width: 40%;
}
I'm trying to create a chat area. It'll display the messages on top and the input on the bottom. I want to keep the "esc" button and "send" button the same width, but increase the textarea to maximum width while keeping all three elements inline. This is what I've tried so far.
<div class="col-sm-8">
<div id="chatArea">
</div>
<form class="form-inline" role="form" id="userInput">
<button id="endChat" type="button" class="btn btn-danger">Esc</button>
<div class="form-group">
<textarea class="form-control" rows="5" id="messageArea"></textarea>
</div>
<button id="sendMessage" type="submit" class="btn btn-info">Send</button>
</form>
</div>
and the css
#chatArea {
height: 500px;
background-color: black;
}
#messageArea {
width: 322px;
}
#endChat, #sendMessage {
width: 70px;
height: 110px;
}
But this is the result (didn't show the full chatArea div, only the bottom).
So how can we make it so the textArea resizes itself to be of maximum width while the 3 elements (esc, textArea, and send) are inline.
HTML:
<form role="form" id="userInput">
<button id="endChat" type="button" class="btn btn-danger">Esc</button>
<button id="sendMessage" type="submit" class="btn btn-info">Send</button>
<div class="form-group">
<textarea class="form-control" rows="5" id="messageArea"></textarea>
</div>
</form>
Note the order of #endChat, #sendMessage and .form-group elements.
CSS:
#endChat {
float: left;
}
#sendMessage {
float: right;
}
.form-group {
overflow: hidden;
}
#messageArea {
width: 100%;
}
#endChat, #sendMessage {
height: 110px;
}
When using bootstrap I suggest to try formatting the bootstrap classes in css. Often the bootstrap formatting overrides your own css file unless you override them in your own css-file. Try this:
#endChat {
float: left;
}
#sendMessage {
float: right;
}
.form-group {
overflow: hidden;
display: block;
}
.form-control#messageArea{
width: 100%;
}
#endChat, #sendMessage {
height: 110px;
}
remove following code from your css:
#messageArea {
width: 322px;
}
form-control class of textarea will auto resize its width to 100% of the area.
How to make all inputs with the same width 100%?
if I set width 100% then input will be break on new line:
div > input {
width: 100%;
}
HTML:
<div class="wrapper">
<div>
<label>Label</label>
<input type="text" />
</div>
<div>
<label>Label</label>
<input type="text" />
</div>
<div>
<label>Label</label>
<input type="text" />
</div>
</div>
CSS:
.wrapper label {
float: left;
margin-right: 10px;
}
.wrapper div {
margin-bottom: 15px;
}
The desired result (JSFiddle):
.wrapper input {
width: 90%;
}
You cannot make it 100% without a new line because the Label will take some space of the screen. Remaining portion you can allot for the text fields.
You can do something like this: DEMO
Just remove the float statement, and make both the label and input display: inline-block.
.wrapper div {
margin-bottom: 15px;
}
div > input, div > label {
display: inline-block;
}
div > input {
width: 77%;
}
div > label {
width: 20%;
}
You can change the width of the input fields and/or the labels, but I think width: 77% is the highest value possible for the input fields (with the width of the labels set to 20%) to still display inline.
EDIT:
Do note that using CSS selectors based on HTML tagnames is not the ideal way of doing this. A better way is to give all labels and inputs a class (f.e. class="lbl" and class="inp" respectively), and selecting those, like underneath:
...
.lbl, .inp {
display: inline-block;
}
...
<pre>
.wrapper{width:100%; display:block}
.wrapper lable{width:30%; display:inline-block; position:relative}
.wrapper input{width:70%; display:inline-block; position:relative}
</pre>