The button isn't responsive to the text. about css-toggle-switch

[ghinda]

If you change the width of the .switch-light or the .switch-toggle, the inner elements will re-size themselves since they use percentages for the widths.

[danieljmg]

But the width isnt the problem, It's the height. When the screen is smaller the text overflow from the bottom, but the bottom keep its original width.

[ghinda]

Same goes for the height. You can set it on .switch-light or .switch-toggle.

[danieljmg]

I'm sorry but I've already tried it even adding "!important" and didn't work. Only thing that works is set the height by pixels, and use different media queries. Regards.

[ghinda]

Here you go:
http://jsfiddle.net/ghinda/hqt5r1d4/

[danieljmg]

Yes, that's what I've said that works...toguether with media queries I can adjust the size for the text. But appart of this workaround there's no easy way that the button adapt it's height to the text.
Here you can see what I mean, just change the width of the screen and gets even worse:
http://jsfiddle.net/jnty0gk8/

[ghinda]

Yeah, that's right. I can't find a fix for it right now, but if you have any ideas I'll gladly take a pull-request.

[danieljmg]

I'm still investigating. I've found that by default bootstrap buttons doesnt adjust the height, unless you add this CSS line "white-space: normal !important;".
The problem is that in the way css-toggle-switch is developed, doesn't use the height of the label element but a specific one.
To resume, something like this:

    <input id='sw2t1' name='viewt' type='radio'>
    <label for='sw2t1' class ="btn btn-success newcss" onclick=''><span>Si kjasisaio uoahs uah ahs  uah aush auha usa huahs uahs uash uash uash uah uah auh uah suhau shsasj
                isjdiojsdioj psijdisji isjd isj isjd isjd isjd isjd isdj sij</span></label>

It's adapted to its content, with newcss class:

.newcss{
white-space: normal !important;
}

Do you have any idea of how to make this works with these news? I'm still trying but I cannot see how to do it, maybe the tag must be change for button classes in the labels.

[danieljmg]

I think I'll getting closer, .newcss class applied to tag inside a label works, but it just adapt the text. If toguether in .switch-toggle input + label, I erase float: left; adapt perfect but the text isnt in its position...anyway, closer closer.

[ghinda]

I'm working on a new version right now that will allow you to use multi-line text with the .switch-toggle. I'll probably push it in the next hour.

[ghinda]

I've released 3.1.0, which supports multi-line text on .switch-toggle.

Here's a demo:
http://jsfiddle.net/ghinda/jnty0gk8/5/

[danieljmg]

Isn't still fixed for 2 elements ( a simple switch-toggle ) and even results on totally broken layout, not usable. I'm trying to solve it right now.

[ghinda]

Can you share a jsfiddle with the issue?

[danieljmg]

Sorry I thought that I've done it, I forgor to paste it: http://jsfiddle.net/010o0mqq/1/

[ghinda]

Looks ok to me. Are you sure it's the correct url?

[danieljmg]

I paste it wrong before, i updated a minute ago, con you double check? Sorry for my stupidity ;)

[danieljmg]

Adding a width:100% to label+input gives full size and correct layour for at least two lines text but there's troubles with short text as ie: "YES" and "NO", where the width fit instead of take the full size of the block.

[danieljmg]

It happens with short text in switch3, 4 and 5 as well.

[danieljmg]

Ok i fixed it, im gonna send a pull request. Thankyou for your support.

PD:Done an tested on main web explorers.

[danieljmg]

I think that you haven't merged my pull-request because in 3.1.1 you still have the problem(try with a YES, NO buttons, their width is not even a 5% of the layout)
Also, if you add and img in the label, in my version adapts perfect, in yours the image is full size, i just added two CSS lines to version 3.1.0. so no need to roll-back or remake code from 3.1.0.
Regards.

[ghinda]

Seems fine to me:
http://jsfiddle.net/ghinda/010o0mqq/15/

Can you maybe update the fiddle with your issue?

I was unable to merge the pull-request because you edited the /dist files directly, instead of the source Sass files. You'll need to install Node.js and Grunt, edit the .scss file, and re-build the /dist files.
Don't edit anything in the /dist folder directly, as everything there is generated by Grunt.

I'm going to update the README file with more details on this.

[danieljmg]

I can see the problem in your fiddle, the width must be at 100% like for 3,4 or 5. In chrome works, but not in firefox. Anyway, what if I tell you here the lines I added and that's all? I have no time now for github(I work with mercurial and bitbucket). The lines are " width: 100%; " in " .switch-toggle " and " width: 50% " in " .switch-toggle * " if remember well. Thankyou and sorry for so much bothering ;)

[ghinda]

I have added width: 50% to the default (two item) .switch-toggle. I haven't added width: 100% to .switch-toggle because I don't necessarily want the switch to take up the entire width.
You'll have to set a specific width for the toggles on your side.

It does seem that Chrome is settings width: 100% for display: table, while Firefox adjusts the width depending on the content. Still, even in Firefox, the columns will always have equal width.
Firefox's way of handling it seems a bit better to be, but either way, setting a width for the .switch-toggle on your end will fix the issue you're having.