I am using mdl-checkbox and a text on the right side of the checkbox.
I would like to switch the order of these two components in case of RTL languages (text to the left of the checkbox) but I can't move the text to the left (it is always on the right).
I tried many variations of "dir=rtl", direction:rtl, align, etc.. but the text remain on the right side.
I also tried using some CSS options but I still failed to switch the order.
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input id="MdlCheckBox" type="checkbox" class="mdl-checkbox__input" />
<span class="mdl-checkbox__label">My Text</span>
</label>
JSFIDDLE Example
How can I easily switch the order between the text and the checkbox without affecting the rest of the page?
All other components on the page behave fine in RTL languages.
Thanks!
Please check the links given below. These might help you creating check boxes.
Github Link: I have not used but you can check it. May this one also helps you.
RTL CDN for MDL : I have created snippet using this.
Check this one also
#a {
width: 90px;
}
<link href="https://cdn.rtlcss.com/mdl/1.2.1/material.rtl.min.css" rel="stylesheet" />
<script src="https://cdn.rtlcss.com/mdl/1.2.1/material.min.js"></script>
<div id="a">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
<span class="mdl-checkbox__label">Checkbox</span>
</label>
</div>
After making diff with material.rtl.min.css with material.min.css I found that the following CSS solve the problem:
.mdl-radio.is-upgraded, .mdl-checkbox.is-upgraded{padding-right:24px}
.mdl-radio__outer-circle, .mdl-checkbox__box-outline{right:0;}
.mdl-radio__inner-circle {right:4px;}
.mdl-radio__ripple-container, .mdl-checkbox__ripple-container{right:-10px;}
JSFIDDLE Solution
Thank you all for your help!
Related
So i am trying to add radio button on my survey form and the button and the text is completly in different positions so here is a picture of how it looks --> enter image description here
i tried display: inline; but still nothing changed
The below code will work as you expected. Just add necessary attributes like name and for.
<p>Would you recommend this survey to your friend:</p>
<input type="radio" name="test" value="yes">
<label for="test">Yes</label><br>
According to the picture, your input tag width is 100%, that's why you are facing this issue. Add class inside input and use this CSS your problem has been fixed.
<style>
.inline-radio{width: auto;}
</style>
**HTML**
<p>Would you recommend this survey to your friend:</p>
<input type="radio" name="test" value="yes" class="inline-radio" >
<label for="test">Yes</label>
I have this site:
http://www.les-toiles.co/shop/amandine-dress/
I put a picture to understand better what I want.I want to position these sights integral to be in line with the "in stock".
This is code HTML:
<div class="single_variation_wrap" style="">
<div class="single_variation">
<p class="stock in-stock">Only 2 left in stock</p>
</div>
<div class="variations_button add-cart">
<div class="cart-number">
<span></span>
<div class="quantity">
<input type="number" step="1" name="quantity" value="1" title="Quantity" class="input-text qty text" size="4" min="1" max="2">
</div>
</div>
<button type="submit" class="button single_add_to_cart_button alt btn-block">
<i class="icon-cart2"></i>
Add to cart
</button>
</div>
<input type="hidden" name="add-to-cart" value="1726">
<input type="hidden" name="product_id" value="1726">
<input type="hidden" name="variation_id" value="1922">
</div>
How can I resolve this with CSS?
I tried to add this CSS code, but unfortunately not working
.cart-number {float:left;display:inline-block;}
this is not just an easy quick thing that you can get. There are much more things that need to changed. Let me see how far can I explain. Refer the attached images. For this, you should use the 'Chrome Dev Toolbar' or Firebug of Firefox, so that it helps.
First, the div block of your Wishlist button is completely outside the FORM element. So you can't make it inline, unless you move it inside the FORM element. See the 1st Image.
Now I have moved the DIV block of your Wishlist button inside the FORM element and have modified CSS for many classes and DIVs, definitely as INLINE, for demonstration. You need to really work hard to put this as modular as possible. I am sure you'll figure that out. In the next image, You'll see the effect as you wanted and see the CIRCLED section for the added or edited CSS code
Add display:inline-block; to both .button and .cart-number. It tells the elements to position themselves on the same line, and hopefully with this method you should't need to use float.
Here is some code I modified from this nifty site:
http://jsfiddle.net/Ajhka/
I have all the elements styled with a checkbox images,..fonts, colors etc.
I just don't know how to do the layout. I don't have a strategy. But what I want is only slightly different from the fiddle.
I want the Title and Content Text aligned like they are but I went them placed to the right of the check boxes, where the title is at the same height as the check box. This would make most sense and be the most readable.
How would I go about doing this?
Here's my version: http://jsfiddle.net/Ajhka/5/
I didn't change your CSS at all - just the HTML.
<form id="privacy">
<div>
<input type="radio" id="radio1" name="rdo">
<label for="radio1"></label>
<span class="privacy_title">Normal</span>
<span class="privacy_content">When you add a bookmarks it is posted to the feed. You have a public page which can be viewed by non-members.</span>
</div>
<div>
<input type="radio" id="radio2" name="rdo">
<label for="radio2"></label>
<span class="privacy_title">Private</span>
<span class="privacy_content">The bookmarks you add are not posted to the feed. You do not have a public page.</span>
</div>
<div>
<input type="radio" id="radio3" name="rdo">
<label for="radio3"></label>
<span class="privacy_title">Secret</span>
<span class="privacy_content">Same as private and all of your data is encrypted using NSA approved algorithms.</span>
</div>
</form>
To get this layout I swapped your <p> tags for <span>. Then I wrapped each set of radio/title/text in a <div>. You could tweak spacing a bit with CSS if you so chose.
I've updated your fiddle with a working example
http://jsfiddle.net/Ajhka/2/
Looks like this is what you're looking for. The 1st row is with the header next to the checkbox and the description below it.
The other two are with all the text next to the checkbox.
If you want have all the others as example row 1. move the <div style="clear: both"></div> 1 row up.
If you want the description text to be aligned with the header text. use margin-left on your <p> element to align it or put it all in a <table>.
I have made an html wizzard for making order. There are four steps, in each is bunch of radio buttons. I redesigned each radio button label to large button (and hidding the radio input itself). This all work greatly on classic PC. But I've run into problem with mobile device (iPHONE & iPAD, I can't test it on other devices, because I don't have any), which are unable to select the radio button.
I've found only one notice of this problem here on stackoverflow, but the solution published there isn't function either.
The original inspiration comes from apple online store for selecting differnt color of device.
My example code:
<label class="option" for="edit-term-worker">
<input id="edit-term-worker" class="form-radio" type="radio">
<span class="worker-name">Sandra</span>
</label>
It's there need some JS, or I'have some flaw in my code?
Thank you all for your help.
Have you tried this?
<input id="edit-term-worker" class="form-radio" type="radio" />
<label class="option" for="edit-term-worker" onclick="">
<span class="worker-name">Sandra</span>
</label>
EDIT: Added an empty onclick, according to this that should do the trick: HTML <label> command doesn't work in Iphone browser
Note that you shouldn't put the radio button into the label tag, it should be outside.
I have created some simple Javascript to make a checkbox seem re-skinned that hides the checkbox and basically just pulls in a background image through CSS to show the checks/unchecks.
Is this HTML/CSS for hiding the checkbox accessible? I want to be as compliant as possible and am uncertain about the hiding and my label. Currently this is how it looks..
CSS:
.checked:hover, .unchecked:hover
{
background-color: #242424;
}
.checked
{
background-image: url(check.bmp);
color: #ffb500;
}
.unchecked
{
background-image: url(unchecked.bmp);
}
HTML:
<label for="cbAll" class="checked" id="lblAll">
<input id="cbAll" type="checkbox" name="cbAll" checked="checked"/>
ALL </label>
If you're worried about accessibility, I'd say that looking at others' (especially professionally written) code would be the best. jQuery UI is the one that immediately comes to mind. If you look at the code generated by jQuery UI's button widget, part of whose purpose is to serve as a checkbox replacement.
Original HTML:
<input type="checkbox" id="check" /><label for="check">Toggle</label>
Generated HTML:
<input type="checkbox" id="check" class="ui-helper-hidden-accessible" />
<label for="check" aria-pressed="false" class="[redacted]" role="button" aria-disabled="false">
<span class="ui-button-text">Toggle</span>
</label>
Notice the conformation to the WAI-RIA specification, with the correct use of the role attribute to indicate the role taken on by the label element as a button (the original input element is hidden, and thus ignored by screenreaders). You should have a look at the specifications if you want to know how to build things like this in an accessible manner.
Take a look at http://lipidity.com/fancy-form/
You can see how they do it and incorporate it in your own implementation.