CODEWITHSUNDEEP
htmltwitter-bootstrap
user5005768Himadree
user5005768Himadree

Reputation: 1427

Why these radio buttons aren't displaying with proper alignment when small screen

I add radio input fields & labels in bootstrap.Radio buttons display fine on large screen.But if the screen size get minimize then radio button get out of the screen. Please check image given below:

enter image description here

please suggest me about bringing proper alignment back. Here is the source code:

function updateBill(type) {
  var id = "bill";
  document.getElementById(id).value = document.getElementById(type).value;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="panel-group">
    <div class="panel panel-primary">
      <div class="panel-heading"></div>
      <div class="panel-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label class="control-label col-sm-3" for="employeeid">ID:</label>
            <div class="col-sm-8">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"  aria-hidden="true"></i></span>
                <input type="text" class="form-control" id="employeeid" placeholder="Enter ID">
              </div>
            </div>
          </div>
          <div class="form-group form-inline row">
            <label class="control-label col-sm-3" style="text-align:right;">Quantity:</label>
            <div class="input-group">
              <div class="radio ">
                <input class="radio-inline" type="radio" name="radio2" id="radio0" value="0" onchange="updateBill('radio0')" checked>
                <label class="radio-inline">None</label>
                <input class="radio-inline" type="radio" name="radio2" id="radio1" value="200" onchange="updateBill('radio1')">
                <label class="radio-inline">One</label>
                <input class="radio-inline" type="radio" name="radio2" id="radio2" value="300" onchange="updateBill('radio2')">
                <label class="radio-inline">Two</label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-3" style="text-align:right;">Bill:</label>
            <div class="col-sm-8">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-usd"  aria-hidden="true"></i></span>
                <input type="text" class="form-control" value="" id="bill" placeholder=".00">
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

please let me know if any further information is required. Thanks :)

Upvotes: 1

Views: 1483

Answers (4)

Ganesh Bylakuppe Deveppa
Ganesh Bylakuppe Deveppa

Reputation: 1

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="panel-group">
    <div class="panel panel-primary">
      <div class="panel-heading"></div>
      <div class="panel-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label class="control-label col-sm-3" for="employeeid">ID:</label>
            <div class="col-sm-8">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"  aria-hidden="true"></i></span>
                <input type="text" class="form-control" id="employeeid" placeholder="Enter ID">
              </div>
            </div>
          </div>
<!--// ************          MODIFIED SECTION **************** //-->
          <div class="form-group">
            <label class="control-label col-sm-3" for="employeeid">Quantity:</label>
            <div class="col-sm-8">
              <div class="radio">
              <label>
                <input type="radio" name="radio2" id="radio0" value="0" onchange="updateBill('radio0')" checked>
                None
              </label>

              <label>
                <input type="radio" name="radio2" id="radio1" value="200" onchange="updateBill('radio1')">
                One
              </label>
               <label>
                <input type="radio" name="radio2" id="radio2" value="300" onchange="updateBill('radio2')">
                Two
              </label>
            </div>


            </div>
          </div>
<!--// ************          MODIFIED SECTION  ENDS**************** //-->
          <div class="form-group">
            <label class="control-label col-sm-3" style="text-align:right;">Bill:</label>
            <div class="col-sm-8">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-usd"  aria-hidden="true"></i></span>
                <input type="text" class="form-control" value="" id="bill" placeholder=".00">
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

You have used unnecessary styles on the "Quantity" section. Removed the class class="radio-inline", added div with <div class="col-sm-8">, will make it work. Have a look into the updated code within MODIFIED SECTION

Upvotes: 0

Ahs N
Ahs N

Reputation: 8366

The parent div radio that you used was causing this issue.

I change the name to radio-group and added a margin-left to it like so:

.radio-group {
  margin-left: 20px;
}

Here is the JSFiddle demo

The element with class name radio was causing the issue because it is an existing class in bootstrap and therefore some CSS were being applied that moves the radio button off the grid.

Upvotes: 1

Faisal Ramzan
Faisal Ramzan

Reputation: 169

i hope this will solve your problem.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Radio Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

  <form role="form">
    <div class="radio">
      <label><input type="radio" name="optradio">Option 1</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="optradio">Option 2</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="optradio">Option 3</label>
    </div>
  </form>
</body>
</html>

Upvotes: 1

vanburen
vanburen

Reputation: 21663

Your HTML structure needs to be adjusted as your using multiple types of form classes, using radio-inline on the input and the label and should have the radios inside a column like the rest of your inputs. See Docs.

See working example Snippet.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="panel-group">
    <div class="panel panel-primary">
      <div class="panel-heading"></div>
      <div class="panel-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label class="control-label col-sm-3" for="employeeid">ID:</label>
            <div class="col-sm-9">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"  aria-hidden="true"></i></span>
                <input type="text" class="form-control" id="employeeid" placeholder="Enter ID">
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-3">Quantity:</label>
            <div class="col-sm-9">
              <label class="radio-inline">
                <input type="radio" name="radio2" id="radio0" value="0" onchange="updateBill('radio0')" checked>None
              </label>
              <label class="radio-inline">
                <input type="radio" name="radio2" id="radio1" value="200" onchange="updateBill('radio1')">One
              </label>
              <label class="radio-inline">
                <input type="radio" name="radio2" id="radio2" value="300" onchange="updateBill('radio2')">Two
              </label>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-3" style="text-align:right;">Bill:</label>
            <div class="col-sm-9">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-usd"  aria-hidden="true"></i></span>
                <input type="text" class="form-control" value="" id="bill" placeholder=".00">
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions