How can I align button right next to my input text. Example here
HTML
<div id="frm">
<label>Select an Item:
<input type="text" /><input type="button" value="..." class="open">
</label>
<label>Price:<input type="text" /></label>
CSS
#frm label
{
display:block;
float:left;
padding-right:6px;
}
#frm input
{
display:block;
}
Edit
I want my form elements horizontally aligned in blocks & I like the popup button to align with just one textbox.
I'd suggest to move the <input> outside the <label>, like this:
<div id="frm">
<div class="group">
<label for="item">Select an Item:</label>
<input type="text" id="item" />
<input type="button" value="..." class="open">
</div>
<div class="group">
<label for="price">Price:</label>
<input type="text" id="price" />
</div>
</div>
If you want to separate the inputs from the label, you should place the label text inside an own element, and not mix label text and input into a common tag.
Then, you can use the following CSS:
#frm .group {
display: block;
float: left;
padding-right: 6px;
}
#frm label {
display:block;
}
See how it looks like, is this what you want?
-Easiest way to solve your problem, is to remove all CSS - input is inline by default, so it won't wrap to the next line if you add no CSS.
-And I'd add an extra div to make sure your fields are on seperate lines, no CSS needed either.
Like this:
<div id="frm">
<div class="field">
<label>Select an Item:</label>
<input type="text"><input type="button" value="..." class="open">
</div>
<div class="field">
<label>Price:</label>
<input type="text">
</div>
</div>
http://jsfiddle.net/ckfZE/15/
http://jsfiddle.net/ckfZE/18/
added a span-tag though
This CSS is causing that conflict:
#frm input {
display:block;
}
You could set .open to display:inline to fix this.
Be a little more specific with your question. If you took the CSS out completely they would be aligned right next to each other. If you want them on separate lines add a <br/> after the text input.
Related
I want to position a label above and to the left edge of a text field. I put them together in a div. The only problem left is that I need the correct position or display attribute that the input field doesn't react to the label. In that way, I could write text-align:left or float: left to position the label at the very edge of the div and thus at the very edge of the label.
<div class="AlignLeft">
<input type="text" id="1" name="name" maxlength="100" required>
<label for="name" id="1">Align label left</label><br>
</div>
Thank you!
without CSS
to make that on click of the label, the input will be focused.
you will need that your <label> element, have the for="" attribute
this attribute needs the same id="" as the input. (not the name="")
for attribute (docs): https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for
for making the <label> be on the left
put the label before the <input>
make the input nested inside the <label>, then insert a span before the <input>
no css solution:
<div>
<label for="myId"> <!-- put here the id -->
<span>this is the label text</span> <!-- the text -->
<input type="text" id="myId"> <!-- input -->
</label>
</div>
with CSS
if you can't change the HTML structure, then follow this second way (using CSS)
The float property, you showed before seems to work fine.
so just change the for="" attribute to be equal to the id="" of <input>
.AlignLeft label {
float: left;
}
<div class="AlignLeft">
<input type="text" id="1">
<label for="1">Align label left</label><br>
</div>
or use CSS flex with the direction of reverse
using flexbox you have other advantages like gap or centering, and so on...
.AlignLeft {
display: flex;
/* solve the problem (now the text is on the left side) */
flex-direction: row-reverse;
/* you can center easily using flex, or in this case put it on the left of the page */
justify-content: left;
align-items: center;
/* add a gap is easier with flex */
gap: 1rem;
}
<div class="AlignLeft">
<input type="text" id="1">
<label for="1">Align label left</label><br>
</div>
What is the best way of lining up the Remove and the input control, and not have it on a different line?
Fiddle here
<input type="text" class="form-control booking waypoint" placeholder="Via 1"> Remove
Bootstrap is telling the input to be 100% wide...so you'd have to adjust that.
JSfiddle With Bootstrap Demo
input.form-control.booking.waypoint {
width:50%;
display: inline-block;
}
<input type="text" class="form-control booking waypoint" placeholder="Via 1"/>
<label for="">Remove</label>
Try this:
#remove{
display:inline;
}
.booking{
width:50%;
display:inline;
}
<input type="text" class="form-control booking waypoint" placeholder="Via 1"> <p id="remove">Remove</p>
you can use .col-any class name.
For text box
col-lg-7
and for label
.col-lg-5
I want to style the search filter in my data table so that the label and the input field appear on a single line.
Right now it is appearing like this:
Here's the code for the search filter which I can see via the console.
<div class="dataTables_filter" id="ads-table_filter">
<label>
"Search: "
<input type="text" aria-controls="ads-table">
</label>
</div>
How can I do this?
<style>
.dataTables_filter {
white-space:nowrap;
}
.dataTables_filter label, .dataTables_filter input {
display: inline-block;
}
</style>
<div class="dataTables_filter" id="ads-table_filter">
<label>Search :</label>
<input type="text" aria-controls="ads-table"/>
</div>
OK, I am really embarrassed that I cannot figure this out but...
I have form labels that are followed by a "required" asterisk. The asterisk simply drops to the next line under the label text instead of aligning next to the text.
I want the required asterisk to end up on the same line as the label text. I shouldn't have to use floats for this right? They are in the same div so I am not sure why they just don't lay next to each other.
Thanks!
<div id="letsGetStarted">
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<div>#Html.LabelFor(model => model.NewClub.NewClubName) <span class="required">*</span></div>
#Html.EditorFor(model =>model.NewClub.NewClubName)
#Html.ValidationMessageFor(model => model.NewClub.NewClubName)
<div>
#Html.LabelFor(model => model.ClubTypes) <span class="required">*</span>
</div>
#Html.DropDownListFor(model => model.ClubTypes, Model.ClubTypes)
#Html.ValidationMessageFor(model => model.ClubTypes)
<p>
<input type="submit" name="submit" value="Submit" class="btn"/> <input type="reset" name="reset" value="Cancel" class="btn ltgrey" />
</p>
}
</div>
I have a working example of the issue here:
Wrap span into the <label></label>
<div>
<label for="NewClub_NewClubName">Name your club <span class="required">*</span></label>
</div>
you can set margin to move it to left according to your need:
Example
Updated Fiddle
Update
As you are using #LabelFor() so give this to your label:
display:inline;
If you cannot mess with HTML, but you can with CSS>
label{display:inline; clear:both;}
be careful, because this will affect all labels...
In plain HTML5 and CSS3, you can use the following rule. I don't know how to translate this to ASP.net:
.required:after {
content: "*";
}
Then, just write your HTML as
<div>
<label for="NewClub_NewClubName" class="required">Name your club.</label>
<input ...>
</div>
On the other hand, you can use the HTML5 required attribute, which I don't know how to translate to ASP. With placeholder, you might not need a label.
<div>
<input type="text" name="newClub" placeholder="New club name" required/>
</div>
You can style this using the pseudoclass :required. If you put the label afterwards so you can use the CSS3 adjacent selector, you can even try:
<div>
<input type="text" id="newClub" name="newClub"
placeholder="New club name" required/>
<label for="newClub">New club name.</label>
</div>
and
input:required + label:before {
content: "*";
color: red;
}
But again, I don't know ASP.
Try This
#letsgetStarted {
overflow:hidden;
}
#letsgetStarted label {
float:left;
width:auto;
}
#letsgetStarted span.required {
float:left;
}
Place your html text inside label tags.
I did not try it though. It should work for you.
I got a following set up using the lastest twitter bootstrap framework:
http://jsfiddle.net/hfexR/2/
I now want that the input field takes the maximum width when there is no button next to.
How can I do this with pure css or with twitter-bootstrap itself?
Something like inline-block should go, I just don't get it at the moment...
You can use te class input-block-level like in this fiddle
<div class="container">
<div class="span4 well">
<form class="form-search">
<input type="text" class="input-block-level search-query">
</form>
<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Cancel</button>
</form>
</div>
</div>
EDIT : since bootstrap v3, classes have evolved so use col-xx-X classes to obtain the result explained below (further changes may be necessary)
Live demo (jsfiddle)
You could use a .row-fluid and use .spanX to make the inputs fill their container :
<form class="form-search">
<div class="row-fluid">
<input type="text" class="input-medium search-query span12">
</div>
</form>
<form class="form-search">
<div class="row-fluid">
<input type="text" class="input-medium search-query span8">
<button type="submit" class="btn span4">Cancel</button>
</div>
</form>
It appears that a little fix is needed for the button/input combination :
/* May not be the best way, not sure if BS has a better solution */
/* Fix for combining input and button spans in a row */
.row-fluid > input + button[class*="span"] {
float: none; /* Remove the */
display: inline-block; /* floating */
margin-left: 0; /* Stick it to the left */
}
Last thing, you shouldn't combine .spanX and .well because of the padding and borders and other things, here is an example of why (jsfiddle).