Giters

knownasilya / ember-toggle

Checkbox based Toggle Switches for Ember

Home Page:http://knownasilya.github.io/ember-toggle/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Issue with toggle width & labels

Techn1x opened this issue · comments

commented

So I just installed this addon, looks pretty swish, great job!

However, the following code results in a toggle that looks like the screenshot below it;

{{x-toggle value=isLive onToggle=(action (mut isLive)) size='large' showLabels=true onLabel='Live' offLabel='History' theme='default'}}

You can see that the "Live" label is aligned next to the end of the toggle, rather than after the entire toggle container.
temp2

Here's an ember-twiddle showing the issue
https://ember-twiddle.com/306112700222db6884344a56a24cccd3?openFiles=templates.application.hbs%2C

I was able to solve this by adding width:auto to x-toggle-container (this overrides the element's set value of width:4.4rem; )

Have I done something wrong? Any idea why I had to specifically declare width:auto to get this to work?

Occurs in both Edge and Chrome

Thanks!

commented

Can you give the master branch a go? ember install knownasilya/ember-toggle

commented

So there seems to be something strange going on here. Using the width:5.7rem change that you made works well in the twiddle I linked, but doesn't fix the issue in my webapp - it helps, but it is still not quite right.

my webapp, large, 4.7rem
untitled1

my webapp, large, 5.7rem
untitled2

But the problem for me in my webapp isn't just the 'large' size, it occurs for both 'medium' and 'small' as well (although it's mostly fine for small, only slightly mis-aligned)

I have noticed that my toggles on my webapp for 'large', 'medium' and 'small' are substantially smaller than those shown in the demo page, and also smaller than in the ember-twiddle I linked, could this be somehow related?

I thought it might be something to do with DPI scaling (I run 4k @ 150% scaling) - however placing this back to 100% made no difference.

Thanks for looking into it - not urgent since I have a simple workaround but it would be good to get to the bottom of it

commented

Sizes are relative to main font-size

commented

Ok, so I can see in my html element that font-size is set to 10px, thanks to bootstrap. What should it be set to for this to work correctly?

I set width:5.7rem on the x-toggle-container, and then I tried a bunch of font-size values on the html element, the toggle now changes size, but each time "Live" is still not correctly aligned. Setting a width:6.7rem works well though

commented

Are there any styles on your page that conflict with the sizing of the container in which the toggles are? Maybe try putting your other styles into the twiddle?

commented

Did you end up fixing it?

I wonder if sizing should be revisited, maybe a fixed size instead.

commented

Sorry, I got a bit sidetracked after my last comment. I should be able to test a few things again tomorrow, and check to make sure it's not my stylesheet doing something funky

commented

Sorry for the delay, had a busier than expected weekend

Doesn't seem to be my stylesheet unfortunately. I disabled font-size in <html> and <body> elements, and then went through the rest of my elements from the top down to the toggle element itself and searched for any other font settings that might interfere, which there were none.

What about setting width:auto on x-toggle-container for all toggle sizes, rather than using an rem size? Because that seems to work well, and still allows for dynamic sizes for the rest of the elements

commented

@Techn1x could you submit a PR?

commented

Sure. I just wasn't sure if my solution of width:auto was the best way to tackle it or if it would have any knock-on effects to other switches :p I'll try and get a PR done & test it with all the switch types in the next 24 hours or so