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.
Related
I'm trying to get a css switch for checkboxes to work. An example can be found here:
https://www.w3schools.com/code/tryit.asp?filename=FWCNHR9N3EYO
The switch with two input elements inside the label element does not work on ie/edge. As this code is generated, I can't change this order of the elements. But there must be a css statement that ie/edge interprets different from other browsers.
This works on ie/edge:
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
This does not work in ie/edge:
<label class="switch">
<input type="hidden">
<input type="checkbox">
<span class="slider"></span>
</label>
How can I fix this?
Important: The order of the HTML elements cannot be changed as it automatically generated.
Thanks in advance!
Best regards
Roberto
Try to put input after span class like below may solve your issue.
<label class="switch">
<input type="checkbox" checked/>
<span class="slider"></span>
<input type="hidden">
</label>
By this way it is working in both IE and Edge.
You can make a test on your side that it is working as per your requirement or not.
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'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.
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 -->
I'm styling a form that was already marked up (made some markup changes), and I normally work in Firefox to style so I can use firebug and the web developer toolbar.
On this project, I noticed that my styles are displaying quite differently for one particular area (several elements) in webkit based browsers Chrome and Safari, than in Firefox (we won't even get into Internet Explorer, although it is siding with the Firefox display).
I can't figure out though why the styles are displaying so differently. Normally there is some rule that I'm neglecting that Firefox just takes for granted, and the others need it specified. But here I'm not getting why it's displaying this way. In particular I'm referring to the bottom area of the form where users can enter their contact info, then submit the form. I'll attach screen shots for reference as to the discrepancy.
Here's the URL so feel free to check it out on your own. Although be advised that this is a production page (already released) so if you try out the form, you WILL BE added to CURE's contact database.
http://www.helpcurenow.org/survey2010
Here's the screen shots:
Firefox (the way I intend it to look) alt text http://static.helpcurenow.org/images/test/firefox.jpg
Chrome, and then Safari - strange change to submit button alt text http://static.helpcurenow.org/images/test/chrome.jpg
alt text http://static.helpcurenow.org/images/test/safari.jpg
As a bonus, if anybody wants to help me with figuring out why on earth IE7 wants to not show the background behind the questions only, and how to fix that I would be much obliged!
Thanks very much.
Your <ol> is not closed, which makes webkit place the submit button inside the <fieldset> in an attempt to fix up your code.
FF and Webkit browsers do have a few differences, I have encountered them as well, especially with forms!
I solved it by splitting my CSS to target the two browsers with the CSS Browser Selector script. Worked wonders, just set some things differently for Webkit and fixed the whole thing.
Do you have a live example or some source code to post up so we can help you more with your IE7 issues as well?
Hope that helps.
Edit:
<ol>
<li class="contact-info">
<label class="field-required" for="first_name">First Name</label>
<input type="text" size="35" maxlength="250" name="first_name" value="" id="first_name" />
</li>
<li class="contact-info">
<label class="field-required" for="last_name">Last Name</label>
<input type="text" size="35" maxlength="250" name="last_name" value="" id="last_name" />
</li>
<li class="contact-info">
<label class="field-required" for="email_address">Email Address</label>
<input type="text" size="35" maxlength="100" name="email_address" value="" id="email_address" />
</li>
</fieldset>
<!--TransactionFields section end-->
<script language="JavaScript" type="text/javascript">
...
</script>
<div class="button-row">
<input type="button" name="SubmitButton" id="SubmitButton" value="Submit" onclick="SubmitForm425952(form);" class='HtmlButton' />
</div>
</form>
<!--form javascript-->
<script language="JavaScript">
...
</script>
NO OL
</div></td></tr>
</table>
</div>
<!--End Featured Content-->
Your <ol>hasn't been closed after the second script tag.
You may have forgotten -moz specific css rules.
For example - to use box-sizing you may have to specify -moz-box-sizing
Have you used browser reset css. Different browsers have different default styles for various elements, the reset CSS resets all these default styles so that stuff looks similar in all browsers.