Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

btn-group that wraps randomly #3596

Closed
Papipo opened this issue May 25, 2012 · 6 comments
Closed

btn-group that wraps randomly #3596

Papipo opened this issue May 25, 2012 · 6 comments

Comments

@Papipo
Copy link

Papipo commented May 25, 2012

hi have a button group which is pulled to the right with .pull-right

Sometimes, one of the button wraps (just sometimes, and that doesn't make a lot of sense). Check it out: https://www.dropbox.com/s/kpbmwit6u78yd5s/btn-group.png

@mdo
Copy link
Member

mdo commented May 25, 2012

Yup, this is an issue with the browser computing margin and width I believe. There was a pervious issue open about this awhile back and the only thing I can suggest is using inline-block on the individual buttons or setting a fixed width.

@mdo mdo closed this as completed May 25, 2012
@Papipo
Copy link
Author

Papipo commented May 25, 2012

The weird thing is that it happens like 20% of the time, just sometimes when refreshing the page.

@Papipo
Copy link
Author

Papipo commented May 26, 2012

BTW, the inline-block tip doesn't work :/ (it was my preferred solution)

@cyphun
Copy link

cyphun commented Aug 6, 2012

Perhaps this isn't the best solution, but this is working for me. I am just using some jQuery to fix it, when the problem arises. All you do is have to add the class btn-group-pull-right to anything this has the problem, or simply change the selector to whatever you want to target.

$(function(){
    // fix for the btn-group that is pulled right
    $('.btn-group-pull-right').each(function(){
        var currentWidth = $(this).width();
        var innerWidth = 0;

        $(this).children().each(function(){
            innerWidth += $(this).outerWidth();
        });

        if(innerWidth > currentWidth){
            $(this).width(innerWidth);
        }
    });
});

I hope this helps!

@jclement
Copy link

We were able to get the results we wanted by adding a new "nowrap" CSS for btn-group that turns off "float". For btn-group's in tables we've just added the btn-group-nowrap class and it's fixed it all up.

.btn-group-nowrap, .btn-group-nowrap .btn {
white-space: nowrap !important;
float: none;
}

@socketwiz
Copy link

Thanks @jclement that worked for me as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants