Skip to content

New flip toggle cutting off the edge of a word #3802

Closed
cfjedimaster opened this Issue Mar 12, 2012 · 15 comments

5 participants

@cfjedimaster

I've got the following flip toggle:

        <div data-role="fieldcontain">
            <label for="gender">Gender:</label>
            <select name="gender" id="gender" data-role="slider">
                <option value="0">Male</option>
                <option value="1">Female</option>
            </select>
        </div>  

Previously this worked fine, but in 1.1RC, the end of Female gets cropped off. See screen shot here: http://www.evernote.com/shard/s3/sh/af7e6255-7fde-4663-b330-e27fb76a063f/aaa44b8eab4e46dc97d6ed49037c6e29

@agcolom
jQuery Foundation member
agcolom commented Mar 13, 2012

And here's the jsfiddle to illustrate with latest...
http://jsfiddle.net/agcolom/ha8CC/13/

@toddparker

We have to set a width on the control but if you have longer words, the CSS will need to be tweaked.

We document how to do that here:
http://jquerymobile.com/test/docs/forms/switch/

The control is proportionally scaled, so if you're using longer words with it, you can just add a line of CSS to set it to the width you desire. For example, div.ui-slider-switch { width: 9em } will produce...

We could make the default width of this a bit wider, but we'll never have a "perfect" width so it's a guess really.

@agcolom
jQuery Foundation member
agcolom commented Mar 13, 2012

@toddparker Brilliant! I missed that... (I was still looking at RC1 docs!) Are we happy the docs cover this? (I am :-) )

@toddparker

Just discussed this with @Wilto and right now, the switch comfortably fit 3 characters, 4 is a bit tight. Think we may bump up the width so it roughly fits 5 characters. Seems like a sensible default.

@Wilto Wilto was assigned Mar 13, 2012
@cfjedimaster

Man, that sounds real shakey. "longer words" is incredibly vague. Hmpth. I suppose we could still do it in the tag though, right?

Will that work?

@agcolom
jQuery Foundation member
agcolom commented Mar 13, 2012

@toddparker ok, if the new default becomes fits 5 characters, I am happy to add to the docs how to make it smaller (i.e. On-Off example), if you think that'd be a good idea.

@cfjedimaster

Nope - that doesn't work. .

@cfjedimaster

Ok - tried the CSS - it too didn't work - http://jsfiddle.net/Au9zy/

@Wilto
Wilto commented Mar 13, 2012

@cfjedimaster : Unfortunately, we’ve yet to find a way of making this work reliably without a fixed width on the overall container—despite appearances, it’s a fairly complex control. “Longer words” is intentionally vague in that we don’t know what labels you’ll be using, naturally. To change that width, you’ll want to add div.ui-slider-switch { width: 9em } to your stylesheet, as outlined in Todd’s link above, and you’ll need to do so according to the width of the labels you’re using.

@agcolom : No worries—I’m changing the default width to be slightly larger, and I’m adding a heading to the docs calling out the details on changing that width. I’ll add a blurb about making it smaller, as well. Thanks!

@cfjedimaster

Wilto - I did add it to my style sheet (see jsfiddle link) - was anything done wrong?

@Wilto
Wilto commented Mar 13, 2012

@cfjedimaster : Ah, there’s an issue, then—likely a regression, as adding !important to the width in your jsfiddle solves it. I’ll get that sorted.

@cfjedimaster

I can confirm that worked. Thanks all.

@cfjedimaster

I just want to add though - I think 5 is still a bit too small. I'd vote for 6-7.

@agcolom
jQuery Foundation member
agcolom commented Mar 13, 2012

@Wilto yes it's that case again where without the !important it only works when the window is small...

@scottjehl

I checked out your example, and it looks like the reason you're in need of more specificity is because the switch is inside a fieldcontain control, which happens to trigger a parent selector rule for .ui-field-contain div.ui-slider-switch { width: 5.5em; }.

I'm not sure if that rule is needed anymore, since we usually use it to make a control narrower by percentage when there's room to stack it next to a label. In the case of this control, the width should stay the same for both orientations, so i think we should wipe that rule. Anyone want to grab that?

@scottjehl scottjehl closed this Mar 14, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.