Bootstrap checkbox and radio button label issue in Google Chrome
Asked Answered
P

2

6

I'm having an issue with some Bootstrap inline checkbox and radio button labels, but only in some instances of Chrome. The website I'm working on is www.bostonsparkling.com.

Here is a screencap of the intended behavior, and what it looks like in the following environments:

  • Safari on my Mac
  • Safari on my iPhone
  • Safari on my family's iPad
  • Google Chrome on my friend's Mac
  • Google Chrome on my friend's PC

Correct Label Behavior: No Word Wrap

The following is a screencap of the broken behavior, which manifests itself in the following environments:

  • Google Chrome on my Mac
  • Google Chrome on my PC

Incorrect Label Behavior: Unnecessary Word Wrap

It looks like the checkbox and radio button label text is wrapping unnecessarily, but only in some instances of Chrome. Here's some relevant troubleshooting information...

  • The bad behavior has not always been present - it snuck up on me about a week ago and I just couldn't isolate the offending change.
  • There is no connection between my Mac and my PC exhibiting the bad behavior, besides being physically located in the same room.
  • I tried disconnecting my Google Account from Chrome on both machines and disabling all my extensions, thinking maybe some special case with an extension was screwing up layouts, but no dice.

So I'm wondering two things...

  1. Is anyone else experiencing the bad behavior in the second image or is it just me?

  2. Where did I screw up?

Here are some relevant code snippets:

From index.html...

<form class="form-horizontal" id="estimate" action="#estimate" method="post">
...
<!-- Room Input -->
<div class="control-group">
    <label class="control-label">Which rooms need cleaning?</label>
    <div class="controls">
        <!-- Multiple Checkboxes -->
        <label class="checkbox inline">
            <input type="checkbox" name="kitchen" value="Yes">
            Kitchen
        </label>
        <label class="checkbox inline">
            <input type="checkbox" name="dining" value="Yes">
            Dining Room
        </label>
        <label class="checkbox inline">
            <input type="checkbox" name="living" value="Yes">
            Living Room
        </label>
        <label class="checkbox inline">
            <input type="checkbox" name="family" value="Yes">
            Family Room
        </label>
        <label class="checkbox inline">
            <input type="checkbox" name="office" value="Yes">
            Office or Study
        </label>
    </div>
</div>

Form-related CSS...

/* Flip the margins and padding on inline checkboxes and radios */
.checkbox.inline,
.checkbox.inline + .checkbox.inline,
.radio.inline,
.radio.inline + .radio.inline {
    margin-left: 0 !important;
    margin-right: 15px !important;
    padding-top: 0 !important;
    padding-bottom: 5px !important;
}

/* Less vertical padding between form elements */
.form-horizontal
.control-group {
    margin-bottom: 10px; /* instead of 20px */
}

Let me know if you need anything else, if I broke any posting rules, or my code sucks, heh - this is my first website in like, a decade. I appreciate the help!

P.S. I can't embed images or post more than 3 hyperlinks without 10 rep - sorry about that. :[

Panatella answered 17/1, 2013 at 0:13 Comment(0)
D
4

Is this a bug with Chrome 24?

https://github.com/twitter/bootstrap/issues/6599

Dissolve answered 24/1, 2013 at 4:47 Comment(1)
Oh snap! Yeah, that looks exactly like the behavior I was seeing. I had a hunch this may be on Chrome's end - thanks for the heads up.Panatella
I
10

Try white-space: nowrap; in your .checkbox.inline CSS. This will ensure no word wrapping occurs on any environment.

Isoelectronic answered 17/1, 2013 at 0:55 Comment(2)
Arrg, so I added another entry to my controls with a longer label and now it's exceeding the boundary of my well at certain window sizes :[. Gotta revert this for now, and looks like I'll have to wait for a fix as mentioned in biggreybars's post. At least it's not happening for everyone.Panatella
I added "white-space: nowrap;" to .inline-chrome-hack instead of .checkbox.inline to prevent from polluting the original codes.Satiate
D
4

Is this a bug with Chrome 24?

https://github.com/twitter/bootstrap/issues/6599

Dissolve answered 24/1, 2013 at 4:47 Comment(1)
Oh snap! Yeah, that looks exactly like the behavior I was seeing. I had a hunch this may be on Chrome's end - thanks for the heads up.Panatella

© 2022 - 2024 — McMap. All rights reserved.