I have a textbox and checkbox next to each other, my problem is the checkbox goes to the next line:
<td><div class='allDropdown'><input type='text' class='vendorDropdown' /> <input type='checkbox' class='checkbox' /></div></td>
I am trying to get them next to each other.
Here is my CSS:
.allDropdown {
width: 100%;
}
.allDropdown input[type=text] {
float: left;
width: 150px;
}
.allDropdown input[type=checkbox] {
float: left;
}
I have a very long table and I am also using bootstrap, when I try to decrease the size of the textbox, the td just gets smaller and the checkbox goes to the second line
you can position your text box as absolute so it will stick in any side you want
try this..
.allDropdown {
width: 100%;
}
.allDropdown input[type=text] {
float: left;
width: 150px;
}
.allDropdown input[type=checkbox] {
position:absolute;
right:<x>px;
top :<x>px;
}
Yes, actually that code seems about right. It's not rendering the two inputs in different lines. Can you show more code please? There might be some bootstrap styling going on there. On the other hand, instead of floating them, you should always try to change the way the box is being displayed instead of taking it ouf of the frame with the float; have you tried with display:inline-block for both?. Does the table have any styling going on that might be adjusting the size of the TDs?
Related
This html needs to display the radio icon to the left of the label but it is above it.
Chrome (left image), firefox 45.0.1 (right image)
The reason I nested the input in the label because the code needs to make the label clickable "clicking the label activate the radio button as well"
How can I get it to display correctly in all browsers? Thanks
.radio-label {
float: left;
}
<label class="radio-label">
<input type="radio" name={{group}} checked={{value}} value={{name}}>{{caption}}
</label>
You can try this:
<label class="radio-label">
<input type="radio" name={{group}} checked={{value}} value={{name}}>
<div>{{caption}}</div>
</label>
and styling like this...
.radio-label {
width: 200px; // you can modify this as per your needs...
}
.radio-label, .radio-label input {
float: left;
}
.radio-label div {
overflow: hidden;
}
display:inline-block property doesn't mean that you are forcing element to come on left it just means you want element in single line. Use float left which actually mean to left align a element
.radio-inline {
float: left;
}
You just try with,
.radio-inline {
float: left;
}
I think you have to pack both in a div and then align one item to left and other on right i.e radio button to left and label to right.
give a specific width to outer div and give 50% to each item
I have an input box and a button defined like so:
<form class="form-inline">
<input type="text" title= "language" class="input-block-level" placeholder="Insert Languages"/>
<button type="submit" class="btn btn-primary">Filter by Languages</button>
</form>
But the button shows up on the second line. Is it possible to position the button to the right of the input box?
I think you may be misunderstanding the use of input-block-level class. When this class is applied to an input field, the input field will take all available width.
As a result, any element that you place next to it, will roll over to the next line.
If you need the elements to be side by side, remove input-block-level and replace with a more appropriate class (input-mini, input-small, input-medium, input-large, input-xlarge, input-xxlarge or span classes).
I'm using input-xxlarge, but it's still not big enough. How do I
customize it? I've tried something like .input-xxlarge { width:
1500px; !important; height: 30px !important; } , but it doesn't
override it. – Parseltongue 13 mins ago
Inspect the element with developer tools (like in Chrome, Safari etc) and see if other widths/heights are overriding your explicit declarations. I tried changing it on my end and was successful when I changed the actual class in bootstrap.css
set widths desired to each element and float them:
form{overflow: hidden}
form input{
display: block;
width: 70%;
float: left;
}
form button{
display: block;
width: 30%;
float: left;
}
When the text is long the checkbox goes above the text. How can I make it stay on the same line as the text but break the text if its long? ie give the text white-space:normal but keep the checkbox and the first bit of the text on the same line.
<input style="float: left" type="checkbox" ...etc..> my text
I've amended the markup to use a label and input, but that's not necessary (you'll just need something to contain your checkbox. Take a look at this jsFiddle for an example.
HTML:
<div class="container">
<label><input type="checkbox"> My text - this label can be as long as you want it to be, see?</label>
</div>
CSS:
.container {
width: 150px;
background: red;
}
label {
display: block;
padding-left: 1em;
}
input {
display: inline-block;
margin-left: -1em;
}
The width on the .container is just there to show that this will work when the text wraps: it will work at any width and for responsive designs without anything fixed. It'll look like this:
And here's an example using your original markup (with an added span, I'm assuming you can include that):
<div class="container">
<span><input type="checkbox"> My text - this label can be as long as you want it to be, see?</span>
</div>
UPDATE: Something else that maybe useful for you:
http://jsfiddle.net/persianturtle/FrEsX/3/
Hide's the overflow.
Something like this?
http://jsfiddle.net/persianturtle/vwfwh/3/
If not, draw a picture.
.container {
width: 150px;
height: 200px
}
input {
margin: 25px 25px 50px 50px;
float: left;
}
well I would set fixed width for a.
a {
display: inline-block;
width: 100px; /*whatever number you need*/
}
You can try witch is for Non Breakable Space.
Is it possible to place a 'required asterisk' image in front of the first letter of a label only using css? The text of the label is right aligned, so there is a varying length of space in front of the text of each label.
.foo:before {
content : "* ";
color : red;
}
It is possible with some CSS, but it won't work with IE. First, you need to create a bulleted list.
Next, hide the list-item-bullet:
ul > li {
list-style-type:none;
list-style-position:inside;
}
then add a new symbol in front of the list-item:
ul > li:before {
content:"* ";
}
If you wish to place an image using CSS, without modifying content, then you need to use a background image, e.g.
label {
padding-left: 12px;
background: url(asterisk.png) no-repeat;
}
This implies an accessibility problem: people using nonvisual browsing won’t get the information about requiredness, since there is no way to specify a textual alternative to a background image.
On the other hand, to limit the effect to only such labels that relate to required fields, you would need to use a class selector, say label.required, and add a class attribute to the relevant label elements. Then I suppose you could just as well modify the content by adding an actual image before the relevant label elements, without resorting to CSS, e.g.
<img src=asterisk.png alt="Required "><label ...
Just use padding.
<label for="required"><span>Required</span></label>
<input type="text" name="required" id="required" />
CSS:
label {
text-align: right;
width: 200px;
vertical-align: middle;
display: inline-block; }
label span {
background: url(http://placehold.it/5x5) 0 0 no-repeat;
padding: 0 0 0 6px;
vertical-align: middle;
display: inline-block; }
input {
vertical-align: middle;
display: inline-block; }
Preview: http://jsfiddle.net/Wexcode/j475V/1/
I created a spanned line with dots to fill in between text of links and phone number, but i cant get it so that if i have to many dots that the text does not go underneath. The problem is on some different brwosers and computers the .... will look fine or it will push it out of the way. How wouldi go about making it so the dots.... would span and the text would not go below the width its supposed to.
<style type="text/css">
#contactInfo {
margin:auto;
width: 480px;
height: auto;
}
</style>
<div id="contactInfo">
<p>Email: .........................................................................info#hereistheemail.com</p>
<p>Phone: ..................................................................................<span class="redBold">888-888-8888</span></p>
</div>
I tried putting less dots buton some browsers it just doesnt look right.
A better way to do what you want is with a definition list. This will semantically present the information you want and not require you to type out a bunch of dots:
HTML
<dl>
<dt>Phone</dt>
<dd>123-4567</dd>
<dt>Email</dt>
<dd>info#email.com</dd>
</dl>
CSS
dl {
/* Adjust as needed. Note that dl width + dt width must not be greater */
width: 300px;
}
dt {
/* The definition term with a dotted background image */
float: left;
clear: right;
width: 100px;
background: url(1-pixel-dot.gif) repeat-x bottom left;
}
dd {
/* The definition description */
float: right;
width: 200px;
}
You can see an example of it here.
You will have to try and create a workaround for this, instead of just using characters.
Some solutions could be using a background image that repeats itself inside some div/span: http://www.htmlforums.com/html-xhtml/t-toc-style-dotted-line-tab-fill-in-html-103639.html
Or you could think of creating a span between the word e-mail and the e-mail address and try to create a border-bottom: dotted 1px black or something equivalent. Or maybe put the information in a table and create one td with that border-bottom.
Another solution would be to check the number of dots needed with some javascript, but this is most certain not robust at all and will not justify-align your content.
So, be creative with a solution. Filling the line with characters is probably not the way to go.
Try this:
#contactInfo {
[ your other styles ]
white-space: nowrap;
}
Another method is with position:absolute
Demo
#contactInfo p
{
position:relative;
}
#contactInfo span,#contactInfo a
{
position:absolute;
right:0px;
}
Edit (cleaned up version)