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
Related
I need to hide a label with CSS
<p class="half_form ">
<label for="property_bathrooms">Bathrooms (*only numbers)</label>
<input type="text" id="property_bathrooms" size="40" class="form-control" name="property_bathrooms" value="0"></p>
I am trying to use:
label [for="property_bathrooms"]
{
display:none;
}
As seen in other question but is not working for me.
Any help is very appeciated.
Try to remove space after label
label[for="property_bathrooms"] {
display:none;
}
I have a field in my html page like this:
<input type="text" class="form-control" readonly>
I would like it to look like normal text between <p> tags. Please help me CSS wizards.
you can try this
CSS
input[readonly]{
background-color:transparent;
border: 0;
font-size: 1em;
}
if you want to use with a class you can try this one
HTML
<input type="text" class="form-control classname" value="Demo" readonly />
CSS
input[readonly].classname{
background-color:transparent;
border: 0;
font-size: 1em;
}
if you want to make the <input> look like inline text (resizing the input element) please check this fiddle https://jsfiddle.net/Tanbi/xyL6fphm/ and please dont forget calling jquery js library
I realise the question is about Bootstrap 3, but it might be good to know that Bootstrap 4 now has this out of the box: https://getbootstrap.com/docs/4.0/components/forms/#readonly-plain-text
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email#example.com">
</div>
in addition to the accepted answer, I found that the following style works a bit better:
input[readonly] {
background-color: transparent;
border: 0;
box-shadow: none;
}
Bootstrap introduces a shadow that one may want to hide.
<input type="text" placeholder="Show your text" readonly style="border: 0px;" />
That should work
Bootstrap 5 has form-control-plaintext class for that:
<input type="text" readonly class="form-control-plaintext" id="email"/>
I want to separate text boxes and labels and to make them all in the same width to get better look.
It is not a PHP question at first, The presentation can be done by simple css.
here is the code:
label {
width:80px;
clear:left;
text-align:right;
padding-right:12px;
}
input, label {
float:left;
}
<label>Name:</label>
<input placeholder="Enter Name here..."><br/>
<label>Place:</label>
<input placeholder="Enter Place here..."><br/>
<label>Country:</label>
<input placeholder="Enter Country Here..."><br/>
Just a quick question can a CSS radio button effect something outside the element it's in.
For example:
<div class="radio">
<input id="radio-green" type="radio" name="radio-b"/>
<label for="radio-green">Green</label>
<input id="radio-blue" type="radio" name="radio-b" checked />
<label for="radio-blue">Blue</label>
<input id="radio-yellow" type="radio" name="radio-b"/>
<label for="radio-yellow">Yellow</label>
<input id="radio-red" type="radio" name="radio-b"/>
<label for="radio-red">Red</label>
<input id="radio-white" type="radio" name="radio-b"/>
<label for="radio-white">White</label>
</div>
<div class="square"></div>
With the CSS something like this?
.square {
width:300px;
height:300px;
margin:0 auto;
background:red;
}
input#radio-green:checked .square {background:green;}
Or would I need to use JS?
Here's a JS fiddle http://jsfiddle.net/m8fxw/
Thanks
If they weren't inside their parent <div> you could do it, because they'd be siblings. Unfortunately CSS rules don't let you traverse back up the tree.
If you took them out the <div class="radio"> then you could use the ~ sibling combinator:
#radio-green:checked ~ .square {background:green;}
Demo
Otherwise, I'd probably use JS to add a class to the <div class="radio> when each radio was clicked and then style the square accordingly.
If you know jQuery, you can use:
$('input[type=radio]').click(function() {
var $this = $(this);
$('.square').css('background', $(this).next().text());
})
Updated Fiddle
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.