I havent much experience on jquery mobile or related mobile UI frameworks, I am finding it difficult to align elements horizontally.
I want to horizontally align text field and select tag. so that they appear inline.
I tried data-type="horizontal" and data-inline="true". but they are not working.
Here's the code i am using,
<div data-role="controlgroup" data-type="horizontal">
<label for="cs" class="fieldLabel">option 1: </label>
<select name="cs[param_string_1]" id="cs[param_string_1]" data-inline="true">
<option>options</option>
</select>
<input type="text" data-inline="true" style="width:100px" id="cs[param_num_1]" name="cs[param_num_1]" />
</div>
Comments/Suggestions?
Tom's answer was useful. but that dint work exactly as per the need
I used following to get the required output.
<div data-role="controlgroup" data-type="horizontal">
<table>
<tr>
<td width="30%">
<select name="cs_abc" class="fieldLabel" style="width: 100%" data-inline="true" id="cs[abc]">
<option>...</option>
</select>
</td>
<td width="70%">
<input type="text" id="cs_xyz" style="width:160px" data-theme="d" name="cs[xyz]" />
</td>
</tr>
</table>
</div>
One can use layout grids for this (Refer here)
But layout grids may not give precise results, at least in my case i was not getting the needed alignment.
Some good fiddles were useful.
Take a look at Text inputs & Textareas.
It does not support data-inline on its own, but you can use data-role=fieldcontain instead:
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
As far as I can see you can't put multiple inputs next to each other using only jQuery Moblie...
<div href="#" data-role="button" style="margin:30px;">Adjust</div>
if you want to manipulate just right and left adjustments use style="margin-left=30px;margin-right=30px;"
...I am still learning the jQuery Mobile framework myself, so I know it is a pain when you just need to get something done, but you really should try to use what is already built within the framework, especially if you are going to build mobile friendly apps. Do yourself a favor and take the time needed to learn it.
Also, another tip; you need to stay away from using px values for sizing elements as that typically doesn't scale well on mobile devices, em values work best for cross platform use.
I have successfully used something similar to the following code to "inline" text input and select boxes with jqm. if you want the styles to be different - you can add the theme swatch letter after the individual ui-block element so that it looks something like ui-block-b or ui-block-c, etc. This is all documented here: http://demos.jquerymobile.com/1.0rc1/docs/content/content-grids.html
<div class="ui-grid-a">
<div class="ui-block">
<label for="cs[ps_1]" class="fieldLabel ui-hidden-accessible">option 1: </label>
<select name="cs[ps_1]" id="cs[ps_1]" data-mini="true">
<option>options</option>
</select>
</div>
<div class="ui-block">
<input type="text" style="width:10em;" id="cs[pn_1]" name="cs[pn_1]" />
</div>
</div><!-- /grid-a -->
Related
I have a page that uses Bootstrap 4 with a single input control that was working okay. My problem is when I add help it adds it on the same line rather than the next line beneath the control as I would expect.
My suspicion is it that it is a problem with input-group/form-group. Im finding the generally very good Bootstrap documenentation very unclear on how these two things fit together since Im using inputgroups as the field label.
This is the html
<div class="input-group">
<div class="input-group-prepend">
<label for="undoLocation" id="undoLocationlabel" class="input-group-text">
Find songs
</label>
</div>
<select class="custom-select" name="undoLocation" id="undoLocation" aria-describedby="undoLocationHELP">
<option value="0">
that are currently in the selected locations
</option>
<option selected="selected" value="1">
that were originally in the selected locations
</option>
</select>
<small id="undoLocationHELP" class="form-text text-muted">
When files have been moved by SongKong you can use this option to find files currently in the selected all location or find files that were originally in the selected location
</small>
</div>
and I have created a jsfiddle.
https://jsfiddle.net/paultaylor/g64v96fy/1/
According to Bootstrap discussion:
Block help text—for below inputs or for longer lines of help text—can be easily achieved with .form-text. This class includes display: block and adds some top margin for easy spacing from the inputs above.
However, you added it to a parent element with a input-group class, by nature will display with the group, inline. Additionally, you used an HTML default inline tag <small> which also displays, by nature, inline.
Per specs:
The small element should not be used for extended spans of text, such as multiple paragraphs, lists, or sections of text. It is only intended for short runs of text...
Even if you do what's recommended and wrap it in a <p> tag, the parent still defines the style, and input-groups by nature are inline.
So, it's recommended to move it outside of the div.
<div class="input-group">
<div class="input-group-prepend">
<label for="undoLocation" id="undoLocationlabel" class="input-group-text">
Find songs
</label>
</div>
<select class="custom-select" name="undoLocation" id="undoLocation" aria-describedby="undoLocationHELP">
<option value="0">that are currently in the selected locations</option>
<option selected="selected" value="1">that were originally in the selected locations</option>
</select>
</div>
<p id="undoLocationHELP" class="form-text text-muted">
When files have been moved by SongKong you can use this option to find files currently in the selected all location or find files that were originally in the selected location
</p>
Any suggestion on how to check why I get this black box instead of standard bootstrap dropdown? I know, may sound like stupid question, but bear this me...
I checked, there are no referenced css files that could break this functionality. The problem is that I can't right-click on that black box and select "Inspect" to see generated code, the black box disappears once I click on it (right or left). Similarly I cant use Chrome Dev Tools to inspect that element, it disappears.
Generated HTML code:
<form method="post" ng-submit="vm.executeAction('ReAssignWorkOrder')" class="ng-pristine ng-valid">
<div class="form-group">
<label>Service Provider</label>
<input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="vm.data.ServiceProvider" disabled="">
</div>
<div class="form-group">
<label>Re-Assign To</label>
<select class="form-control">
<option value="Someone1">Someone1</option>
<option value="Someone2">Someone2</option>
<option value="Someone3">Someone3</option>
</select>
</div>
<div class="form-group">
<label>Progress Note</label>
<textarea class="form-control ng-pristine ng-untouched ng-valid ng-empty" rows="4" ng-model="vm.woReAssign.ProgressNote"></textarea>
</div>
<button type="submit" class="btn btn-primary pull-left">Re-Assign</button>
<button type="submit" class="btn btn-primary pull-right">Re-Assign and Dispatch</button>
</form>
Same thing happens with html input date field:
UPDATE: Whoever voted to close the question - I dont understand the reason, dont you want other people to know it was Chrome bug ??
You are using chrome responsive view. some time chrome responsive view caused this king of problems . just exit the responsive view and resize chrome window. and you will not get this black box. there is not issue on your code.
I am using jquery steps and icheck with bootstrap. The problem I am having is with my jquery steps I can not get the icheck radio buttons to work. In the picture below when you try to change the radio buttons in the table nothing happens. But on the bottom of the picture I am using the same exact code and when you hover or select a radio button it is working perfect. I am thinking the css for the jquery steps has some sort of code that just appearing to make the radio buttons just look like there not selected. Is there a way to make sure my radio button are forced on top of any background image or use !important so that there functionality can be used correctly?
$(document).ready(function() {
$('.i-checks').iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green',
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>
<div class="i-checks">
<label>
<input type="radio" value="option1" name="a"> <i></i> Option one</label>
</div>
<div class="i-checks">
<label>
<input type="radio" checked="" value="option2" name="a"> <i></i> Option two checked</label>
</div>
<div class="i-checks">
<label>
<input type="radio" name="a" value="option2"> <i></i> Option three checked and disabled</label>
</div>
<div class="i-checks">
<label>
<input type="radio" name="a"> <i></i> Option four disabled</label>
</div>
js
https://jsfiddle.net/yf1q3scc/5/
In my fiddle I could not get the example exactly correct how I have it on mine. But you will notice that the radio buttons are still functionable on the bottom of the fiddle when you hover over or select one of them but not where I am using jquery steps. Any help with this would be greatly appreciated!
I had this fiddle with Bootstrap, jQuery Steps and iCheck working together https://jsfiddle.net/rpw2Lx41/
<div id="example-basic">
<h3>Step 1</h3>
<section>
<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>
</section>
<h3>Step 2</h3>
<section>
<p>Simple text.</p>
</section>
</div>
Of course my example it's a lot simple than yours, but we can say it is not a bug or an incompatibility problem like you're thinking this could be.
Besides, i realize that your code has a lot of markup errors. I'm sure if you rewrite your code, doing it step by step, and paying a little more attention you will be able to accomplish the expected result.
After pulling my hair out quite a bit this week, finally found it:
https://jsfiddle.net/xx9jr1z3/ shows the issue.
$('input').iCheck({
//settings
});
before $(...).steps(...) causes the iCheck inputs to not be clickable. Reversing them (steps before iCheck) corrects it.
I am seeing an issue when viewing a website in IE8 (but which works fine when using the emulation mode in dev tools in IE 11).
In modern browsers I see what I would expect:
But in IE, I see the following:
I've added the html5 shim and respond,.js as suggested in the docs, and I've tried wrapping the controls in divs to manually size them, but I end up with gaps between the inputs that look pretty bad. Is there something obvious that I'm doing wrong here?
<form class="form-horizontal" role="form" style="max-width: 500px">
...
<div class="form-group">
<label class="control-label col-sm-2">Phone</label>
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="SearchMethod" value="2" class="radio-inline" />
</span>
<input type="text" id="phone" class="form-control" placeholder="Phone" />
<input type="text" id="phoneExt" class="form-control" maxlength="4" placeholder="Ext" />
</div>
</div>
Your input group is invalid since it has two text input form-controls. Per the docs:
Basic example
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
We do not support multiple add-ons on a single side.
We do not support multiple form-controls in a single input group.
So you'll need to either hack together some custom styles, or restructure your form.
I'm using jquery mobile for my project. It automatically converts all radio buttons in its inputs with its styles. The major problem is that in different situations i have different number of buttons (it depends on user) with its different width and i need it every time center.
<div data-role="fieldcontain" id="inline" >
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
{section name=i loop=$data['input'] start=0}
<input name="position" id="radio{$smarty.section.i.index}" value="{$data['input'][i]}" type="radio" />
<label for="radio{$smarty.section.i.index}">
{$data['input'][i]}
</label>
{/section}
</fieldset>
</div>
As you see each button has his size (for example Up and Zoom In are different). As i said before - i don't know what buttons will be for each users - it depends on their own settings, so i need somehow automatize process of centering it - is some ideas?
You could try it with <a> instead of <input> as done in the documentation, if at all possible in your situation.