CODEWITHSUNDEEP
csstwitter-bootstrapgoogle-chrometwitter-bootstrap-3
Vlad Radu
Vlad Radu

Reputation: 131

Chrome is breaking the layout, how can I fix it?

I have issues with rendering some elements in Google Chrome. When I test the code with Firefox or Edge, everything is fine. It seems like Chrome computes a smaller width for "col-sm-1" or it is ignoring the padding.

I have the following html:

/*dropdown size*/

.dropdown-sm {
  font-size: 1.25rem;
}


/* Custom dropdown */

.custom-dropdown {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  /*   margin: 10px; */
}

.custom-dropdown select {
  background-color: #00c292;
  color: #fff;
  font-size: inherit;
  padding: .5em;
  padding-right: 2.5em;
  border: 0;
  margin: 0;
  border-radius: 3px;
  text-indent: 0.01px;
  text-overflow: '';
  -webkit-appearance: button;
}

.custom-dropdown::before,
.custom-dropdown::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.custom-dropdown::after {
  content: "\25BC";
  height: 1em;
  font-size: .625em;
  line-height: 1;
  right: 1.2em;
  top: 50%;
  margin-top: -.5em;
}

.custom-dropdown::before {
  width: 2em;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 0 3px 3px 0;
}

.custom-dropdown select[disabled] {
  color: rgba(0, 0, 0, .3);
}

.custom-dropdown select[disabled]::after {
  color: rgba(0, 0, 0, .1);
}

.custom-dropdown::before {
  background-color: rgba(0, 0, 0, .15);
}

.custom-dropdown::after {
  color: rgba(0, 0, 0, .4);
}
<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="checkbox.css">
</head>

<body>
  <main role="main">
    <div id="boottom-page" class="container-fluid">
      <div class="row">
        <div class="col-sm-1">
          <span class="custom-dropdown dropdown-sm">
              <select data-name="change-role">
                  <option>Change role to...</option>
                  <option>User</option>
                  <option>Author</option>
                  <option>Admin</option>
              </select>
          </span>
        </div>
        <div class="col-sm-2">
          <div>
            <div>
              <button type="button" class="btn btn-info">Change </button>
              <button type="button" class="btn btn-info">Delete</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</body>

</html>

Both Firefox and Edge render them just fine:

but Chrome breaks the layout:

What can I do to fix the layout issues for Chrome?

Upvotes: 0

Views: 1123

Answers (2)

jsadev.net
jsadev.net

Reputation: 2590

Tested your code in Firefox and Chrome. They are nearly looking the same, nothing is breaking the layout.

But on your screenshot they are on different sizes.

I think there are different zoomlevels set in your browsers. Please check if both are on 100%;

Upvotes: 1

Benjaminsp
Benjaminsp

Reputation: 9

To avoid Chrome breaks the layout, add min-width to col-sm-1 and col-sm2.

HTML with new classes: dropdown-container and button-container

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="checkbox.css">
</head>

<body>
  <main role="main">
    <div id="boottom-page" class="container-fluid">
      <div class="row">
        <div class="col-sm-1 dropdown-container">
          <span class="custom-dropdown dropdown-sm">
              <select data-name="change-role">
                  <option>Change role to...</option>
                  <option>User</option>
                  <option>Author</option>
                  <option>Admin</option>
              </select>
          </span>
        </div>
        <div class="col-sm-2 button-container">
          <div>
            <div>
              <button type="button" class="btn btn-info">Change </button>
              <button type="button" class="btn btn-info">Delete</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</body>

</html>

CSS

.dropdown-container {
  min-width: 130px;
}

.button-container {
  min-width: 230px;
}

Upvotes: 0

Related Questions