CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapbootstrap-4
M Stange
M Stange

Reputation: 5

Bootstrap - Input not respecting Grid size/Restraints

I haven't been able to find any answers to my question elsewhere, nor previous posts here.

I am working on a website for internal purposes for work, and just playing trying to get things working at home. I am not sure if I am doing something wrong or if there is a bug, or maybe I should be using another JS UI.

What I need for a UI, is tabs, a grid system and form input. Bootstrap seems to be the best option I have found so far. I had settled on 4.0.0.beta2 since it is the most recent. Everything works except the Input elements, text, number and so on. When I put these in a grid system with bootstrap the input elements do not respect the grid sizing. All other form elements do.

Here is my current testing page without all the extra clutter. The input type flows outside of the grid to the right. I have tried form-groups, moving stuff around, different sizes, input types, pretty much anything I can think of. (Edit - changed detail-row to just row as it should have been, still did not fix the issue)

<!DOCTYPE html>

    <html lang=en>
    <head>
      <!-- Standard Meta -->
  <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  
    <!-- Site Properties -->    
    <link rel="stylesheet" href="css/bootstrap.4.0.0.beta2.min.css">    

<title> -- </title> 
</head>

<body>
<div id="viewport" class="container">

<div class="row">
<div class="col-sm-2">Type</div>
<div class="col-sm-2">Vendor</div>
<div class="col-sm-3">Item</div>
<div class="col-sm-3">Note</div>
<div class="col-sm-1">Min Stock</div>
<div class="col-sm-1">To Order</div>
</div>


<div class="row">
  <div class="col-sm-2">Animal</div>
  <div class="col-sm-2">Bear</div>
  <div class="col-sm-3">Black</div>
  <div class="col-sm-3">Midnight</div>
  <div class="col-sm-1">0</div>
  <div class="col-sm-1">
    <input class="input-sm" id="item-87">
  </div>
  </div>
</div>

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.bundle.4.0.0.beta2.min.js"></script>  
</body>
</html>

Side note: If I encapsulate the input type in a Col / Row / Col, outside of the main with a label it will constrain itself to the column width. But it then falls out of alignment with the other row's since they are different sizes.

Upvotes: 0

Views: 1589

Answers (2)

Robert
Robert

Reputation: 6967

Add .form-control to your <input> so that Bootstrap can responsively adjust the width of the form element to be 100% of the column.

<input class="input-sm form-control" id="item-87">

Also, <div class="detail-row"> is missing its .row class; perhaps you meant to use:

<div class="detail row">

Without specifying a new .row your columns after the first will be offset improperly.

Upvotes: 1

programtreasures
programtreasures

Reputation: 4298

I belive that you should apply bootstrap grid class to your input elemtnt

something like

<input class="input-sm col-sm-12" id="item-87">

so your grid should be like,

<div class="detail-row">
  <div class="col-sm-2">Animal</div>
  <div class="col-sm-2">Bear</div>
  <div class="col-sm-3">Black</div>
  <div class="col-sm-3">Midnight</div>
  <div class="col-sm-1">0</div>
  <div class="col-sm-1">
    <input class="input-sm col-sm-12" id="item-87">
  </div>

Upvotes: 1

Related Questions