When I add a .group-addon to an element inside a bootstrap .table, all other elements are not given enough space, and the group-addon input takes up far too much room.
<h2>Only one bully, group-addon</h2>
<table class="table">
<tbody>
<tr>
<td>
<div class="input-group">
<input id="cool" class="form-control">
</div>
</td>
<td>
<div class="input-group">
<input id="cool" class="form-control">
<div class="input-group-addon">x</div>
</div>
</td>
<td>pushed around...</td>
<td>being bullied...</td>
<td>by group addons...</td>
</tr>
</tbody>
</table>
<h2>Two bullying group-addons</h2>
<table class="table">
<tbody>
<tr>
<td>
<div class="input-group">
<div class="input-group-addon">x</div>
<input id="cool" class="form-control">
</div>
</td>
<td>
<div class="input-group">
<input id="cool" class="form-control">
<div class="input-group-addon">x</div>
</div>
</td>
<td>pushed around...</td>
<td>being bullied...</td>
<td>by group addons...</td>
</tr>
</tbody>
</table>
<h2>No Bullies</h2>
<table class="table">
<tbody>
<tr>
<td>
<div class="input-group">
<input id="cool" class="form-control">
</div>
</td>
<td>
<div class="input-group">
<input id="cool" class="form-control">
</div>
</td>
<td>pushed around...</td>
<td>being bullied...</td>
<td>by group addons...</td>
</tr>
</tbody>
</table>
<div class="alert alert-info">When there is no group-addon inside a table with class table, the spacing looks reasonable, but a single group-addon ruins it all</div>
http://jsfiddle.net/billymoon/ntm2q/
How should I use group-addons inside bootstrap tables without them taking too much space?
Try in your Less / CSS:
.input-group-addon {
width:auto;
}
The problem is in your bootstrap.min.css line 9 where you have this rules:
.input-group-addon, .input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
You should erase width: 1%; or just override with something like this:
.input-group-addon {
width:0;
}
DEMO
Related
I'm trying to make an editable table with bootstrap.
So, it must include some inputs.
Table columns width usually fit with its content. Bootstrap's form-control sets the width: 100%, but i feel it too large and want the input smaller.
I found in another question that i can use w-auto on my input to bypass this.
However, table doesn't seem to shrink the column size to it's content when i do this.
I guess i should somehow tell the table which column must expand to fill the space.
I've tried setting w-100 to another column, but it breaks another input-group in another column.
<table class="table table-sm">
<thead>
<th>Problematic column</th>
<th>2</th>
<th>3</th>
</thead>
<tbody>
<td class="table-danger"><input type="number" class="form-control w-auto"></td>
<td>Something else</td>
<td>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">X</button>
</div>
<input type="text" class="form-control"/>
</div>
</td>
</tbody>
</table>
See plunker
Im not 100% sure what u exactly want to achieve, but i think you want this behaviour?
Add input-group div around your first input field and remove the w-auto class.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="lib/script.js"></script>
</head>
<div class="container">
<table class="table table-sm">
<thead>
<th>Problematic column</th>
<th>2</th>
<th>3</th>
</thead>
<tbody>
<td class="table-danger">
<div class="input-group">
<input type="number" class="form-control">
</div>
</td>
<td>Something else</td>
<td>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">X</button>
</div>
<input type="text" class="form-control"/>
</div>
</td>
</tbody>
</table>
</div>
</html>
Hi I'm trying to obtain responsive menu on navbar in application on which I work with bootstrap 3. My menu has element with bell icon. The purpose of this one is to remind user some information. Below I show that menu element on screen:
I have fixed settings for width of my menu. I'd like to have responsive menu, not static, because this application should work on few screen resolutions. What should I obtain that? I tried to obtain that by pecrentage property for: width, min-with properties, but it has crashed.
Below I show html tags and CSS settings:
Html:
<li class="dropdown ng-isolate-scope open" loader="remainderLoading"><a ng-show="!loader" id="reminderLink" class="dropdown-toggle" data-toggle="dropdown" style="font-size:18px; cursor:pointer;" ng-click="removeNotification()" aria-expanded="true"><i class="fa fa-bell"></i></a>
<!-- ngIf: numOfRemindedNotes && !loader && !clicked -->
<div id="reminderMenu" class="dropdown-menu">
<div class="form-group col-md-7 disabled">
<label>Reminder's date:</label>
<input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty ng-valid-date ng-valid-required" ng-change="getNotesByDate()" initdate="new Date()" ng-click="noteDatepicker.opened = true" uib-datepicker-popup="" ng-model="dateNotes.value" is-open="noteDatepicker.opened" ng-required="true" close-text="Close" readonly="" required="required"><div uib-datepicker-popup-wrap="" ng-model="date" ng-change="dateSelection(date)" template-url="uib/template/datepickerPopup/popup.html" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty"><!-- ngIf: isOpen -->
</div>
</div>
<div ng-show="noteLoading" class="ng-hide">
<img width="32" height="32" src="/packages/img/loader.gif">
</div>
<div class="col-md-12">
<table id="reminderTable" class="table table-bordered table-striped" ng-show="!noteLoading">
<tbody>
<tr id="reminderTableElement">
<td class="col-md-3">
Case Id
</td>
<td class="col-md-3">
Trans id
</td>
<td class="col-md-3">
Type customer
</td>
<th class="col-md-3">
Note
</th>
<td class="col-md-3">
Date
</td>
<td class="col-md-3"></td>
</tr>
<!-- ngRepeat: note in notes.notesForBasicCustomer --><tr ng-repeat="note in notes.notesForBasicCustomer" id="reminderTableElement" class="ng-scope">
<td style="cursor: pointer;">
<a target="_self" ng-click="editCaseById(note.case_id)" class="ng-binding">426024</a>
</td>
<td class="ng-binding">
639252-2
</td>
<td>Basic</td>
<td class="ng-binding">
asdsadsa
</td>
<td class="ng-binding">
2018-08-09
</td>
<td>
<div class="btn btn-primary" ng-disabled="noteLoading" ng-click="hideReminder(note['0'].id,'basic')">Close
</div>
</td>
</tr><!-- end ngRepeat: note in notes.notesForBasicCustomer --><tr ng-repeat="note in notes.notesForBasicCustomer" id="reminderTableElement" class="ng-scope">
<td style="cursor: pointer;">
<a target="_self" ng-click="editCaseById(note.case_id)" class="ng-binding">426011</a>
</td>
<td class="ng-binding">
639252-2
</td>
<td>Basic</td>
<td class="ng-binding">
asdsa
</td>
<td class="ng-binding">
2018-08-09
</td>
<td>
<div class="btn btn-primary" ng-disabled="noteLoading" ng-click="hideReminder(note['0'].id,'basic')">Close
</div>
</td>
</tr><!-- end ngRepeat: note in notes.notesForBasicCustomer -->
<!-- ngRepeat: note in notes.notesForAdditionalCustomers -->
</tbody>
</table>
</div>
</div>
</li>
CSS:
#reminderTableElement{
font-size: 12px;
}
#reminderMenu{
min-width: 540px;
}
I would be grateful for help. Best regards ;)
You should use #media tags to implement styles. For example
#media (min-width: 1600px) {
#reminder-menu {
...
}
}
It is considered best practice to design for mobile first, so you would use min-width: 540px or whatever your smallest breakpoint is first, then add more breakpoints as needed.
Is it possible to create new row in 'td' after ngFor reaches 10 image repeats, now pics are shown all in one td and shrinking as it gets more and more?
<td *ngFor="let row of pics">
<div class="checkbox">
<label><input type="checkbox" [checked]="row.checked" value="{{row.url}}" (change)="addpic($event.target.checked, row.id)"></label>
</div>
<img src="{{picroute}}{{row.img}}>
</td>
<tr *ngFor="let page of [0,1,2,3,4,5,6,7,8,9,10,11,12].slice(0,pics/10)">
<td *ngFor="let row of pics.slice(page*10,(page+1)*10">
<div class="checkbox">
<label><input type="checkbox" [checked]="row.checked"
value="{{row.url}}" (change)="addpic($event.target.checked, row.id)">
</label>
</div>
<img src="{{picroute}}{{row.img}}>
</td>
</tr>
I think flex-box could be more useful, you can control the shrink ratio if you need, the most important, only an one dimension array is needed.
<td>
<tr ng-repeat="row in arrange(pics, 10)">
<td ng-repeat="pic in row">
<div class="checkbox">
<label>
<input type="checkbox"
[checked]="row.checked"
value="{{row.url}}"
(change)="addpic($event.target.checked, row.id)">
</label>
</div>
<img src="{{pic}}"
</td>
</tr>
</td>
arrange(pics, numberPerRow) {
var arrangedArray = [];
while (pics.length > numberPerRow) {
arrangedArray.push(arrangedArray.splice(0, numberPerRow));
}
arrangedArray.push(pics);
return arrangedArray;
}
This is a somewhat elegant solution imo, just replace variables accordingly.
I have a bootstrap table which is populated by an MVC loop of a model. However when my model renders a large number of records, it causes the table and panel the table is nested in stretch out too much in height. Is there a recommended way of making the table result scrollable when the records returned would exceed the max-height property of the table? A scrollable solution would be optimal.
Styles
.table{
width:100%;
}
thead,tbody,tr,td,th{
display:grid;
}
tr:after{
content: ' ';
display: block;
visibility:hidden;
clear:both;
}
thead th{
height: 30px;
}
tbody {
height: 120px;
overflow-y:auto;
}
thead {
}
tbody td. thead th {
width: 40.2%;
float: left;
}
Code below: (loop displays 34 records)
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left" style="padding-top: 7.5px;">My Team</h4>
<div class="btn-group pull-right">
<!--- Search bar-->
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search My Team">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
</div>
<table class="table table-responsive table-hover" style="max-height:150px; height:100px;">
<thead>
<tr>
<th>#Html.DisplayNameFor(model => model.Name)</th>
<th>LAN ID</th>
<th>Department</th>
<th>Email</th>
</tr>
</thead>
<tbody>
#foreach(var x in Model)
{
<tr class="info">
<td>
#Html.DisplayFor(modelItem => x.Name)
</td>
<td>
#Html.DisplayFor(modelItem => x.Lan_Id)
</td>
<td>
#Html.DisplayFor(modelItem => x.CurrDept)
</td>
<td>
#Html.DisplayFor(modelItem => x.Email)
</td>
</tr>
}
</tbody>
</table>
<div class="panel-footer"></div>
make a table structure as follows. Should resolve your issue
<div class="table-responsive">
<table class="table table-striped table-bordered">
//rest of code
</table>
</div>
I'm trying to build a settings for my WordPress plugin, I want my image to be displayed aside the table on the right, but it always goes to bottom can you guys help me to fix that ?
<form action="options.php" method="post">');
<div class="row">
<div class="col-md-8">
<table class="form-table">
<tbody>
<tr>
<th scope="row"><label for="">test</label></th>
<td>
<input name="x'.$key.'" value="'.$option['x'.$key].'" width="50px">
<button type="button" onclick="position('.$key.')" class="button button-primary">Create/Edit</button>
<p class="description" id="">some discription</p>
</td>
</tr>
<tr>
<th scope="row"><label for="">test</label></th>
<td>
<input name="myinput" value="'.$option['x'.$key].'" width="50px">
<button type="button" onclick="position('.$key.')" class="button button-primary">Create/Edit</button>
<p class="description" id="">some discription</p>
</td>
</tr>
....
</tbody>
</table>
</div>
<div class="col-md-4">
<div id="special">
<canvas id="the-canvas" style="border:1px solid black"></canvas>
</div>
</div>
</div>
// outputs the WP submit button html
//#submit_button();
Add a div element with "container" or "container-fluid" class after form element( <form action="options.php" method="post"> )
like :<form action="options.php" method="post"><div class="container">
...............
</div></form>
OR
like :<form action="options.php" method="post"><div class="container-fluid">
...............
</div></form>