I have a big table from bootstrap with many columns that should have a certain width. I would like to display all my columns with a horizontal scroll bar if necessary. I've seen some exemple but i still have some graphics problems.
I'm using angularJS to get and diplay data with the directive ng-table.
Here is what i tried :
<div style="width: 100% ; overflow: auto; justify-content: space-between; align-content: space-between; display: flex">
<table ng-table="tableParams" class="table table-striped editable-table" >
<colgroup>
<col width="50px" />
<col width="2000px" />
<col width="2000px" />
<col width="2000px" />
<col width="2000px" />
<col width="1000px" />
<col width="6000px" />
<col width="2000px" />
<col width="200px" />
<col width="400px" />
<col width="400px" />
<col width="700px" />
</colgroup>
<tr ng-repeat="user in $data" ng-form="rowForm">
<td data-title="'Id'">{{user.id}} </td>
<td data-title="'Nom'"">
<span ng-switch-default class="editable-text">{{user.nom}</span>
</td>
<td data-title="'Prenom'">
<span ng-switch-default class="editable-text">{{user.prenom}</span>
</td>
<td data-title="'Mots de passe'">
<span ng-switch-default class="editable-text">{{user.password}</span>
</td>
<td data-title="'Refs hardware'">
<span ng-switch-default class="editable-text">{{user.refs}</span>
</td>
<td data-title="'Version utilisé'">
<span ng-switch-default class="editable-text">{{user.Version}</span>
</td>
<td data-title="'Email'">
<span ng-switch-default class="editable-text">{{user.email}</span>
</td>
<td data-title="'Chantier'" >
<span ng-switch-default class="editable-text">{{user.chantier}</span>
</td>
<td data-title="'Logiciel'">
<span ng-switch-default class="editable-text">{{user.chantier}</span>
</td>
<td data-title="'Dernier essaie de connexion'">
<span ng-switch-default class="editable-text">{{user.lastTry}</span>
</td>
<td data-title="'Date de validite'">
<span ng-switch-default class="editable-text">{{user.validity}</span>
</td>
<td data-title="'Action'">
<md-button class="md-icon-button md-fab" style="width: 50px; height: 20px;" ng-click="user.isEditing = true">
<md-tooltip md-direction="top">Update</md-tooltip>
<md-icon md-svg-src="img/icons/refresh.svg">
md-delay="500">
</md-icon>
</md-button>
<md-button class="md-icon-button md-fab" style="width: 50px; height: 10px;" ">
<md-tooltip md-direction="top">Update</md-tooltip>
<md-icon md-svg-src="img/icons/refresh.svg">
md-delay="500">
</md-icon>
</md-button>
</td>
</tr>
</table>
I purposely put huge width to show the problem clearly
Here is what i have on different resolution :
On small screen :
There is the scrollbar but my different width aren't respected and my action button are not inline
On bigger screen
There is no scrollbar and my width aren't respected
Please someone can explain me what i did wrong.
By default tables will not respect your width as you have given in your example. It will depend on content that the column has.
For the tables to respect your given widths, you need to use fixed table layout.
.table {
table-layout: fixed;
}
add:-
<div class="table-responsive">
<table class="table">
...
</table>
</div>
below is the html:
<tr ng-repeat-start="select in selection">
<td style="overflow: hidden;">{{select.name}}</td>
<td style="overflow: hidden;">{{select.type}}</td>
<td style="overflow: hidden;">{{select.application}}</td>
<td>
<image ng-src="{{commentImg}}" width="20" height="20" ng-click="selectComment()"></image>
</td>
</tr>
selectComment opens modal which has textarea. Selection array has 3 key/value per object(i.e. name,type, application). i want to add textarea value as fourth key/value in every object to selection json object.
below is the modal:-
<div class="dialog-panel3">
<div class="page-title">
Comments
</div>
<br>
<form name="commentForm">
<textarea class="textarea" ng-model="inputValue" required></textarea>
<br>
<br>
<button ng-click="comment(inputValue)" ng-disabled="commentForm.$invalid">Save</button>  
<button ng-click="close()">Cancel</button>
</form>
</div>
Please suggest.
On click of the image which opens the modal, you can save the corresponding index of your JSON object. Create ng-model for your textarea using this index
to help you link the value with your existing JSON array object.
HTML:
<tr ng-repeat-start="select in selection">
<td style="overflow: hidden;">{{select.name}}</td>
<td style="overflow: hidden;">{{select.type}}</td>
<td style="overflow: hidden;">{{select.application}}</td>
<td>
<image ng-src="{{commentImg}}" width="20" height="20" ng-click="selectComment($index)"></image>
</td>
</tr>
Contoller
$scope.selectComment=function(index){
$scope.selection[index].textAreaVal="";
$scope.selectedIndex=index;
}
Modal:
<div class="dialog-panel3">
<div class="page-title">
Comments
</div>
<br>
<form name="commentForm">
<textarea class="textarea" ng-model="selection[selectedIndex].textAreaVal" required></textarea>
<br>
<br>
<button ng-click="comment(selection[selectedIndex].textAreaVal)" ng-disabled="commentForm.$invalid">Save</button>  
<button ng-click="close()">Cancel</button>
</form>
</div>
In bootstrap how to use comboBox with multiple checkbox option as in the attached image.
I used multiple checkbox option in dropdown list as below, but i do not wish drop down list with checkbox, instead wish to have like the image attached.
<select multiple="multiple"> .... </select>
From the below way i got the solution
<table>
<tr>
<td>
<div
style="max-height: 350px; overflow-y: scroll; width: 375px;background: white;"
class="scrollbar style-2">
<table class="table">
<thead align="center">
<tr>
<th style="text-align: center;background: #5cb85c;color : white;">List</th>
<th style="background: white;background: #5cb85c;color : white;"></th>
</tr>
</thead>
<tbody style="background: white;">
<%
for (int i = 0; i < 10; i++) {
%>
<tr style="border: 0">
<td style="border: 0">
<div class="[ form-group ]">
<input type="checkbox" name="fancy-checkbox-default_p3_ii<%=i%>"
id="fancy-checkbox-default_p3_ii<%=i%>" autocomplete="off" />
<div class="[ btn-group ]">
<label for="fancy-checkbox-default_p3_ii<%=i%>"
class="[ btn btn-success ]" style="top: 5px;"> <span
class="[ glyphicon glyphicon-ok ]"></span> <span> </span>
</label> <label for="fancy-checkbox-default_p3_ii<%=i%>"
class="[ btnCustom active ]"> Default Checkbox<%=i%>
</label>
</div>
</div>
</td>
</tr>
<%
}
%>
</tbody>
</table>
</div>
</td>
</tr>
</table>
here is my html code;
I want to fetch value of first checkbox which is already initialize and the by selecting another checkbox i can get value of first one
<div class="widget-body" style="display: block;">
<div class="widget-main">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>item</th>
<th>issued</th>
<th>received</th>
</tr>
</thead>
<tbody ng-repeat="emp in nodueitassets">
<tr>
<td>{{emp}}</td>
<td>
<input type="checkbox" value="{{emp}}" ng-model="checked" ng-init="checked=true" />
</td>
<td>
<input type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
JS CONTROLLER
I am implementing a search input box that should search based off of a certain property of the objects that are getting iterated over and I would like them to be selected using a radio button.
For example here is my code:
<span style="margin-bottom: 10px; display: inline-block;">Search: <input ng-model="searchText.CustomerName" /> </span>
<table id="Table1" class="alertTable">
<thead>
<tr>
<th class="xsmCol"><img src="/App_Themes/SkyKick/images/misc/clear.gif" class="iFlag" /></th>
<th>Subject</th>
<th>Customer</th>
<th>Type</th>
<th>Date</th>
<th class="smCol">Actions</th>
</tr>
</thead>
<tbody id="tbAlerts">
<tr ng-repeat-start="alert in alerts | filter:searchText" > <!-- | filter:searchText -->
<td><img src="/App_Themes/SkyKick/images/misc/clear.gif" data-tooltip="{{ alert.tooltip }}" class="{{ 'iAlert' + alert.AlertType }}"/></td>
<td>{{ alert.Summary }}</td>
<td>{{ alert.CustomerName }}</td>
<td>{{ alert.CreatedDate }}</td>
<td>{{ alert.Category }}</td>
<td>
<!-- Tricky little widget logic -->
</td>
</tr>
<tr ng-repeat-end class="alertDetail">
<td></td>
<td colspan="5" ng-bind-html="alert.Details"></td>
</tr>
</tbody>
</table>
As you can see, I am currently filtering based off of the CustomerName field in my array. However, I want to change the logic so that I can select between CustomerName, Subject, Type, and Date using a radio button. So if the user clicks the Date radio button, then the searchText will filter only based off the Date attribute. What is the best way to get this functionality?
Create a set of radio buttons which share the same ng-model value. Use that value to set the key on searchText:
<span style="margin-bottom: 10px; display: inline-block;">Search:
<input ng-model="searchText[selectedSearch]" ng-init="searchText = {};
selectedSearch='CustomerName'" />
</span>
<input type="radio" ng-model="selectedSearch" value="CustomerName" > Customer Name
<input type="radio" ng-model="selectedSearch" value="CreatedDate" > Created Date
<input type="radio" ng-model="selectedSearch" value="Category" > Category
Demo
angular.module('myApp', []).controller('candidateCtrl', function($scope) {
$scope.candidates = [
{name:'Goutam',role:'Engineer',country:'India'},
{name:'Carl',role:'Engineer',country:'Sweden'},
{name:'Margareth',role:'Doctor',country:'England'},
{name:'Hege',role:'Engineer',country:'Norway'},
{name:'Joe',role:'Engineer',country:'Denmark'},
{name:'Rathin',role:'Doctor',country:'India'},
{name:'Birgit',role:'Teacher',country:'Denmark'},
{name:'Mary',role:'Engineer',country:'England'},
{name:'Kai',role:'Teacher',country:'Norway'}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">
<div class="container" ng-controller="candidateCtrl">
<h2>Bootstrap inline Radio Buttons</h2>
<div class="row">
<div class="col-lg-4">
<p>Angular JS Filter by Radio Button</p>
<form>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Engineer">Engineer
</label>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Doctor">Doctor
</label>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Teacher">Teacher
</label>
</form>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Profession</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="candidate in candidates | filter:searchText:strict">
<td>{{candidate.name}}</td>
<td>{{candidate.role}}</td>
<td>{{candidate.country}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>