Responsiveness of Checkbox with an input group’s addon

user_10348758 0
Viewed 44

This is the part of the HTML file of my Angular project, where I am using a checkbox with an input groups addon

<td
   style="width: auto; word-wrap: normal"
   class="text-wrap"
   >
   <fieldset>
      <div class="input-group mb-3">
         <div class="input-group-prepend">
            <div
               class="input-group-text"
               style="height: 30px"
               >
               <input
                  type="checkbox"
                  id="checkbox-addon1"
                  class="form-check-input"
                  />
            </div>
         </div>
         <input
            type="text"
            class="form-control"
            placeholder="Compare data"
            style="height: 30px; width: 80px"
            />
      </div>
   </fieldset>
</td>

When seeing this on desktop, it is showing in a correct way -

enter image description here

But when the same thing I am seeing in mobile view, I see like this

enter image description here

In mobile view, checkbox and text are not coming in the same line. Can anyone please help me to resolve this issue?

Edit 1:

I have defined the heading of this table column as

<th style="width: 9em" scope="col">Compare data</th>

Edit 2:

Based on what @HAPPY SINGH answered, I tried using the below part of code, in my scss file

.input-group {
  white-space: nowrap;
  .form-control {
    width: 50px !important;
    padding-left: 0%;
    padding-right: 0%;
  }
}

But as soon as I change from width: 40px, the mobile view breaks again

angular html
3 Answers

Use this:

<div class="input-group mb-3" style="white-space: nowrap">

or

<div class="input-group mb-3" style="display:flex">

to disallow wrapping.

On the other hand, it is likely that .input-group already does this. Your elements are contained in a table column, and table will always display all of its columns, even when there is not enough screen space available, which is likely why the layout breaks. Rather than using tables for layout, prefer a flexbox approach instead.

user_12661900

Yes, Use this few style CSS and remove inline CSS added in external CSS.

Mobile view media query:

@media only screen and (max-width: 767px) {
    .input-group {
       white-space: nowrap;
    }
    .form-control {
       width: 40px;
    }   
}
user_114144910

Try this:

<div class="input-group mb-3" style="display: flex;">
user_154686630
Related