Size input text inside of table using bootstrap's classes - css

I have the code below where I'm trying to size a text input element using bootstrap's classes. However, I cannot get the thing to size down. I want it to be smaller on desktop, instead of taking up a massive amount of room.
<div class="container White_BG">
<div class="row" style="margin-left:0;margin-right:0;">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>Quickly place your order with this form.</h1>
<h2>Please enter the item numbers that you wish to order; once you add to the cart, then you will be able to change the quantity of those items ordered.</h2>
<div class="table-responsive">
<form method="post" name="QuickOrderMulti">
<table class="table table-bordered table-condensed table-hover">
<tr>
<th>Item #</th>
<th>Quantity</th>
<th>Description</th>
<th>Price</th>
<th>Subtotal</th>
</tr>
<tr>
<td>
<div class="col-lg-2">
<input type="text">
</div>
</td>
<td>
<input type="text">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
The offending line is:
<td>
<div class="col-lg-2">
<input type="text">
</div>
</td>
I tried using the col-lg-2 to make it only take up 2 grid columns, so maybe it'd be smaller. But no such luck.

Rather than surrounding it in a div, try making the input with the chosen class.
e.g.
<input class="col-lg-2" type="text">

Related

Column width in Bootstrap

Please bear with me if this is a simple question (I'm an iOS developer trying to learn CSS-Bootstrap.
I first played with rows :
<div class="row">
<div class="col col-1">
<p>Plan</p>
</div>
<div class="col col-2">
<p>Date</p>
</div>
<div class="col col-2">
<p>Person</p>
</div>
<div class="col col-3">
<p>Description</p>
</div>
<div class="col col-1">
<p>Time</p>
</div>
<div class="col col-3">
<p>Line</p>
</div>
</div>
And this was perfect :
I then tried to do the same with tables, first without setting the columns for the grid :
<div class="container-fluid">
<table class="table">
<thead>
<tr>
<th">Plan</th>
<th">Date</th>
<th>Person</th>
<th>Description</th>
<th>Time</th>
<th>Line</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="checkbox" name="Plan"> </td>
<td> <input type="date" name="date"> </td>
<td> <input type="text"></td>
<td> <input type="text"></td>
<td> <input type="time"></td>
<td> <input type="text"></td>
</tr>
<tr>
<td> <input type="checkbox" name="Plan"> </td>
<td> <input type="date" name="date"> </td>
<td> <input type="text"></td>
<td> <input type="text"></td>
<td> <input type="time"></td>
<td> <input type="text"></td>
</tbody>
</table>
</div>
Not bad but I want some columns to be smaller (Plan, Time, Date) and others to be bigger. So I added the classes for those columns (just like I did when experimenting with rows :
<div class="container-fluid">
<table class="table">
<thead>
<tr>
<th class="col col-1">Plan</th>
<th class="col col-2">Date</th>
<th class="col col-2">Person</th>
<th class="col col-3">Description</th>
<th class="col col-1">Time</th>
<th class="col col-3">Line</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col col-1"> <input type="checkbox" name="Plan"> </td>
<td class="col col-2"> <input type="date" name="date"> </td>
<td class="col col-2"> <input type="text"></td>
<td class="col col-3"> <input type="text"></td>
<td class="col col-1"> <input type="time"></td>
<td class="col col-3"> <input type="text"></td>
</tr>
<tr>
<td class="col col-1"> <input type="checkbox" name="Plan"> </td>
<td class="col col-2"> <input type="date" name="date"> </td>
<td class="col col-2"> <input type="text"></td>
<td class="col col-3"> <input type="text"></td>
<td class="col col-1"> <input type="time"></td>
<td class="col col-3"> <input type="text"></td>
</tbody>
</table>
</div>
But to my surprise. The first column (Plan) was lot bigger (and not smaller) and the other all remained the same:
I tried with setting the in both header and body (like code above) and only in header. The result was the same.
First things first, the first table item (Plan) is much larger when you are using columns because of "container-fluid". Try just "container". Per the documentation, "container-fluid" is full width which means it is expanding to fill the screen.
Next, columns are not what you would need to make the table items widths smaller.
The top layout is with column classes with the table. The bottom layout is a standard table layout with no column classes. As you can see, the smallest possible column width (col-1) is larger than the default sizing for the table items. If you want something to be smaller than that (the default sizing for the table), then you will have to mess around with the sizing of the table itself. (setting the padding-right or padding-left to 0rem for specific td elements helps trim the excess spacing for example)
my code for the "columned" table:
<div class="container">
<table class="table">
<thead>
<tr>
<th class="col-xl-1">Plan</th>
<th class="col-xl-2">Date</th>
<th class="col-xl-2">Person</th>
<th class="col-xl-3">Description</th>
<th class="col-xl-1">Time</th>
<th class="col-xl-3">Line</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xl-1"> <input type="checkbox" name="Plan"></td>
<td class="col-xl-2"> <input type="date" name="date"> </td>
<td class="col-xl-2"> <input type="text"></td>
<td class="col-xl-3"> <input type="text"></td>
<td class="col-xl-1"> <input type="time"></td>
<td class="col-xl-3"> <input type="text"></td>
</tr>
<tr>
<td class="col-xl-1"> <input type="checkbox" name="Plan"> </td>
<td class="col-xl-2"> <input type="date" name="date"> </td>
<td class="col-xl-2"> <input type="text"></td>
<td class="col-xl-3"> <input type="text"></td>
<td class="col-xl-1"> <input type="time"></td>
<td class="col-xl-3"> <input type="text"></td>
</tbody>
</table>
</div>
By the way I am using bootstrap version 4 alpha 6. If you are on a lower version of bootstrap, replace all instances of "col-xl-#" with "col-lg-#". The newest bootstrap has xl as its largest size.

I cant use Bootstrap "form-control" when using MaterializeCSS

When I use MaterializeCSS, I can't use the form-control class of Bootstrap.
How can I solve this problem?
<div class="card card-panel col-lg-12 form-group" style="float:right;direction:rtl;">
<table>
<tr>
<td>Name</td>
<td><input class="form-control" /></td>
</tr>
</table>
</div>
It show me this:
but I need this:

Bootstrap col leaving a space between another col

Here you can see that in-between the two col-md-6 divs, there is a little white space. I need this to b removed so that the grey bar looks like it is one.
<div class="row">
<div class="col-md-12 performers-table" style="padding:0 !important;">
<div class="col-md-6" style="padding:0 !important;">
<table class="table table-striped">
<tr>
<th>Rating - Top 3 <i class="fa fa-thumbs-up"></i></th>
<th></th>
</tr>
<tr>
<td>
<i class="fa fa-eye"></i>{{$performers['over'][0]['name'] }}
</td>
<td>
{{$performers['over'][0]['review_count_approved'] }}<div class="average-review-stars smaller-stars" id="performersover{{ $performers['over'][0]['id'] }}"></div>
</td>
</tr>
</table>
</div>
<div class="col-md-6" style="padding:0 !important;">
<table class="table table-striped">
<tr>
<th>Rating - Top 3 <i class="fa fa-thumbs-up"></i></th>
<th></th>
</tr>
<tr>
<td>
<i class="fa fa-eye"></i>{{$performers['over'][0]['name'] }}
</td>
<td>
{{$performers['over'][0]['review_count_approved'] }}<div class="average-review-stars smaller-stars" id="performersover{{ $performers['over'][0]['id'] }}"></div>
</td>
</tr>
</table>
</div>
</div>
</div>
Does anyone know why this is happening? i have removed any padding from the divs
You can use .no-gutter bootstrap class to avoid space between two columns.
By default a bootstrap row will contain 15px of left and right margins.

How to inline input and glyph icon in table cell in bootstrap3?

I cannot get my glyph icon in one line with input in bootstrap3. How can I do it please, I tried many classes, but evidently none of them worked.. The glyphicon is still displayed on another line , the input is too long. It works only if I set manually width of input, and that is not the best way..
<table class="table table-bordered table-striped table-hover">
<tbody>
<tr>
<td class="search-header">Legend:</td>
<td>
<div class="row-fluid form-inline">
<input class="form-control input-sm" type="text" id="inputSmall">
<span class="glyphicon glyphicon-question-sign"></span>
</div>
</td>
</tr>
</tbody>
</table>
One solution could be:
<table class="table table-bordered table-striped table-hover">
<tbody>
<tr>
<td class="search-header">Legend:</td>
<td>
<div class="col-lg-12 input-group">
<input type="text" class="form-control" id="inputSmall">
<a class="input-group-addon" href="#"><span class="glyphicon glyphicon-question-sign"></span></a>
</div>
</td>
</tr>
</tbody>
</table>
You may also check the official documentation of Input groups.
It seems you're looking to append an icon at the end of a small input, within a table cell. This should be done as a button, and the Bootstrap 3 code would be as follows:
<table class="table table-bordered table-striped table-hover">
<tbody>
<tr>
<td class="search-header">Legend:</td>
<td><div class="input-group">
<input type="text" class="form-control input-sm" id="inputSmall">
<span class="input-group-btn">
<button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-question-sign"></i></button>
</span>
</div>
</td>
</tr>
</tbody>
</table>
Note that if you want to control the width of this element group you'll need to wrap it in a DIV and apply the appropriate class for whatever width you desire.
UPDATE: JSFiddle demo

Why is <table> content extending beyond containing BootStrap "span" and overlapping, at some resolutions?

JSFiddle: http://jsfiddle.net/ardave/8DR6n/3/
Full Screen JSFiddle: http://jsfiddle.net/ardave/8DR6n/3/embedded/result/
I've got these three divs at the bottom right of the page, each containing an html table with text, and it all displays fine at most desktop resolutions.
However, when I shrink my window horizontally, or when I view it on certain mobile devices, the tables' contents overlap each other.
This problem appears just as the window is sized below 979 pixels wide, which coincides with the bootstrap-responsive.css media query for tablet size, so I'm sure this is related, but I don't know enough to figure out how or why.
The problem also coincides with the width that the navbar across the top disappears, though again, I don't know enough to say how or why.
The only other possibly useful thing I've discovered is that when the window is sized so that the problem exists, when I hover over the span or table elements in the "Elements" debugger window in Chrome, I can clearly see that the tables' columns extend past the size of the tables themselves, and past the sizes of the span4 divs that contain the tables.
I don't really want the content to overflow visibly, which I think is the current problem, however I also don't want to hide or scroll the overflow. I'd really just like the table text to stay at a non-overlapping size until the tables/span4s are forced to respond responsively by stacking on top of each other once the screen gets too narrow.
Any help would be greatly appreciated.
It seems possibly excessive, but I guess SO wants me to include the code itself rather than just the links to jsfiddle, so here goes (assume that bootstrap.css and bootstrap-responsive.css are referenced)
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">View All</li>
<li>View All
</li>
</ul>
</div>
</div>
<div class="span9">
<div class="hero-unit">
<h1>My Site Name</h1>
<p>Introductory stuff</p>
<p> <a class="btn btn-primary btn-large" href="/Home/About">About »</a>
</p>
</div>
<div class="container">
<div class="row-fluid">
<div class="span4">
<h2>Newest Entries</h2>
<table class="table .table-bordered">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>1/28/2013</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>12/4/2012</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>11/9/2012</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>10/31/2012</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>10/31/2012</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>10/30/2012</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>10/17/2012</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>10/15/2012</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>9/29/2012</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>9/21/2012</td>
</tr>
</table>
</div>
<!--/span-->
<div class="span4">
<h2>Latest Stuff</h2>
<table class="table .table-bordered">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>11/9/2012</td>
<td>10.0</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>11/7/2012</td>
<td>8.0</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>11/4/2012</td>
<td>10.0</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>10/11/2012</td>
<td>7.0</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>9/13/2012</td>
<td>9.0</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>9/6/2012</td>
<td>7.0</td>
</tr>
</table>
</div>
<!--/span-->
<div class="span4">
<h2>Needing Inputs</h2>
<table class="table .table-bordered">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Here's a thing</td>
<td> Lots of stuff
</td>
<td>1/28/2013</td>
<td> Lots of stuff
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> Lots of stuff
</td>
<td>12/4/2012</td>
<td> Lots of stuff
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> Lots of stuff
</td>
<td>11/18/2012</td>
<td> Lots of stuff
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> Lots of stuff
</td>
<td>11/9/2012</td>
<td> Lots of stuff
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> Lots of stuff
</td>
<td>11/7/2012</td>
<td> Lots of stuff
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> Lots of stuff
</td>
<td>11/5/2012</td>
<td> Lots of stuff
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> Lots of stuff
</td>
<td>10/31/2012</td>
<td> Lots of stuff
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> Lots of stuff
</td>
<td>10/30/2012</td>
<td> Lots of stuff
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> Lots of stuff
</td>
<td>10/30/2012</td>
<td> Lots of stuff
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> Lots of stuff
</td>
<td>10/18/2012</td>
<td> Lots of stuff
</td>
</tr>
</tbody>
</table>
</div>
<!--/span-->
</div>
</div>
<div>
<p></p>
<p>Here's a big blob of text!</p>
</div>
</div>
</div>
<hr>
<footer>
<p>© Some Company</p>
</footer>
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="nav-collapse collapse"> <a class="brand" href="/">TheSiteName.com</a>
<form action="/Search/Search"
class="navbar-search pull-left" method="get">
<input type="text" class="search-query" placeholder="Search by Name" name="SearchQuery"
/>
</form>
<form ReturnUrl="" action="/Account/ExternalLogin" class="navbar-form pull-right"
method="post">
<button type="submit" name="provider" value="facebook" class="logonpartialextlogin"
title="Log in using your Facebook account">
<img src="/Images/facebook.png" />
</button>
<button type="submit" name="provider" value="twitter" class="logonpartialextlogin"
title="Log in using your Twitter account">
<img src="/Images/twitter-bird-white-on-blue.png" />
</button>
<button type="submit" name="provider" value="google" class="logonpartialextlogin"
title="Log in using your Google account">
<img src="/Images/google-icon.png" />
</button>
</form>
<form action="/Account/Register" class="navbar-form pull-right" method="get">
<button type="submit" class="btn">Register</button>
</form>
<form action="/Account/LogOn" class="navbar-form pull-right" method="post">
<input class="span2" type="text" placeholder="Email" name="UserName" />
<input class="span2" type="password" placeholder="Password" name="Password"
/>
<button type="submit" class="btn">Sign in</button>
</form>
</div>
</div>
</div>
</div>
I know this thread is several months old, but I also know that I really appreciate when someone posts an answer that worked for their similar situation. Here's the way I did it in bootstrap 2 and 3.
.cw-table-list{
margin:0px !important;
table-layout:fixed;
}
.cw-table-list td{
padding-bottom: 0px !important;
overflow:hidden;
}
Hope this helps.
Twitch
I can't tell you the "Bootstrap way" to fix this, since I don't use it. I can tell you the why: Your content doesn't allow it at that breakpoint.
Because rows of tables don't wrap around (ie. all of the cells for each row must appear on the same line), there is an absolute minimum width that every given table can resize down to, which depends on things like paddings and the widest non-wrapping content for each cell. For your tables, the smallest they can go is whatever the width of "Column", "Column", and "10/11/2012" equal out to plus 48px (8px padding on each side times 3).
The span4s are only allowed to be 31.49% of 724px (definition on .container ancestor element), which isn't wide enough to contain the tables at their smallest possible width.
My recommendation would be to not try and place all 3 tables side by side. Your display would have to be exceptionally wide in order for it to not look cramped and not have horizontal scrolling.
You can apply the style = "overflow: auto;" to put a horizontal scroll bar at your table. Thus the design will still remain responsive. Follow the code:
.table-scrollable{
overflow: auto;
}
And use it on your parent div:
<div class='table-scrollable'>
Assign the table's container element with overflow: auto; and the table itself with table-layout: fixed;
.ie-table-fix {
overflow: auto;
}
.ie-table-fix > table {
table-layout: fixed;
}

Resources