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.
Related
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.
Some help with CSS please!
I was using CSS to make my register form looks nice, but then I find out that my form was not moved right or left with the other page elements such as my background image when I was maximizing or minimizing the window of the explorer (my page was aligned to center of explorer window). So i.e when my window size maximized my background image was changed, but the form remains in the first position. Any ideas how to fix this?
My HTMLcode is:
<div "class="homepageTable">
<form action="#" method="post">
<input type="text" size="25" name="first_name" placeholder="first name"><br/>
<input type="text" size="25" name="last_name" placeholder="last name"><br/>
<input type="text" size="25" name="email" placeholder="email"><br/>
<input type="text" size="25" name="retype_email" placeholder="re-type email"><br/>
<input type="text" size="25" name="password" placeholder="password"><br/>
<input type="text" size="25" name="retype_password2" placeholder="re-type password"><br/>
<input type="submit" name="submit" value="sing up!">
</form>
</div>
Any ideas what the CSS should be in order to have this form moved together with the other page elements when the window minimized or maximized?
We can't see your full code so we can only guess at what the rest of your page looks like.
You probably need to align the background and the form in the same way: Align your background image centrally, or align whatever element it is in to centre, if this is possible.
Alternatively, place the background in the same container element as the form, align that, and have them move together when the window changes.
Any ideas what the css should be in order to have this form moved
together with the other page elements
No, not unless you show us the other elements. But here’s how to center the form:
.homepageTable{margin: 0 auto;}
I have the following form
<form id="enter_email" method="post" action="">
<input type="text" value="enter email" />
<input type="image" src="images/buttons/join-now.png" />
</form>
I was wondering if I can delete the value that shows on the text box by just css :focus alone,
thanks
No you have to use script for that.
<input id="txt1" type="text" value="test value" onfocus="this.value='';" />
There are ways in CSS to prepend/append content to a certain element, but nothing for modifying attribute values. But, if you really want to make use of CSS for this, you can have text as a background-image to that input and just change the background on :focus.
No, you cannot change data using CSS. You would have to use JavaScript and assign the value of the element to an empty string.