Geek Answers Handbook

Bootstrap checkbox and button label shortcut in Google Chrome

I had a problem with some Bootstrap inline checkboxes and radio button shortcuts, but only in some cases Chrome. The website I'm working on is www.bostonsparkling.com.

Here is a screen shot of the alleged behavior and what it looks like in the following environments:

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

Valid Label Behavior: Without Word Wrap

The following is a screen shot of disturbed behavior that manifests itself in the following environments:

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

Incorrect tag behavior: unnecessary Word cover art

It looks like the checkbox and the text of the radio button label are unnecessarily wrapped, but only in some cases Chrome. Here are some troubleshooting information ...

  • Bad behavior was not always present - it slipped on me about a week ago, and I just could not isolate offensive changes.
  • There is no connection between my Mac and my PC showing bad behavior besides being physically in the same room.
  • I tried disconnecting my Google account from Chrome on both machines and disconnecting all my extensions, thinking that maybe some special case with the extension was screwing up layouts, but without cubes.

So I'm interested in two things ...

  • Does anyone else experience bad behavior in the second image or is it just me?

  • Where did I mess 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>

CSS related to forms ...

 /* 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 break the rules of publication, or my code sucks, heh - this is my first website, for example, a decade. I appreciate the help!

PS I can’t insert images or send more than 3 hyperlinks without 10 repetitions - sorry .: [

+6
source share
2 answers

Is this a bug with Chrome 24?

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

+4
source

Try white-space: nowrap; in CSS .checkbox.inline . This will ensure that there is no word wrap in any environment.

+10
source

More articles:


All Articles