1

I have a container with two children that I would like to display inline. Think it like a container element that has an agreement text on it.

Here is the codepen that shows the current code: https://codepen.io/alansouzati/pen/yXPrvQ

The problem is that I cannot figure out how to properly display the label side-by-side with the checkbox in a way that it would not overflow. These texts tend to be long and this is where the problem shows.

Currently I'm seeing a horizontal scroll inside the box that I have no idea where it is coming from.

Any ideas what I'm missing in the code?

.container {
  width: 288px;
  border: 1px solid;
  padding: 6px 24px;
  display: block;
  white-space: nowrap;
  overflow: auto;
}

.checkbox,
.label {
  display: inline-block;
}

.checkbox {
  width: 12px;
  margin-right: 12px;
}

.label {
  word-break: break-word;
  white-space: normal;
  vertical-align: middle;
  width: calc(100% - 24px)
}
Alan Souza
  • 7,475
  • 10
  • 46
  • 68
  • 1
    Removing `overflow: scroll` fixes your issue. – mrogers Jun 28 '17 at 00:16
  • I put it there intentionally to see why there overflow is there. – Alan Souza Jun 28 '17 at 00:16
  • basically I don't understand where the overflow is coming from – Alan Souza Jun 28 '17 at 00:17
  • I'm not sure I follow. Your codepen shows the text in line with the checkbox and the text does not flow outside the borders. What is the issue then? – mrogers Jun 28 '17 at 00:17
  • The issue is that this container in my app is a generic one, I cannot remove the overflow from there. So, I wanted to understand why the browser is adding a scroll in this example. Hopefully it makes more sense now. – Alan Souza Jun 28 '17 at 00:21
  • From https://developer.mozilla.org/en-US/docs/Web/CSS/overflow under `scroll` section: "Browsers display scrollbars whether or not any content is actually clipped." – mrogers Jun 28 '17 at 00:23
  • I've updated the pen and the question to use overflow: auto. again, this is just to show there is an overflow coming from some place. – Alan Souza Jun 28 '17 at 00:26
  • Subtract more pixels? `width: calc(100% - 28px)` seems to fix it. – J. Titus Jun 28 '17 at 00:37
  • Thanks. I know at some point the scrolling stops. 28px seems to be the number, but I don't understand where this 4px gap is coming from. – Alan Souza Jun 28 '17 at 00:42
  • I found it. there is a margin of 2 px that the browser applies to the checkbox. – Alan Souza Jun 28 '17 at 00:51
  • I removed my comment to post that, but you beat me to it. Nice. It's actually 3px 3px 3px 4px, which would make sense why 28px works for the calculation. – J. Titus Jun 28 '17 at 00:52
  • can you post this as an answer? I will approve it :) – Alan Souza Jun 28 '17 at 00:53

2 Answers2

1

The actual problem had nothing to do with the margin in the native checkbox but with an actual spacing character in the DOM.

Check this codepen: https://codepen.io/alansouzati/pen/YQEmdN

Instead of:

<div class="container">
  <span class="checkbox">
    <input type="checkbox" />
  </span>
  <span class="label">this is a really long label that I would like to wrap</span>
</div>

I did

<div class="container">
  <span class="checkbox">
    <input type="checkbox" />
  </span><span class="label">this is a really long label that I would like to wrap</span>
</div>

And the scroll is now gone.

This is probably some issue with the way codepen is rendering the code, but in my actual application I don't have to bother about it. But in my case it is hard to validate because I'm using JSX + React.

Alan Souza
  • 7,475
  • 10
  • 46
  • 68
0

You get the scroll because your .container has overflow: auto and white-space: nowrap;

If I had to do it, I would remove those properties and use flexbox to solve it in a cleaner way, without doing explicit calculations for adjusting user agent styles as different browsers will apply different styles to these elements.

.container {
  display: flex;
}
Praveen Puglia
  • 5,577
  • 5
  • 34
  • 68
  • thanks for the suggestion. I agree we should not rely on the browser's margin. Also agree that flexbox would be more elegant. Although the actual fix has nothing to do with margin in the checkbox element but with whitespace in the actual DOM. I will post another answer. – Alan Souza Jun 28 '17 at 04:24