Please check my code at http://jsfiddle.net/TccN5/.
It has a gap between the input text box and the button on the right. For the very same markup on Bootstrap site the input box and the button has a nice tight fit with no gap.
Why do I have the gap?
You have extra whitespace characters between button and input elements. Place button tag immediately after input element:
<input type="text" /><button class="btn" type="button">Any</button>
DEMO1
Or alternatively, apply this css styles:
.input-append{
font-size:0;
}
DEMO2
Im not sure why that is, but this is how i fixed it. maybe you got some of your own css conflicting with the text field.
here's the jsfiddle with the fix http://jsfiddle.net/TccN5/2/
I just added
style="margin-right:-4px"
to your
<input type="text">
Use input-prepend and input-append
<div class="btn-group input-prepend input-append">
<input type="button" class="btn" value="Prev">
<input type="text" value="">
<input type="button" class="btn" value="Next">
<div>
Related
Is it possible somehow to make checkbox and text inline? Having trouble with this one, tried inline options through css, but seems I either can't use it or It is doesn't work.
Here is a simple example. All you need is a wrapper element and one line of CSS. By default, all immediate flex children will share the available horizontal space on the line.
.checkboxRow {
display: flex;
}
<div class="checkboxRow">
<input id="mycheckbox" type="checkbox">
<label for="mycheckbox">I am a label</label>
</div>
<div class="checkboxRow">
<input id="mycheckbox2" type="checkbox">
<label for="mycheckbox2">I am a label</label>
</div>
When creating inline radios in a form-horizontal, is there any way to vertically align the radio buttons? fiddle here - note that button 'EF' is below button 'B', but is offset to the right - I'd like it to be directly below 'B'. I can mess around with padding but I'd rather use the grid if possible. Thanks.
Demo Fiddle
The issue here is that you are effectively placing two columns of content within a single Bootrap column (col-sm-4), you either want to split the radio buttons into separate columns, or apply a set width to them so it is consistent across rows.
Try adding:
label{
width:46%;
}
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
option two
</label>
</div>
Bootply here
I have a form with a textbox for email input and a button. The button is technically a HTML button here. The Form's HTML is like this:
<form class="form-wrapper cf">
<input type="text" placeholder="Enter your email here..." required>
<button type="submit">
Submit
</button>
</form>
JSFiddle Code: http://jsfiddle.net/ahmadka/aDhUL/
I'd like to convert the button type="submit" control to an input type="submit", while also keeping all the current CSS, so that visually there's no change. CSS would need to be updated I guess. I tried to do this myself, but I couldn't update the CSS correctly.
Can someone help me with this please ?
The basic solution requires changing the following everywhere in your CSS
button -> input[type=button]
input -> input[type=text]
I'd prefer to add a CSS class, instead of referencing the tag names, you could just use
<input type="text" class="text" />
<input type="submit" class="btn" />
That would require changing the following everywhere in your CSS
button -> input.btn
input -> input.text
This is not fully finished but almost works http://jsfiddle.net/aDhUL/7/
The problem is that the input:before directive inserts an element inside of the input. That is allowed for button, but not allowed for input , since input can't have child elements. http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/
So (if you want to use :before) you have to go back to a button, inserting a span element between the text field and the button won't allow you to have a hover effect on both the arrow and the button.
Why do you want to use input type="submit" in the first place?
You just need to change button to input[type=submit] in your stylesheets. If that doesn't work, then you'll need to be more specific about what problems you're having.
You will have to edit CSS, don't be lazy mate :)
<form class="form-wrapper cf">
<input type="text" placeholder="Enter your email here..." required>
<input type="submit" class="btn" value="submit">
</form>
CSS
.btn{
color:green;
}
Now you can also use after adding the class in CSS
<form class="form-wrapper cf">
<input type="text" placeholder="Enter your email here..." required>
<button type="submit" class="btn">Button</button>
</form>
All of the style sheets have to be updated to do so:
What is now this:
/* Form submit button */
.form-wrapper button {
Needs to become this:
/* Form submit button */
.form-wrapper input[type=submit] {
there are a bunch more classes to be updated below that one..
EDIT: changed it from a class to the style as joe points out.
I have a problem with the automatic layout of jquery mobile:
i have a form with fieldsets:
<div data-role="collapsible" data-collapsed="false" data-theme="a">
<h3>Test</h3>
<div data-role="fieldcontain">
<label for="TextInput"> Textinput </label>
<input type="text" name="TextInput" id="TextInput">
</div>
<div data-role="fieldcontain">
<label for="ButtonInput"> Button </label>
<a href="javascript:alert('works')" data-icon="arrow-r" data-role="button" data-iconpos="right">
<label id="ButtonInput" name="ButtonInput"> Testvalue </label>
</a>
</div>
</div>
On Displays with a lower resolution everything work fine. The labels are shown in the first row, the inputs are shown in the second row:
Textinput
[Inputbox]
Button
[Button]
On Displays with a higher resolution, the input field and the label are shown in 1 row
Textinput [InputBox]
but the Button is still shown in 2 Rows:
Button
[Button]
Anyone knows the problem?
This is not an error, jQM was build to act like that.
If you want to fix it just use this simple css:
#TextInput {
width: 100% !important;
}
working example: http://jsfiddle.net/Gajotres/xrVU2/
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.