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/
Related
This is a BuzzFeed style quiz.
My radio selections are questions that are looped through and added up to a certain number score. I can't figure out how to make them appear selected without the circle from the radio button.
This is what I have so far:
<div class="form-group">
<label
>{{ quizQuestions[0] }}
<div class="btn-group btn-group-toggle" *ngFor="let flavor of answerSetOne">
<label class="btn btn-primary active">
<input
checked
type="radio"
name="flavor"
class="btn-check"
ngModel [value]="flavor.num"
required/>
{{ flavor.name | titlecase}}
</label>
</div>
</label>
</div>
When I put data-toggle="buttons" the radio circles disappear, but it no longer selects an option for the result.
How can I make the circles disappear to show the code and the user that a certain option has been selected?
This is what it looks like now when it works.
working quiz section
Looks more like a CSS question here. You can make them disappear with :
input[type=radio] {
appearance: none;
}
I've spent hours trying to get rid of the border radius on my select2 append checkbox. As of now the dropdown is displayed with a checkbox on the left. The problem is that there seems to be a border radius between the two input group elements, something similar to the image. The solution proposed was adding the input-group select2-bootstrap-prepend class to the wrapper element which doesn't work for me.
The html is as follows
<div class="col-lg-3">
<div class="panel-body">
<b>Region</b><br>
<div class="input-group select2-bootstrap-prepend">
<span class="input-group-addon">
<input type="checkbox" checked>
</span>
<select id="select2-single-append" class=" region">
</select>
</div>
</div>
</div>
View the running example from jsfiddle
you need
.select2-container--default .select2-selection--single {
border-radius:0 0.25rem 0.25rem 0;
}
see this fiddle
https://jsfiddle.net/grassog/kLchxehz/25/ (relevant css at the bottom of the css portion)
I have a grid of input fields on my form. Bootstrap is naturally adding a bit of horizontal space between the fields in Firefox, which is how I want the form to look, but the fields are getting jammed together in Chrome. In the Firefox image above, I have highlighted the col-md-2 div in Firebug which wraps the input field. The input field is highlighted in Chrome.
This seems to be the difference - Firefox seems to be constraining the input fields to fit inside the grid elements, but this is not the case in Chrome. In Firefox, the input fields in the grid are 144 px wide but in Chrome they are 170 px wide.
Here is the markup for a row of fields:
<div class="row signup">
<div class="col-md-1">
<span class="plus-icon">
<img width="18" height="18" src="/assets/plus.jpg" alt="Plus">
</span>
<span class="minus-icon">
<img width="18" height="18" src="/assets/minus.jpg" alt="Minus">
</span>
</div>
<div class="col-md-2">
<input id="sheet_slots_attributes_0_label" type="text" name="sheet[slots_attributes][0][label]" value="Food">
</div>
<div class="col-md-2">
<input id="sheet_slots_attributes_0_name" type="text" name="sheet[slots_attributes][0][name]" value="Foo">
</div>
<div class="col-md-2">
<input id="sheet_slots_attributes_0_email" type="text" name="sheet[slots_attributes][0][email]" value="foo#foo.com">
</div>
<div class="col-md-2">
<input id="sheet_slots_attributes_0_phone" type="text" name="sheet[slots_attributes][0][phone]" value="">
</div>
<div class="col-md-2">
<input id="sheet_slots_attributes_0_comments" type="text" name="sheet[slots_attributes][0][comments]" value="">
</div>
</div>
I have tried to build a fiddle to demonstrate this but I am not able to get it working. So sorry for no fiddle, but I thought someone may have seen this before.
FYI the row signup markup is just adding bottom margin to space out the rows a bit. Also, I've tried adding an extra col-md-1 to get to an even 12 both at the start and end of each row but it doesn't help. I don't have any extra markup for any of this - just using Bootstrap.
It would be great to also understand why the input boxes look relatively ugly (squarish and plain) on Chrome as well - perhaps this is related.
You need to set the width of the inputs to 100%. This makes them take up the width of their container. Otherwise, you are letting the browser determine the default width of the inputs. You can do this manually, or add the bootstrap class form-control to each input.
See it in action in this demo bootply
What I am trying to do is have a lot of cards displayed on the screen. When you click them, they should rotate and change their color.
The problem I have is that no matter which card I click, only the first one changes, instead of the one being clicked.
Here is a fiddle:
http://jsfiddle.net/GZ8zr/2/
html:
<body>
<div class="pane">
<input type="checkbox" id="button">
<label class="card" for="button"></label>
<input type="checkbox" id="button">
<label class="card" for="button"></label>
<input type="checkbox" id="button">
<label class="card" for="button"></label>
<input type="checkbox" id="button">
<label class="card" for="button"></label>
</div>
</body>
css:
input
{
width:100px;
height:100px;
display:none
}
.card
{
width:100px;
height:100px;
background:red;
display:block;
transition: background 1s, -webkit-transform 1s;
}
input:checked +.card
{
background:blue;
-webkit-transform: rotateX(180deg);
}
thanks
Your problem is you're using the same ID on the three inputs and labels. As per W3C spec, IDs must be unique on a page. And that's what the for attribute is expecting. So change your code to look like this:
http://jsfiddle.net/GYatesIII/GZ8zr/4/
You have the same id "button" three times. Therefore - at least on my browser and presumably yours too - each label is for the first checkbox. AFAIK this behavior is also undefined, since the standard expects unique ids for any given page (see below).
This fork of your fiddle with the display:none removed for the checkboxes demonstrates that clicking on any of the labels causes the first checkbox to be toggled.
This fiddle, on the other hand, demonstrates your code working properly when the ids are unique.
Also note that the HTML standard specifies that ids must be unique:
id = name [CS]
: This attribute assigns a name to an element. This name must be unique in a document.
The problem is that your inputs and labels are all targeting just the first input tag - which is incorrect. Here is a working demo: http://jsfiddle.net/GZ8zr/6/
If your input has id "button", then no other inputs can have that id. Even if you do that, the first input checkbox will be checked - html itself enforcing that there is just one unique ID every html page.
HTML:
<div class="pane">
<input type="checkbox" id="button1">
<label class="card" for="button1"></label>
<input type="checkbox" id="button2">
<label class="card" for="button2"></label>
<input type="checkbox" id="button3">
<label class="card" for="button3"></label>
<input type="checkbox" id="button4">
<label class="card" for="button4"></label>
</div>
</body>
All cards must have a unique identifier. You are clicking on a card and CSS is running on the first thing that the class is applied to (in this case the first card). I would use jquery to select the specific card you want the class applied to -> $(this). Hope that helps.
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>