Using this code:
<div class="details">
<strong>Publisher:</strong>
<span class="red"><asp:Label ID="LabelPublisher" runat="server"></asp:Label></span>
</div>
<div class="details">
<strong>Author:</strong>
<span class="red"><asp:Label ID="LabelAuthor" runat="server"></asp:Label></span>
</div>
<div class="details">
<strong>Year:</strong>
<span class="red"><asp:Label ID="LabelYear" runat="server"></asp:Label></span>
</div>
...text on browser appears like this:
Publisher: publisher1
Author: author1
Year: 2014
Now using CSS I want to shift text like this on each label:
Publisher:---Publisher1
Author:-----Author1
Year:------ 2014
You can give fixed min width to strong tag
.details strong {
display: inline-block;
min-width: 100px;
}
DEMO
You should use a table for displaying text in that way.
Here is an example: http://jsfiddle.net/h8tshvty/
<table>
<tr class="details">
<td><strong>Publisher:</strong></td>
<td class="red">Publishername</td>
</tr>
<tr class="details">
<td><strong>Author:</strong></td>
<td class="red">Author name</td>
</tr>
<tr class="details">
<td><strong>Year:</strong></td>
<td class="red">Yearnumber</td>
</tr>
</table>
Related
I am building a template for a site and it needs 4 columns. In desktop mode, or anything above tablet width, it should display all 4 columns though the outer 2 are only for padding. When in mobile mode, the outer 2 are set to disappear, but I need the middle two to reverse their order. I tried setting the 'col-' setting to reverse when under 480px, but it isn't working. I'd appreciate someone looking over my work.
HTML
<div id="inus1" class="fk-row row">
<div data-text="text" align="center" id="inyb3" class="fk-col order-1">
</div>
<div align="center" id="i80rh" class="fk-col order-2 order-xs-2">
<div id="ifo6l">
<div id="iq1zf" class="fk-headline">Thank you for your purchase!
</div>
<div data-text="text" id="ihleo">Order {{orderId}}
<div draggable="true" id="i6myy-2-2">
<div draggable="true" id="ii502-2-2-2">
<b data-text="text">
<span data-text="text" id="ix3j4">Thank you {{firstName}} {{lastName}}!</span>
</b>
</div>
</div>
</div>
</div>
<iframe frameborder="0" type="map" name="map" address="" zoom="1" maptype="q" id="in2gu" src="https://maps.google.com/maps?&z=1&t=q&output=embed"></iframe>
</div>
<div align="center" id="i33dp" class="fk-col order-3 order-xs-1">
<table id="orderSummaryTable" class="w-100">
<thead id="iweztk">
<tr id="ikyi1h">
<th colspan="3" id="i10uii">
<span data-text="text" id="iqvl9r">Order Summary</span>
</th>
</tr>
<tr id="ieggiv">
<th id="inwrj">
<span data-text="text" id="ipokfh">Item</span>
</th>
<th id="i259c">
<span data-text="text" id="i5gfso">Quantity</span>
</th>
</tr>
</thead>
<tbody id="items-list">
<tr>
<td class="cell cell-items-list">
</td>
</tr>
</tbody>
</table>
</div>
<div align="center" id="ijiyf" class="fk-col order-4">
</div>
</div>
CSS (just the media query)
#media (max-width: 480px){
#in2gu{
width:615px;
height:350px;
}
#i80rh{
width:100%;
}
#i33dp{
width:100%;
}
#inyb3{
display:none;
}
#ijiyf{
display:none;
}
#in2gu{
width:615px;
height:350px;
}
}
Bootstrap comes with ordering utilities. Try them by appending order-0, order1, etc. to your elements
https://getbootstrap.com/docs/4.0/utilities/flex/#order
I am trying top align the table within my grid list so all the tables across the rows line up.
I am using layout="column" layout-align="start center"> base on https://material.angularjs.org/latest/layout/alignment#layout-row-layout-align-center-center.
However, it is not still not working, the tables are center align rather than top align.
Any suggestion?
<md-content>
<md-grid-list md-cols="3" md-gutter="1em" md-row-height="2:1" >
<md-grid-tile ng-repeat="user in users" class="curvetable2" layout="column" layout-align="start center">
<md-grid-tile-header class="curvetable3" >
<h3><a style="color:white" ng-click="userCompletedCoursesDisplay(user.username, user.name)">{{user.name}}</a> <a ng-if="user.ismanager == 'yes'" style="color:#ffff99" ng-click="directManager(user.username, user.name)"> Manager - View Team</a></h3>
</md-grid-tile-header>
<div style="width:90%;">
</br></br>
<table style="width:100%;" >
<tr ng-repeat="course in user.course">
<td valign="top"><a ng-click="courseDisplay(course.id, user.username, 'organization')">{{course.name}}</a></td>
<td valign="top">{{course.date}} </td>
</tr>
<tr ng-if="user.more==true">
<td valign="top"><a ng-click="userCompletedCoursesDisplay(user.username, user.name)">Additional Courses</a></td>
</tr>
</table>
</div>
</md-grid-tile>
</md-grid-list>
</md-content>
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 tried to use bootstrap row and columns classes inside a for each loop and some extra spaces are displayed as unexpected.
First I used the following code and it worked well.
<table border="0" id="myTable" class="table" >
<thead border-bottom="0">
<tr>
<th border-bottom="0" style="display: none;">Gem</th>
<th border-bottom="0" style="display: none;">Name</th>
</tr>
</thead>
<tbody>
#foreach(App\GemStone::where('active',TRUE)->orderBy('created_at', 'desc')->get() as $gemStone)
<div class="row">
<tr>
<td style="display: none;" >{{$gemStone->created_at}}</td>
<td>
<div class="col-sm-3">
<div align="center">
<img alt="Gem Stone Pic" src="{{route('get_image',['id' => $gemStone->id])}} " class="img-circle img-responsive">
</div>
</div>
<div class="col-sm-3">
<h3><b>{{$gemStone->type->type}}</b></h3>
#if($gemStone->shop->user->id == Auth::user()->id)
[Edit]<br>
#endif
{{$gemStone->size->size}}<br>
LKR: {{$gemStone->price}}<br>
<div>
{{$gemStone->description}}<br>
{{$gemStone->created_at}}
</div>
</div>
<div class="col-sm-3"> free space of 3 cols </div>
<div class="col-sm-3">free space of 3 cols </div>
</td>
</tr>
</div>
#endforeach
</tbody>
</table>
above code gave a view like this image. In order to use the free space marked in the picture, I tried adding another column by creating another <td> ... </td> inside <tr> </tr> using $counter variable as below.
<table border="0" id="myTable" class="table" >
<thead border-bottom="0">
<tr>
<th border-bottom="0" style="display: none;">Gem</th>
<th border-bottom="0" style="display: none;">Name</th>
<th border-bottom="0" style="display: none;">Name</th>
</tr>
</thead>
<tbody>
<?php $count = 0 ?>
#foreach(App\GemStone::where('active',TRUE)->orderBy('created_at', 'desc')->get() as $gemStone)
<?php $count = $count + 1 ?>
#if($count % 2)
<tr>
<div class="row">
<td style="display: none;" >{{$gemStone->created_at}}</td>
#endif
<td>
<div class="col-sm-3">
<div align="center">
<img alt="Gem Stone Pic" src="{{route('get_image',['id' => $gemStone->id])}} " class="img-circle img-responsive">
</div>
</div>
<div class="col-sm-3">
<h3><b>{{$gemStone->type->type}}</b></h3>
#if($gemStone->shop->user->id == Auth::user()->id)
[Edit]<br>
#endif
{{$gemStone->size->size}}<br>
LKR: {{$gemStone->price}}<br>
<div>
{{$gemStone->description}}<br>
{{$gemStone->created_at}}
</div>
</div>
</div>
</td>
#if(!($count % 2))
</div>
</tr>
#endif
#endforeach
#if($count%2)
<td>extra cell when odd</td>
</div>
</tr>
#endif
Result looked like this which is unexpected. I tried changing the place of <div class='row'> and <div class = 'col-s6'>in several ways, but nothing worked. And I couldn't really find a mistake in the code as well . It would be grateful if someone can point where I go wrong while using the columns and row classes.
And I'm using jquery datatables to get the table view.
Add the bootstrap classes to your table elements, instead of adding additional div elements.
<table>
<tr class="row">
<td class="col-md-4">1</td>
<td class="col-md-4">2</td>
<td class="col-md-4">3</td>
</tr>
</table>
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