CODEWITHSUNDEEP
csstwitter-bootstrap
Gandalf
Gandalf

Reputation: 13693

Word wrapping some text to not occupy empty space

I have this card

<div class="card">
      <div class="card-body">
      <div class="ct">
        Health & safety
      </div>
   <div class="facetHolder mt-3">
      <div class="row">
      <div class="col-md-9">
      <input type="checkbox" /><span class="ml-3 dtext">Properties with additional health & safety measures</span>
      </div>
      <div class="col-md-3">
      <span class="badge badge-primary float-right">10</span>
      </div>
      </div>
      </div>
      </div>
    </div>

and this is the fiddle https://jsfiddle.net/dzfo41rk/5/

This is how it looks

facet image

The text on the right moves too much to the left and occupies the empty space not occupied by the checkbox.

I tried setting the whitespace

.dtext{
font-size:14px !important;
 white-space:normal !important;
    word-wrap: normal !important; 
}

but that is not helping. How can i ensure the text do not overflow to the left to occupy space around the checkbox?

Upvotes: 0

Views: 323

Answers (3)

mahan
mahan

Reputation: 15055

  1. Use label instead of span
  2. Wrap both label and the input with another element.
  3. Use .form-check
<div class="form-check">
  <input type="checkbox" class="form-check-input" id="exampleCheck1">
  <label class="form-check-label ml-3 dtext" for="exampleCheck1">
    Properties with additional health & safety measures
  </label>
</div>

https://jsfiddle.net/odr04tsj/

For more info, read Checkboxes and radios

https://getbootstrap.com/docs/4.6/components/forms/#checkboxes-and-radios

Upvotes: 1

Friedrich Benderburg
Friedrich Benderburg

Reputation: 26

You need to put your text and checkbox in different columns of row. As now, checkbox with inline-block style looks like a part of text. Other problem is big paddings of columns. Create them smaller with p-classes or change them with your stylesheets. And the third thing, as epascarello said, you need labels for the checkboxes.

<div class="col-md-3 px-1">
  <input type="checkbox" id="stackCheck"/>
</div>
<div class="col-md-9 px-1">
  <label for="stackCheck" class="dtext">
    Properties with additional health & safety measures
  </label>
</div>

Look at the fiddle: https://jsfiddle.net/7Lfbmj6t/1/

And please, don't use !important without necessary.

Upvotes: 0

androidoverlord
androidoverlord

Reputation: 301

I think you're looking for the property white-space: nowrap; on any text containers. This will prevent the line breaks & force the text to one line.

Upvotes: 0

Related Questions