I have a table in my view and the values are not aligned. The first row is perfectly aligned, however the others are not. It seems like they are moving to right after each interaction.
Table's image
This is the view's code:
#model Dictionary<Especializacao, List<Consulta>>
#{
ViewData["Title"] = "Busca Agrupada";
DateTime minDate = DateTime.Parse(ViewData["minDate"] as string);
DateTime maxDate = DateTime.Parse(ViewData["maxDate"] as string);
}
<h1>#ViewData["Title"]</h1>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<div class="form-group">
<label for="minDate">Min Date</label>
<input type="date" class="form-control" name="minDate" value=#ViewData["minDate"]>
</div>
<div class="form-group">
<label for="maxDate">Max Date</label>
<input type="date" class="form-control" name="maxDate" value=#ViewData["maxDate"]>
</div>
</div>
<button type="submit" class="btn btn-primary">Pesquisar</button>
</form>
</div>
</nav>
#foreach (var especialGroup in Model)
{
<div class="panel panel-primary">
<div class="panel-heading bg-primary">
<h3 class="panel-title">Especialização: #especialGroup.Key.Nome, Total: #especialGroup.Key.TotalDeConsultas(minDate, maxDate)</h3>
</div>
<div class="panel-body">
<table class="table table-striped table-hover">
<thead>
<tr class="success">
<th>
Data
</th>
<th>
Valor
</th>
<th>
Doutor
</th>
</tr>
</thead>
<tbody>
#foreach (var item in especialGroup.Value)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Data)
</td>
<td>
#Html.DisplayFor(modelItem => item.Valor)
</td>
<td>
#Html.DisplayFor(modelItem => item.Doutor.Nome)
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
}
I don't know what I'm doing wrong. Everything seems to be ok with the code.
I could solve it by applying those lines:
<thead>
<tr class="success">
<th class="col-lg-2">
Data
</th>
<th class="col-lg-2">
Valor
</th>
<th class="col-lg-2">
Doutor
</th>
</tr>
</thead>
<tbody>
#foreach (var item in especialGroup.Value)
{
<tr>
<td class="col-lg-2">
#Html.DisplayFor(modelItem => item.Data)
</td>
<td class="col-lg-2">
#Html.DisplayFor(modelItem => item.Valor)
</td>
<td class="col-lg-2">
#Html.DisplayFor(modelItem =>item.Doutor.Nome)
</td>
</tr>
}
</tbody>
Related
I am trying to achieve the following format for my razor-page bootstrap implementation:
row
.col-8
.col-3 [nested]
.col-9 [nested]
.col-4
row
.col
|---|-----|----|
| ------------ |
This is what I currently have:
The green background signifies row 1, where the orange color is row 2.
I am guessing that row one is displaying like this due to the following code:
<div class="row" style="height:100vh;background:green">
When I change the starting row to this:
<div class="row" style="background:green">
I get this undesired layout:
I am trying to accomplish restricting the third column (large content) to the same height as the column on the left hand side. vh-100 resolves it, but it creates a massive gap between row 1 and row 2.
I just want to make sure I follow best practices and not hard code the column to a specific max-height constraint.
Any suggestions would be greatly appreciated.
Here is the entire cshtml I am working with:
<div class="row" style="height:100vh;background:green">
<div class="col-8 h-50">
<div class="row h-100">
<div class="card col-3 border-right-0 rounded-0">
<img src=#string.Format("URI/{0}?height=250", Model.UserDisc.EmployeeId0) style="object-fit:cover;width:100%">
</div>
<div class="card col-9 rounded-0">
<ul class="list-group list-group-flush">
<li class="list-group-item">#assocname</li>
<li class="list-group-item">#Model.UserDisc.Title0</li>
<li class="list-group-item">#Model.UserDisc.TelephoneNumber0</li>
<li class="list-group-item">#Model.UserDisc.EmployeeId0</li>
<li class="list-group-item">#Model.UserDisc.Sid0</li>
<li class="list-group-item">#Model.UserDisc.PhysicalDeliveryOfficeNam0</li>
<li class="list-group-item">#Model.UserDisc.HomeDirectory0</li>
<li class="list-group-item">
#if (!(Model.UserDisc.UserAccountControl0 == 512))
{
AD ACCOUNT: LOCKED
}
else
{
AD ACCOUNT: GOOD
}
</li>
<li class="list-group-item">
Manager: #mg
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
View Direct Reports
</button>
</li>
</ul>
</div>
</div>
</div>
<div class="col-4 h-50" style="overflow-y:auto">
#{
String isSearching = "visible";
if (Model.CurrentFilter?.Length > 1)
isSearching = "disabled";
else
isSearching = "visible";
}
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<div>
Total Groups: #Model.UserGroupMembership?.Count
</div>
<table id="myTable" class="table table-bordered table-striped mb-0">
<thead>
<tr>
<th>Groups</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.UserGroupMembership)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="row container-fluid w-100 h-100" style="background:orange">
<table class="table table-responsive" style="overflow:auto">
<thead class="thead-dark">
<tr>
<th scope="col">
#Html.DisplayNameFor(model => model.PCDetails[0].ResourceName)
</th>
<th>Status</th>
<th>
#Html.DisplayNameFor(model => model.PCDetails[0].CurrentLogonUser)
</th>
<th>
#Html.DisplayNameFor(model => model.PCDetails[0].PrimaryUser)
</th>
<th>
#Html.DisplayNameFor(model => model.PCDetails[0].LastLogonUser)
</th>
<th>
#Html.DisplayNameFor(model => model.PCDetails[0].Manufacturer)
</th>
<th>
#Html.DisplayNameFor(model => model.PCDetails[0].Model)
</th>
<th>
#Html.DisplayNameFor(model => model.PCDetails[0].SerialNumber)
</th>
<th>
#Html.DisplayNameFor(model => model.PCDetails[0].Architecture)
</th>
<th>
#Html.DisplayNameFor(model => model.PCDetails[0].OSCaption)
</th>
<th>
#Html.DisplayNameFor(model => model.PCDetails[0].OSInstallDate)
</th>
<th>
#Html.DisplayNameFor(model => model.PCDetails[0].LastHardwareScan)
</th>
<th>
#Html.DisplayNameFor(model => model.PCDetails[0].LastBootupTime)
</th>
<th>
#Html.DisplayNameFor(model => model.PCDetails[0].CNIsOnline)
</th>
<th>
#Html.DisplayNameFor(model => model.PCDetails[0].CNLastOnlineTime)
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.PCDetails)
{
var style = "offline";
if (item.CNIsOnline == true)
{
style = "online";
}
<tr>
<td>
#{
var n = item.ResourceName;
}
#n
</td>
<td>
#if (style == "online")
{
ONLINE
}
else
{
OFFLINE
}
</td>
<td>
#Html.DisplayFor(modelItem => item.CurrentLogonUser)
</td>
<td>
#Html.DisplayFor(modelItem => item.PrimaryUser)
</td>
<td>
#Html.DisplayFor(modelItem => item.LastLogonUser)
</td>
<td>
#Html.DisplayFor(modelItem => item.Manufacturer)
</td>
<td>
#Html.DisplayFor(modelItem => item.Model)
</td>
<td>
#Html.DisplayFor(modelItem => item.SerialNumber)
</td>
<td>
#Html.DisplayFor(modelItem => item.Architecture)
</td>
<td>
#Html.DisplayFor(modelItem => item.OSCaption)
</td>
<td>
#Html.DisplayFor(modelItem => item.OSInstallDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.LastHardwareScan)
</td>
<td>
#Html.DisplayFor(modelItem => item.LastBootupTime)
</td>
<td>
#Html.DisplayFor(modelItem => item.CNIsOnline)
</td>
<td>
#Html.DisplayFor(modelItem => item.CNLastOnlineTime)
</td>
</tr>
}
</tbody>
</table>
</div>
UPDATE:
I ended up modifying the right column table div to the following:
<div class="wub" style="overflow-y:auto;max-height:50vh;overflow-x:hidden">
I didn't realize I could use anything other than 100vh for that property.
In your table HTML mind the quotes:
<table id="myTable" class="table table-bordered table-striped mb-0" ">
A simple copy/paste into a jsfiddle points you to this issue.
(issue) https://jsfiddle.net/tive/gya9zu2k/1/ (ln: 103)
My suggestion is to not mix the column structure with content.
Remove the 100vh on the first row.
The h-50 or h-100 classes should go on your content, inside a column
Use a wrapper for your dynamic height on the groups
Similar for your card layout, the card is placed inside a column. Not the column is now a card, that's mixing structure and content.
<div class="your-wrapper" style="overflow-y:auto;max-height:100vh;">
<table id="myTable" class="table table-bordered table-striped mb-0"></table>
</div>
DEMO
I'm using latest bootstrap 4.0 and have an issue with overflowing table in Chrome browser.
In Firefox it scales correctly:
I have been trying several tricks and tips, but no luck. I wonder if it is some bug in Chrome actually?
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid ">
<div class="titled-container-header">
Täiendkoolitused - Standardolukorrad
</div>
<div class="titled-container-body">
<div class="row">
<div class="col-sm-auto">
<table class="table table-responsive table-secondary">
<tbody>
<tr valign="top">
<td class="label">Koolitusele pääsemise tingimused</td>
<td>Koolitus on mõeldud treeneritele,kelle treenitavad võistkonnad mängivad 11v11.
</td>
</tr>
<tr valign="top">
<td class="label">Info</td>
<td>Koolitus on mõeldud vähemalt EJL C litsentsi treeneritele, kelle treenitavad võistkonnad mängivad 11v11.
<br>
<br>Räägime standardolukordade tähtsusest jalgpallis -filosoofiad, trendid ja mängijate treenimise ning õpetamise
võimalustest.
</td>
</tr>
<tr valign="top">
<td class="label">Vabu kohti</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-auto pad-left">
<table class="table-bordered table-responsive table-primary">
<tbody>
<tr>
<th>
<label for="address">Elukoha aadress</label>
</th>
<td>
<input type="text" id="address" name="address">
</td>
</tr>
<tr>
<th>
<label for="phone">Telefon</label>
</th>
<td>
<input type="text" id="phone" name="phone">
</td>
</tr>
<tr>
<th>
<label for="email">Email</label>
</th>
<td>
<input type="text" id="email" name="email">
</td>
</tr>
<tr>
<th>
<label for="invoice_name">Arve saaja nimi</label>
</th>
<td>
<input type="text" id="invoice_name" name="invoice_name">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
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 have a table and ,in the note column , i should add long note that area. When i add very long note, the line expand but i just want to note settle new lines.
Example :
asyufgasdfhjdasfghfghasfhaahjfsghjahfjqjwjefqfeqwhkfwq
I want this :
jdsaaafjasasjs
ywewyuwqfyuyew
quyduquyqewfyy
And my table's code : (I want to fix td with 'thisone' id)
<div class="col-md-6">
<div class="content-box-large">
<div class="panel-heading">
<div class="panel-title">Notlar</div>
<div class="panel-options">
<i class="glyphicon glyphicon-refresh"></i>
<i class="glyphicon glyphicon-cog"></i>
</div>
</div>
<div class="panel-body">
<table class="table table-striped">
<?php if(mysqli_num_rows($listele)>0)
{ ?>
<thead>
<tr>
<th>Tarih</th>
<th>Saat</th>
<th>Dosya Notu</th>
<th>Notu Kaydeden Kişi</th>
</tr>
</thead>
<tbody>
<?php
$i=1;
while($not=mysqli_fetch_array($listele))
{
$tarih=$not["tarih"];
?>
<tr>
<td><?php echo date("d/m/Y",strtotime($tarih)); ?></td>
<td><?php echo date("H:i",strtotime($tarih)); ?></td>
<td id="thisone"><?php echo $not["dosya_not"]; ?></td>
<td><?php echo $not["calisan_adi"]; ?></td>
</tr>
<?php
$i++;
}
}?>
</tbody>
</table>
</div>
<div class="panel-body">
<table class="table table-striped">
<tr>
<td><input type="hidden" id="musteri_id" value="<?php echo $musteri_id; ?>"></td>
<td id="not"><textarea class="form-control" id="not_degeri" placeholder="Notu Giriniz" rows="3"></textarea></td>
<td id="buton"><button class="btn btn-primary" id="ekle">Yeni Not Ekle</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</di
v>
You can use word breaking option in CSS
td {
word-break: break-all;
}
<style>
td { word-break: break-all; }
</style>
<div class="col-md-6">
<div class="content-box-large">
<div class="panel-heading">
<div class="panel-title">Notlar</div>
<div class="panel-options">
<i class="glyphicon glyphicon-refresh"></i>
<i class="glyphicon glyphicon-cog"></i>
</div>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>Tarih</th>
<th>Saat</th>
<th>Dosya Notu</th>
<th>Notu Kaydeden Kişi</th>
</tr>
</thead>
<tbody>
<tr>
<td>sometext</td>
<td>some text</td>
<td id="thisone">lsdfjasdklfjasldajklsdfjkldfjklafsjklasdfjlkasdfjklafjklasdfjhklasdfjhklasdfjhklasdfajklasdfjklasdfjkl</td>
<td>some text</td>
</tr>
</tbody>
</table>
</div>
<div class="panel-body">
<table class="table table-striped">
<tr>
<td><input type="hidden" id="musteri_id" value=""></td>
<td id="not"><textarea class="form-control" id="not_degeri" placeholder="Notu Giriniz" rows="3"></textarea></td>
<td id="buton"><button class="btn btn-primary" id="ekle">Yeni Not Ekle</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I have a Bootstrap issue where my table disappears. When my page displays more than 1200 pixels wide my table shows perfectly. But when my page is shrunk to less than 1200 pixels wide my table disappears. I am not super advanced with bootstrap(not a design guy) so i am unsure what is causing the problem. I think it has something to do do with responsive tables. Also I have not edited my bootstrap.
<div class="row">
<div class="col-md-12">
<div class="panel panel-cascade">
<!-- heading-->
<div class="panel-heading text-primary">
<h3 class="panel-title">
Friends List
<span class="pull-right">
<i class="fa fa-chevron-up"></i>
<i class="fa fa-times"></i>
</span>
</h3>
</div>
<!-- body -->
<div class="panel-body">
<table class="table table-condensed table-hover">
<thead>
<tr>
<th class="visible-lg">First Name</th>
<th class="visible-lg">Last Name</th>
<th class="visible-lg">Phone Number</th>
<th class="visible-lg">Carrier</th>
<th class="visible-lg">Send Text</th>
</tr>
</thead>
<tbody>
#foreach (var row in Model)
{
<tr>
<td class="visible-lg">
#row.FirstName
</td>
<td class="visible-lg">
#row.LastName
</td>
<td class="visible-lg">
#row.PhoneNumber###row.Carriers[0].CarrierEmail
</td>
<td class="visible-lg">
#row.Carriers[0].CarrierName
</td>
<td class="visible-lg">
#using (Html.BeginForm("SendEmail", "Admin"))
{
#Html.Hidden("Id", row.Id)
<button type="submit" class="btn btn-success"><i class="fa fa-envelope"></i></button>
}
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
I think it is because of class you are using "visible-lg", wich means visible when large, bootstrap 3 uses 4 different sizes xs, sm, md, lg. take a read at this article http://getbootstrap.com/css/.
I use this classes in my tables and they work perfect.
<table id="proviers-table" class="table table-striped table-bordered">
<thead>
<tr>
<th>Nombre</th>
<th>Teléfono</th>
<th>Correo Electrónico</th>
<th>País</th>
<th>Entidad Federativa</th>
<th>Dirección</th>
<th></th>
</tr>
</thead>
<tr>
<td>coty</td>
<td>1234567890</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<div class="btn-group">
<button class="btn btn-default btn-xs edit-provider" id="1" >
<span class="glyphicon glyphicon-pencil"></span>
</button>
<button class="btn btn-default btn-xs edit-provider" id="1">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
</table>
here is my view:
when small: