I set some input design in my sample app. inside it , I have input and textareas. from perspective view,our requirement is to set height aligned with input element.
I would like to align height of textare with input element close to it.When I simply set them as follows. it distorted.
<div>
<input value="input test">
<textarea>textarea test</textarea>
</div>
My desired result is like follows. the height of textare is aligned with input element. How can I achieve this ?
Thanks
You can start by doing this:
.wrapper {
display: flex;
}
.wrapper > input {
margin: 0;
}
<div class="wrapper">
<input value="input test">
<textarea>textarea test</textarea>
</div>
<div style="display: flex; align-items: start;">
<input value="input test">
<textarea>textarea test</textarea>
</div>
The form-group div container has the display: flex and align-items: stretch properties, which align the heights of the child elements. The textarea element has the height: 100% property
<div style="display: flex;">
<input value="input test">
<textarea>textarea test</textarea>
</div>
Related
Im stuck with a problem.
I'm working on a website and I want to style an input with a label to float on the right side and the label to stay on top of the input on that line but the elements are staying as showing in the picture below.
the image
this is what I've done so far:
<h2>Pacients Info</h2>
<button className="addNewPacient" onClick={showModal}>Create</button>
<button className="addNewPacient">Read</button>
<button className="addNewPacient">Update</button>
<button className="addNewPacient">Delete</button>
<label for="rowsNo"><b>Rows no.</b></label>
<input
type="number"
placeholder="Rows no"
name="rowsNo"
value="10000"
onChange={e => onInputChange(e)}
/>
label[for="rowsNo"],
input[name="rowsNo"] {
float: right;
}
input[name="rowsNo"] {
width: 100px;
}
wrap the input and label inside some div container and add styles to it something like this
<div className="some-class-name">
<label for="rowsNo"><b>Rows no.</b></label>
<input
type="number"
placeholder="Rows no"
name="rowsNo"
value="10000"
onChange={e => onInputChange(e)}
/>
</div>
Update the CSS to
.some-class-name {
display: flex;
flex-direction: column;
float: right;
min-width: 100px;
}
input[name="rowsNo"] {
width: 100px;
}
Instead of using float will recommend to use flex property of CSS, it really makes like easier.
You can follow this link for an overview https://css-tricks.com/snippets/css/a-guide-to-flexbox/
How do I make my url and https:// to start on the same margin?
<div className="card">
<div className="card-body">
<div className="form-group col-12">
<label className="">URL</label>
<div className="row">
<p className=""> {baseURL} </p>
<input type="text" name="url" id="url" value={url} onChange={this.onURLChange}/>
</div>
</div>
</div>
</div>
You can use a flexbox as -
.row {
display: flex;
align-items: center;
}
If you wrap your label with a div having same className (row) as you’ve done with your input, you might see the same result.
<div className = "row">
<label className="">URL</label>
</div>
In this case I would add the following to the class form-group, I also make the assumption you want some space between the label and input so I add a bit of padding which you can adjust.
.form-group {
display: flex;
align-items: center;
padding-right: .5rem;
}
Also add for on the label, have it match the input name it is for. Doing so clicking it will focus the input.
<label for="url">URL</label>
I have the following html. I would like the label (Open/Resolved Issues (All Teams) to be centered above my chart (which is rendered in the canvas). I have tried it without the span, and with the span tag, nothing changes. I am using bootstrap and chart.js if that matters.
<div class="container-fluid">
<div class="row">
<div class="col-xs-1"><p></p></div>
<div class="border col-xs-4">
<label class="graph_caption" for="open_resolved_chart">
<span class="center full">Open/Resolved Issues (All Teams)</span><br />
<canvas id="open_resolved_chart" width="400" height="400"></canvas>
</label>
<br>
<span id="open_resolved_chart_legend"></span>
</div>
<div class="col-xs-1"><p></p></div>
<div class="border col-xs-4">
<label class="graph_caption" for="open_resolved_chart_agg">
<span class="center full">Open/Resolved Issues (Agg Team)</span><br />
<canvas id="open_resolved_chart_agg" width="400" height="400"></canvas>
</label>
<br>
<span id="open_resolved_chart_agg_legend"></span>
</div>
</div>
css contents:
.graph_caption {
text-size: 1.2em;
text-decoration: none;
}
.center
{
text-align: center;
}
.full
{
min-width: 100%;
}
Span elements are inline, not block elements, which means they don't take up the entire width. You could add display: block to full, or change it to a div element.
Also, bootstrap provides a text-center class that you should be using in lieu of custom css classes (.center)
If I have a button and an input field contained within a div with a bootstrap class of input-group, they fill the full width of the containing element. If I then hide the button, the input field now shrinks to some default length rather than taking up the full width. It looks a bit like this:
The code for this can be seen here http://jsfiddle.net/1gu6qnhk/1/.
Essentially this problem can be reduced to the following code:
<head>
<style>
.group {
display: table;
}
.input {
width: 100%;
}
.item {
display: table-cell;
width: 1%;
}
</style>
</head>
<body>
<div class="group">
<input class="input" />
<span class="item"></span>
</div>
<div class="group">
<input class="input" />
<span class="item">text</span>
</div>
</body>
Why does the first div take up the full width available whilst the second only takes up a portion of the width, when the only difference is that the span in the second div contains text.
Fiddle here http://jsfiddle.net/Lbyjo79e/1/
you can try this form: http://jsfiddle.net/07r866vp/
<div class="form-group">
<input class="form-control" value="The span after this has text" />
<span class="item">
text
</span>
</div>
<div class="form-group">
<input class="form-control" value="The span after this is empty" />
<span class="item">
</span>
</div>
Setting the width of the parent element to 100% resolves this. (http://jsfiddle.net/Lbyjo79e/2/)
.group {
display: table;
width: 100%;
}
.input {
width: 100%;
}
.item {
display: table-cell;
width: 1%;
}
The issue is in fact the same with just table elements. So if you have:
td {
width:100%;
border: 1px black solid;
}
<table>
<td>two cells</td>
<td></td>
</table>
<table>
<td>one cell</td>
</table>
Then the first table takes up maximum width, but the second table only takes up a fraction. Setting the width of the table to 100% resolve this. Fiddle at http://jsfiddle.net/bkngop0f/.
i'm facing to css problem.basically i have main div tag and 3 div s class named pic_con,body_con and msg_con .
div msg_con length and height depend on the text of it.if text is too long it should have morethan one line to display all.look at the picture.first one with small text,second one with big text ..div msg_con have minimem width and maximum width.
i want to position this 3 div look like in the picture.
<div id="apDiv1">
<div id="div_id_1" class="msg_w_1">
<div class="pic_con">
<div class="body_con">small icon"</div>
<div class="msg_con">hi</div>
</div>
<div id="div_id_2" class="msg_w_1">
<div class="pic_con">
<div class="body_con">small icon"</div>
<div class="msg_con">hey this is multiline text</div>
</div>
</div>
my css
.pic_con {
float:left;
background-color:#096;
}
.back_con {
float:left;
background-color:#3CC;
border:5px solid red;
width:150;
}
.body_con {
/*float:left;*/
margin:0 auto 0 auto;
background-color:#C39;
border:5px solid red;
}
i set flote left but it's not work.
As far as I understood you want to align them one after another.
You can manage this, as you tried, by using float: left. Furthermore, you should set the parent div to clear: both.
Another thing that I saw is that you didn't close the pic-con DIVs. Try with this:
HTML
<div id="apDiv1">
<div id="div_id_1" class="msg_w_1">
<div class="pic_con">pic</div>
<div class="body_con">small icon</div>
<div class="msg_con">hi</div>
</div>
<div id="div_id_2" class="msg_w_1">
<div class="pic_con"></div>
<div class="body_con">small icon"</div>
<div class="msg_con"> hey this is multiline text</div>
</div>
</div>
CSS
.msg_w_1 {
clear: both;
}
.msg_w_1 div {
float: left;
}
Edit: I didn't see the updated post containing CSS when I posted this. Try removing the float: left and width from your CSS classes before trying this
use display:table style.
.msg_con {
display : table
}
this makes .msg_con behave like a table element, it will re-size according to its content's length ( both height and width ).