I can't find in Docs if there is this:
https://plnkr.co/edit/zIcna8yqlScotLwcZGX9
From this:
to this:
Code for StackOverflow policy:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<br>
<br>
<div class="ui container">
<div class="ui segment">
<p>Normal table in segment.</p>
<br>
<table class="ui celled table">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">
<div class="ui right floated pagination menu">
<a class="icon item">
<i class="left chevron icon"></i>
</a>
<a class="item">1</a>
<a class="item">2</a>
<a class="item">3</a>
<a class="item">4</a>
<a class="icon item">
<i class="right chevron icon"></i>
</a>
</div>
</th>
</tr>
</tfoot>
</table>
</div>
</div>
<br>
<br>
<div class="ui container">
<div class="ui segment" style="padding: 0">
<p style="color:red">Expanded table in segment, something like this:</p>
<br>
<table class="ui celled attached table">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">
<div class="ui right floated pagination menu">
<a class="icon item">
<i class="left chevron icon"></i>
</a>
<a class="item">1</a>
<a class="item">2</a>
<a class="item">3</a>
<a class="item">4</a>
<a class="icon item">
<i class="right chevron icon"></i>
</a>
</div>
</th>
</tr>
</tfoot>
</table>
</div>
</div>
</body>
</html>
And StackOverflow ask me also to explain it better with more details. Maybe this is enough? No, it's unbelievable. Ok I go on. Again. And again.
Also now. It'incredible. Again, more text, more words, more power, more time. Thanks StackOverflow. many thanks.
Related
he guys i have a annoying issue i need your help i have a picture which size is:
W:814px
H:685
should be placed on the left side of the page ,I have a table which should be placed on the right side of the page,I thought I can achieve it with a simple bootstrap below:
<div class="container">
<div class="row">
<div class="col-sm-6">
<img src="" alt="">
</div>
<div class="col-sm-6">
<table>
</table>
</div>
</div>
</div>
but it becomes like the screen shot i have added here
i dont wana change the size of the pic
Here everything looks better with bootstrap latest version! Could you inspect your page
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-6">
<img src="https://unsplash.it/640/425" class="img-fluid"/>
</div>
<div class="col-sm-6">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I have read 10+ other questions about horizontally scrolling tables, but nothing seems to apply to this issue.
With the default Blazor Server template in a new project - built with Bootstrap 4 - browser window scrollability isn't eliminated when using a responsive table.
Bootstrap's .table-responsive - which uses overflow-x: auto; is designed to work when its parent has a fixed width. Even with that in place, the horizontal scroll on the window is still there.
Reduced Case
This example uses Bootstrap's underlying CSS - overflow-x: auto; - to be as reduced a test case as possible. The issue may be with how flex works. There are multiple divs between the flex parent and the overflow-x: auto;.
Open the following Codeply view, reduce the width of your browser to its smallest width, and notice that the table scrolls but the window also still scrolls.
https://www.codeply.com/v/FbZndMn15v
Code
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LayoutTest</title>
<base href="/">
</head>
<body>
<app style="display: flex; flex-direction: row;">
<div class="sidebar">
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">LayoutTest</a>
<button class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse">
<ul class="nav flex-column">
<li class="nav-item px-3">
<a href="" class="nav-link active">
<span class="oi oi-home" aria-hidden="true"></span> Home
</a>
</li>
<li class="nav-item px-3">
<a href="counter" class="nav-link">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</a>
</li>
<li class="nav-item px-3">
<a href="fetchdata" class="nav-link">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</a>
</li>
</ul>
</div>
</div>
<div style="width: 500px;">
<div style="overflow-x: auto;">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>
</div>
</app>
</body>
</html>
The solution here is to hide overflow-x on the parent flex element and set min-width to 0 for its child that is an ancestor of the element that should overflow.
https://www.codeply.com/v/k63CkWZrRH
Code
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LayoutTest</title>
<base href="/">
</head>
<body>
<app style="display: flex; flex-direction: row; overflow-x: hidden;">
<div class="sidebar">
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">LayoutTest</a>
<button class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse">
<ul class="nav flex-column">
<li class="nav-item px-3">
<a href="" class="nav-link active">
<span class="oi oi-home" aria-hidden="true"></span> Home
</a>
</li>
<li class="nav-item px-3">
<a href="counter" class="nav-link">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</a>
</li>
<li class="nav-item px-3">
<a href="fetchdata" class="nav-link">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</a>
</li>
</ul>
</div>
</div>
<div style="min-width: 0;">
<div style="overflow-x: auto;">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>
</div>
</app>
</body>
</html>
I'm using Bootstrap 4 with Datatables for jquery. Actually all works well for the datatables integration, but I have a little problem with the sidebar. I'm trying to add a sidebar to the left side of the datatables, this is the html that I'm using:
<div class="row">
<div class="col-12">
<div class="card">
<a data-toggle="collapse" href="#fixtures" role="button"
class="btn btn-rounded hide-btn btn-sm ml-1" aria-expanded="false" aria-controls="fixtures">
<i class="mdi mdi-view-agenda"></i>
</a>
<div class="card-body collapse show rounded-full-margin" id="fixtures">
<div class="container-fluid">
<div class="row">
<div class="col-3 px-1 bg-dark" id="sticky-sidebar">
<div class="py-2 sticky-top">
<div class="nav flex-column">
Sidebar
Link
Link
Link
Link
Link
</div>
</div>
</div>
<div class="col" id="main">
<h4 class="header-title text-center">Matches</h4>
<table id="fixtures-datatable" class="table dt-responsive nowrap">
<thead>
<tr>
<th class="sorting">League</th>
<th class="sorting">Hour</th>
<th class="sorting text-center">Home</th>
<th class="sorting text-center">Result</th>
<th class="sorting text-center">Away</th>
</tr>
</thead>
<tbody>
<tr>
<td>BR,Brazil: Serie B</td>
<td>00:15</td>
<td class="text-right">
Guarani
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/316.png" height="20" />
</td>
<td class="text-center">0 - 2</td>
<td class="text-left">
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/307.png" height="20" />
Goiás
</td>
</tr>
<tr>
<td>BR,Brazil: Serie B</td>
<td>01:30</td>
<td class="text-right">
São Bento
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/6120.png" height="20" />
</td>
<td class="text-center">1 - 0</td>
<td class="text-left">
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/322.png" height="20" />
Paysandu
</td>
</tr>
<tr>
<td>BR,Brazil: Serie B</td>
<td>01:30</td>
<td class="text-right">
Juventude
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/314.png" height="20" />
</td>
<td class="text-center">0 - 1</td>
<td class="text-left">
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/305.png" height="20" />
Criciúma
</td>
</tr>
<tr>
<td>BR,Brazil: Serie B</td>
<td>00:15</td>
<td class="text-right">
Avaí
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/330.png" height="20" />
</td>
<td class="text-center">1 - 0</td>
<td class="text-left">
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/344.png" height="20" />
CRB
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- End card-body -->
</div>
</div>
</div>
as you can see I wrapped the sidebar and the datatables html inside a row(which is also inside a container-fluid) for have the elements in one row. Then, I created two columns to create the responsive layout, the problem is that I get the following:
As you can see the sidebar doesn't go to the left side of the datatables but goes to the top, and this is wrong.
I created a JSFIDDLE here.
Thanks for any help.
Add the stylesheet into your <head> and it seems to work fine with the menu bar on the left as expected.
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
</head>
If you check the console, you'll see that the bootstrap stylings weren't showing up from the link you provided.
I'm currently making a page that will display a list of customers, and will have a button to add new customers. I want the button to add new customers to be in line with the page-header, but keep the formatting (underline) that is currently already in place from the page-header.
This is what I want it to look like:
I tried this, but can't get them to overlap:
https://jsfiddle.net/2ys2zp8z/
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Customers</h1>
</div>
<div class="col-lg-2 col-lg-push-10 text-right">
<a class="btn btn-primary">New Customer</a>
</div>
</div>
You can either move the a tag to inside the h1 and give it the pull-right class like so
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Customers
<a class="btn btn-primary pull-right">New Customer</a>
</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
</tbody>
</table>
</div>
</div>
or you can wrap the text in the h1 with a span and add pull-left to it while also adding text-right class to the h1.
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);
<div class="row">
<div class="col-lg-12">
<h1 class="page-header text-right">
<span class="pull-left">Customers</span>
<a class="btn btn-primary">New Customer</a>
</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
</tbody>
</table>
</div>
</div>
just change the class .col-lg-12 to .col-lg-10 and .col-lg-12 to .col-lg-2
something like that.
SEE DEMO
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<h1 class="page-header">Customers</h1>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<a class="btn btn-primary">New Customer</a>
</div>
</div>
OR
<div class="row">
<div class="col-lg-12">
<h1 class="page-header pull-left">Customers</h1>
<a class="btn btn-primary pull-right" style="padding-top: 15px;">New Customer</a>
</div>
</div>
Updated Fiddle see the working fiddle
<div class="row">
<div class="col-lg-12">
<h1 class="page-header" >Customers
<a class="btn btn-primary" style="float:right;margin-right:5px;">New Customer</a>
</h1>
</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: