Search code examples
bootstrap-4radio-buttonbuttongroup

Bootstrap 4 button group, button text width extends outside of button boundary

I've created a simple radio button group per the BS4 documentation example, but whenever I select a button, I can't help but notice that the active button border juts out a bit on the right side. From what I can tell, it seems like it's trying to make room for "extra" blank space to the right of the button's input text.

This same "jutting out" to the right occurs on all buttons selected within the group, not just the center button.

<div id="image-viewer-controls-wrapper">
  ...  

  <div class="btn-group btn-group-toggle" data-toggle="buttons" id="crop-type">
    <label class="btn btn-primary active">
      <input type="radio" name="crop_type" id="box" autocomplete="off" checked> Box
    </label>

    <label class="btn btn-primary">
      <input type="radio" name="crop_type" id="line" autocomplete="off"> Line
    </label>

    <label class="btn btn-primary">
      <input type="radio" name="crop_type" id="split" autocomplete="off"> Split
    </label>
  </div>
</div>

When center button is selected, the right border "notches" out on the right side of the button

Notice how it seems to coincide with the <code>input#line</code> element

Any ideas what may be causing this display issue?

If it's of any concern, this button-group div within a flexbox parent div.

Solution

  • just apply CSS to radio buttons as per the below snippet. don't worry about the display:none CSS property your radio functionality will works fine that does not cause any problem to your functionality.

    I hope your problem will be solved.

    .btn-group-toggle>.btn input[type=radio] {
    display: none;
}
    <!DOCTYPE html>
<html>
<head>
	<title>Demo Page</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
</style>
<body>
	<div id="image-viewer-controls-wrapper">
		<div class="btn-group btn-group-toggle" data-toggle="buttons" id="crop-type">
			<label class="btn btn-primary active">
				<input type="radio" name="crop_type" id="box" autocomplete="off" checked> Box
			</label>
			<label class="btn btn-primary">
				<input type="radio" name="crop_type" id="line" autocomplete="off"> Line
			</label>
			<label class="btn btn-primary">
				<input type="radio" name="crop_type" id="split" autocomplete="off"> Split
			</label>
		</div>
	</div>
</body>
</html>

    Thank you.