ISSUE
Using twitter bootstrap 2.3.2 there is an issue that can be seen below.
HTML:
<body>
<div class="container">
<input class="span5" type="text" id="1" />
<span class="span3">...</span>
<input class="span4" type="text" id="2" />
</div>
</body>
To me this should make an input textbox, then ... then another input textbox...however, with bootstrap it makes ... then an input, then another input.
Examples
Example of Error: jsFiddle
Expected Result: jsFiddle
The span classes you are using on the the inputs and ellipsis elements are block elements and are used with Bootstraps grid system to layout your content.
See: http://getbootstrap.com/css/#grid
Solution
Adding the style float:left resolved the weird issue due to span auto adding this float.
HTML
<body>
<div class="container">
<input style="float:left;" class="span5" type="text" id="1" />
<span class="span3">...</span>
<input style="float:left;" class="span4" type="text" id="2" />
</div>
</body>
Demo: jsFiddle
Related
I have this code
...
<div>
<label>Identification:</label>
<input type="text" name="identification" value="" maxlength="20">
<strong class="characters">20</strong>
<p class="description">
<span class="icon_description"></span>Item description
</p>
</div>
...
now it looks like this image
I need improve it to 100% of parent element.
So label could be fixed to specific width and rest of elements to rest of width space.
How to do it by css3 for cross browsers please?
Hi I corrected some code. Following code works in all browsers.
<!Doctype>
<html>
<body>
<div style="width:500px;margin-top:40px;">
<label style="width:86px;float:left;">Identification:</label>
<div style="width:404px;float:right;margin-left:10px;">
<input type="text" name="identification" value="" maxlength="20" style="width:45%;">
<strong class="characters" style="width:10%;">40</strong>
<h4 style="width:45%;float:right;margin-top:0px;">Item description</h4>
</div>
</div>
</body>
</html>
I have a problem in my html code. I have "Title" , "Firstname" and "Surname" and I need an input box bellow them to be completed by users. these input boxes are defined in my form generator as fields (e.g. [en_title])
Now when I write down the html code to show the output, the blocks are placed under each other. I want to place them near each other and when I use float in my div style, they place near each other BUT the input boxes shrink, while in first case the input boxes don't shrink.
Please give me a solution for this issue that the blocks placed near each other and the boxes don't shrink. thanks
<div>
Title <br />
[en_title]
</div>
<div>
Firstname <br />
[en_fname]
</div>
<div>
Surname <br />
[en_sname]
</div>
Use display:inline-block; instead of float
div{
display:inline-block;
}
<div>
Title <br />
<input type="text"/>
</div>
<div>
Firstname <br />
<input type="text"/>
</div>
<div>
Surname <br />
<input type="text"/>
</div>
So you have 3 div that you want to place near each other horizontally.
the width of the div which contain all these div is 100%.
So each div have a 100/3 % width.
It works as Bootstrap for example.
You can do that like this
Run the snippet
.your-block {
float: left;
width: 33.33333%;
}
<div class="your-block">
<label for="title">Title </label> <br />
<input id="title" type="text"/>
</div>
<div class="your-block">
<label for="firstname">firstname </label> <br />
<input id="firstname" type="text"/>
</div>
<div class="your-block">
<label for="surname">surname </label> <br />
<input id="surname" type="text"/>
</div>
you will need to use width and also use position:absolute so that you can move your control anywhere with margin-left:10px or margin-top:10px whatever in your case. Also it would be helpful if you share your css code for the same.
Better solution:
Don't use divitis for this, use labels and input fields:
HTML:
<form>
<label> Name <input type="text"> </label>
<label> Email <input type="email"> </label>
</form>
CSS:
form{display: flex}
This way you have semantic HTML and achieve the look you want.
A good overview on what can be done with flexbox is on css-tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
How do you separate a <label> from its <input> in separate <div>s but still have them linked?
I have an input and a label, and they are in the same div, and the functionality works. If I move the input to a sibling div (sibling in the context of bootstrap), the toggle functionality doesn't work:
<div ng-repeat="uniqJokeType in uniqJokeTypes">
<div class="row">
<div class="col-md-7 col-md-offset-1">
<div class="type-filter-button" ng-class="jokeCssClasses(uniqJokeType)" ng-click="jokeTypeClick(uniqJokeType)">
<label ng-bind="uniqJokeType"></label>
<input type="checkbox" ng-model="uniqJokeType" class="js-switch" ui-switch checked />
</div>
</div>
<div class="col-md-3">
<!-- I want to move the <input> here, but it does not work when placed here -->
</div>
</div>
</div>
Also, is this more of an HTML context issue, or an angular (maybe scoping?) issue?
Just add a for attribute on the label and an id on your input :
<label ng-bind="uniqJokeType" for="myInput"></label>
<input type="checkbox" ng-model="uniqJokeType" class="js-switch" ui-switch checked id="myInput" />
<div style="display:inline; margin-left:10%;">
<input type="radio">
<span></span>
</div>
<div style="display:inline; margin-left:10%;">
<input type="radio">
<span></span>
</div>
<div style="display:inline; margin-left:10%;">
<input type="radio">
<span></span>
</div>
Hello I have a layout similar to the one above. I have some other things in the php file, but they are irrelevant. For example every new 5th element causes a new line (br), which will make sense when you see the pictures.
Here is an image representation of the outcome:
This is what I need :
How can I possibly do this, I will appreciate any idea. Cheers.
Note: Span tags contain the text next to the radio buttons.
iyi akşamlar :) you can remove div's, create class inside radio buttons and put them altogether into container for each row.
LIVE DEMO HERE
<div class="container">
<input type="radio" class="radyo">
<div class="text">a2</div>
<input type="radio"class="radyo">
<div class="text">a3</div>
<input type="radio"class="radyo">
<div class="text">a4</div>
<input type="radio"class="radyo">
<div class="text">a5</div>
</div>
<div class="container">
<input type="radio"class="radyo">
<div class="text">beyler ben geldim</div>
<input type="radio"class="radyo">
<div class="text">tamam</div>
</div>
First of all, avoid using inline styles.
If you want the result in the second image, simply define width for each element instead of margin.
<div style="display:inline-block; margin-left:10%; width:15%;">
or set the margin-left and width as you see fit.
I'd suggest a nested div pattern, where you can utilize precised columns without margin/padding and insert a div that hold the margin/padding as desired. Then push your checkboxes into each nested div. I'd also suggest using a <label> over <span> (as it is a span with some extra properties) (MDN Label)
.cols {float:left;width:25%} //Set columns up, without margin/padding so they align as expected in 4.
.col {margin-left:10%;} // Inner column with margin/padding etc.
<div class='cols'>
<div class='col'>
<input type='radio' name='radio1' /><label for='radio1'></label>
</div>
</div>
<div class='cols'>
<div class='col'>
<input type='radio' name='radio2' /><label for='radio2'></label>
</div>
</div>
<div class='cols'>
<div class='col'>
<input type='radio' name='radio3' /><label for='radio3'></label>
</div>
</div>
<div class='cols'>
<div class='col'>
<input type='radio' name='radio4' /><label for='radio4'></label>
</div>
</div>
If you have the width of your outer container, it would be easier for you to align fixed-sized divs inside it. For example if we have a div with width: 300px;, and we want 3 radio boxes on a row, we specify width: 100px; for them. Add float: left; and it should work out well for you.
Here's a live demo.
If fixed width doesn't suit you, there are many other approaches to do this, I can share if this doesn't work for you.
I have a rendering inconsistency between Chrome (correct) and Firefox (incorrect) when using Bootstrap. This is my code (fiddle here):
<div class='container'>
<form class='form-horizontal well span6 offset3'>
<label class='control-label'>Testy</label>
<div class='controls'>
<select></select>
</div>
</form>
<legend>Hello!</legend>
</div>
What is the cause of the inconsistency? How can I fix the Firefox rendering so that it matches Chrome's?
It appears to be the way that Firefox and Chrome render the fieldset tag, at least with the non-responsive version of Bootstrap you're referencing. In an effort to eliminate variables, I removed the reference to Bootstrap and linked to bootstrapcdn.com's version, which seemes to fix the problem.
If nothing else, you could always add a bit of CSS to the fieldset tag to ensure it renders the same across all modern browsers.
fieldset { clear: both; }
Update: Looks like I was not paying attention, I've updated this answer to reflect CSS on the legend tag, rather than fieldset. JSFiddle Here.
legend { clear: both; }
The legend tag should be placed within the form tag and it should also have a fieldset tag placed around it.
See this example from Bootstrap:
<form>
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>
And for your code it would be:
<div class='container'>
<form class='form-horizontal well span6 offset3'>
<fieldset>
<label class='control-label'>Testy</label>
<div class='controls'>
<select></select>
</div>
<legend>Hello!</legend>
</fieldset>
</form>
</div>