I am using the GetSkeleton CSS framework to build my website and I've broken it down in currently 3 sections. I have my header which contains my navigation and a logo. Then underneath I have my main content which is split into 2, as Skeleton uses columns I have a sidebar which is two columns and my main section is ten columns. How can I stretch my sidebar and main section to 100% height? I don't want any footers or anything, just 100% height from those sections?
Example of Website
Above is a screen shot of my website so far, so you can see I want that red and blue to stretch right to the bottom of the website.
This is the framework I'm using: http://getskeleton.com
And here is my HTML code;
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container u-full-width">
<div style="padding: 10px;">
<div class="row">
<!-- Navigation Bar -->
<div class="twelve columns">
<?php include 'includes/navbar.php'; ?>
</div>
</div>
<div class="row" style="padding-top: 5%;">
<!-- Side Bar -->
<div class="two columns link-coloured" style="background-color: blue;">
<h2>Customers</h2>
<hr>
<br /><br />
<h5>Live Leads (3)</h5>
<h5>Action Required <span style="color: red;">(5)</span></h5>
<h5>Notifications <span style="color: orange;">(2)</span></h5>
<h5>New Leads <span style="color: green;">(11)</span></h5>
</div>
<!-- Main Content Section -->
<div class="ten columns" style="background-color: red;">
<h1>Live Leads</h1>
<hr>
<button class="button-primary">Add New Lead</button>
<br /><br />
<table>
<tr>
<th>Customer Name</th>
<th>Date Added</th>
<th>Status</th>
</tr>
<tr>
<td>Name 2</td>
<td>08/09/2019</td>
<td><span style="color: green">Vehicle Sold</span></td>
</tr>
<tr>
<td>Name 3</td>
<td>09/07/2019</td>
<td><span style="color: blue">Prospect</span></td>
</tr>
<tr>
<td>name 4</td>
<td>10/07/2019</td>
<td><span style="color: red">Archived</span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
I think This will be working fine
<!DOCTYPE html>
<html>
<head>
<title>tt</title>
<link rel="stylesheet" type="text/css" href="skeleton.css">
</head>
<body>
<div style="padding: 10px;">
<div class="row">
<!-- Navigation Bar -->
<div class="twelve columns">
<?php include 'includes/navbar.php'; ?>
</div>
</div>
<div class="row" style="padding-top: 5%; ">
<!-- Side Bar -->
<div class="two columns link-coloured" style="background-color: blue; height: calc(100vh - 140px)">
<h2>Customers</h2>
<hr>
<br /><br />
<h5>Live Leads (3)</h5>
<h5>Action Required <span style="color: red;">(5)</span></h5>
<h5>Notifications <span style="color: orange;">(2)</span></h5>
<h5>New Leads <span style="color: green;">(11)</span></h5>
</div>
<!-- Main Content Section -->
<div class="ten columns" style="background-color: red;height: calc(100vh - 140px)">
<h1>Live Leads</h1>
<hr>
<button class="button-primary">Add New Lead</button>
<br /><br />
<table>
<tr>
<th>Customer Name</th>
<th>Date Added</th>
<th>Status</th>
</tr>
<tr>
<td>Name 2</td>
<td>08/09/2019</td>
<td><span style="color: green">Vehicle Sold</span></td>
</tr>
<tr>
<td>Name 3</td>
<td>09/07/2019</td>
<td><span style="color: blue">Prospect</span></td>
</tr>
<tr>
<td>name 4</td>
<td>10/07/2019</td>
<td><span style="color: red">Archived</span></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Related
How to remove gap between two td ? I have tried some below solutions
from the Internet but none of them work. Attached the screenshot for
reference too. It will give clear idea of problem. The gap between two TD is very wide. How to reduce this Gap.
class="align-middle"
CELLSPACING=0
row-gap: 0;
class="views-field views-field-region views-align-center"
<app-header></app-header>
<section class="container">
<div class="row" style="background-color: white;">
<div class="col-xs-12 col-sm-8 col-md-4" >
<form action="/update/pricelist" method="POST" id="upload-file" enctype="multipart/form-data">
<h3>Import Pricelist</h3>
<hr>
<div class="wrapper-messages">
</div>
<br>
<input type="file" name="price_list" id="edit_price_list" (change)="ReadExcel($event)">
<div class="error-msg"></div>
<hr>
<div class="views-exposed-widget views-submit-button">
<button type="submit" class="btn btn-info form-submit icon-before submit-pricelist">
<span class="icon glyphicon glyphicon-ok" aria-hidden="true"></span>
Import
</button>
</div>
<br>
</form>
</div>
</div>
</section>
<!-- Table for excel -->
<div class="main-container container-fluid">
<div class="row">
<section id="block-views-exp-land-page" class="block block-views clearfix">
<form autocomplete="off" action="" method="post" id="views-exposed-form-land-page" accept-charset="UTF-8">
<div>
<section id="block-system-main" class="block block-system clearfix">
<div
class="view view-land view-id-land view-display-id-page table-checkbox-all view-dom-id-8d32f83bab6c36c396b926a7c7c35f7f">
</div>
<div class="view-content">
<div class="table-responsive" class="col-10" class="row align-items-center" class="col-md-12">
<table class="views-table cols-16 table table-hover table-0 table-0 table-0 neilsoft-region-table">
<thead class="neilsoft-region-table-head">
<tr>
<th class="views-field views-field-region views-align-center">
Autodesk Material Description
</th>
<th class="views-field views-field-php-4 views-align-center">
Autodesk SAP Material Description
</th>
<th class="views-field views-field-php-2 views-align-center">
Product Coming From
</th>
<th class="views-field views-field-php-2 views-align-center">
Media
</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="view-content">
<div class="table-responsive" class="col-10" class="row align-items-center" class="col-md-12">
<table class="views-table cols-16 table table-hover table-0 table-0 table-0 neilsoft-region-table">
<thead class="neilsoft-region-table-head">
<tr *ngFor="let pricedata of ExcelData" class="align-middle">
<td>
{{pricedata.Autodesk_Material_Description}}
</td>
<td>
{{pricedata.Autodesk_SAP_Material_Description}}
</td>
<td>
{{pricedata.Product_Coming_From}}
</td>
<td>
{{pricedata.Media}}
</td>
</tr>
</thead>
</table>
</div>
</div>
</section>
</div>
</form>
</section>
</div>
</div>
<app-footer></app-footer>[enter image description here][1]
I suggest you looking for html table colspan (https://html.com/tables/rowspan-colspan/). With colspan you can merge two td cells. Take a look in the example below:
td {
width: 30px;
}
<table border="1">
<tr>
<td colspan="2">Merged</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Perhaps border-collapse: collapse; is what you’re missing?
td {
background: red;
color: white;
padding: 0.5em;
}
.t1 {
margin-top: 2em;
border-collapse: collapse;
}
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>
<table class="t1">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>
<div class="container">
<div class="row content">
<div class="col-sm-1 sidenav" style="background-color:blue">
</div>
<div class="col-sm-2" style="background-color:orange">
<div align="center" style="background-color:pink">
<img class="img-circle" src="http://placehold.it/100x100" style="padding-top:10px;">
<h3>JOHN</h3>
</div>
<div class="navbar-default" role="navigation" style="background-color:purple">
<ul class="nav" id="side-menu">
<li>Profile</li>
<li>Published</li>
<li>Bookmarked</li>
</ul>
</div>
</div>
<div class="col-sm-8" style="background-color:yellow">
<h3>Personal Information</h3>
<table id="personal-information" class="table" align="left">
<tbody>
<tr>
<td>Joined:</td>
<td>2018-02-10</td>
</tr>
<tr>
<td>Last Active:</td>
<td>2019-10-15 12:15:17</td>
</tr>
<tr>
<td>Gender:</td>
<td>MALE</td>
</tr>
<tr>
<td>Age:</td>
<td>26</td>
</tr>
<tr>
<td>About me:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-1 sidenav" style="background-color:blue" >
</div>
</div>
</body>
view
I cleaned it up as much as possible. I also added colors to each div so it's clear to see.
I divided up my page into 4. 2 of them called sidenavs to create spaces on both sides to center view my main content, 1 is for the user image, name and nav buttons and the other one is for other content like personal info and will probably add more. So i divided them respectively: 1 - 2 -8 - 1
My problem is that, i don't understand the current alignment of my columns, As you can see from the image, side nav blue which should be at the right edge is now at the bottom. I made sure that all my columns sizes add up to 12 which is the maximum so i don't know why the other div is pushed down to the next row.
P.S. all those weird html names like sidenav even though it's not a navigation bar which is on the side. And the row content with an already div container. I copy pasted whole html page code from free bootstrap template(you can actually see the resemblance if you downloaded some of them - i'm not good at deciding how to design my pages so i just decided to pick from a template and tweak it however i want)
Is this how it's meant to look?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<div class="row content">
<div class="col-sm-1 sidenav" style="background-color:blue">
</div>
<div class="col-sm-2" style="background-color:orange">
<div align="center" style="background-color:pink">
<img class="img-circle" src="http://placehold.it/100x100" style="padding-top:10px;">
<h3>JOHN</h3>
</div>
<div class="navbar-default" role="navigation" style="background-color:purple">
<ul class="nav" id="side-menu">
<li>Profile</li>
<li>Published</li>
<li>Bookmarked</li>
</ul>
</div>
</div>
<div class="col-sm-8" style="background-color:yellow">
<h3>Personal Information</h3>
<table id="personal-information" class="table" align="left">
<tbody>
<tr>
<td>Joined:</td>
<td>2018-02-10</td>
</tr>
<tr>
<td>Last Active:</td>
<td>2019-10-15 12:15:17</td>
</tr>
<tr>
<td>Gender:</td>
<td>MALE</td>
</tr>
<tr>
<td>Age:</td>
<td>26</td>
</tr>
<tr>
<td>About me:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-1 sidenav" style="background-color:blue">
</div>
</div>
</div>
If so, you had
<div class="col-sm-1 sidenav" style="background-color:blue"></div>
Outside of
<div class="row content"></div>
See here: JSFiddle
I'm not a web designer. I was trying to design a web layout with some scrollable columns which contains some data in the form of anchor tags which are loaded dynamically. I've designed a html table structure along with a style sheet to achieve this. Source code of this table is as shown below
<table>
<tr>
<!--COLUMN HEADERS -->
<td id="titles" style="width: 50%">
<b style="padding-left: 4%">CURRENCY</b>
<b style="padding-left: 9%">COUNTRY</b>
<b style="padding-left: 8%">SECTOR</b>
<b style="padding-left: 4%">LOCATION COUNT</b>
</td>
</tr>
<tr>
<td style="width: 50%">
<!--1st COLUMN TO HOLD COUNTRY NAMES -->
<div id="column">
<div ng-repeat="currency in allCurrencies">
<a href=""
ng-click="filterProductByCurrency(currency); filterCountryByCurrency(currency); filterSectorByCurrency(currency)">
<span ng-bind="currency"></span> <br>
</a>
<input type="hidden" name="currencyHolder" ng-model="selCurrency">
</div>
</div>
<!--2nd COLUMN TO HOLD CURRENCY NAMES -->
<div id="column">
<div ng-repeat="country in allCountries">
<a href=""
ng-click="filterProductByCountry(country); filterSectorByCurrAndCtry(country)">
<span ng-bind="country"></span> <br>
</a>
<input type="hidden" name="countryHolder" ng-model="selCountry">
</div>
</div>
<!--3rd COLUMN TO HOLD SECTOR NAMES -->
<div id="column">
<div ng-repeat="sector in allSectors">
<a href="" ng-click="filterProductBySectors(sector); filterLocBySectors(sector)"> <span
ng-bind="sector"></span> <br>
</a>
<input type="hidden" name="variantHolder" ng-model="selVariant">
</div>
</div>
<!--4th COLUMN TO HOLD LOCATION COUNT RANGE -->
<div id="column">
<div ng-repeat="locCount in locationRangeValues">
<a href="" ng-click="filterProductByRange(locCount)">
<span ng-bind="locCount"></span> <br>
</a>
</div>
</div>
</td>
</tr>
</table>
And the CSS styling for class coulmn is as shown below
#column {
background-color: #f5f5f5;
float: left;
width: 14%;
height: 125px;
overflow: auto;
overflow-y: scroll;
white-space: nowrap;
text-align: center;
}
And CSS styling for class for titles is as given below
#titles{
background-color: #f5f5f5;
color: #069;
fill: #069;
}
This works fine, but the issue with this setup is it's not responsive. I've interagted bootstrap within my application. Is there any way to make this setup more responsive using bootstrap? Please help.
To make any table responsive just place the table inside a <div> element and apply the class .table-responsive on it, as demonstrated in the example below:
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Biography</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
<td>johncarter#mail.com</td>
<td>Lorem ipsum dolor sit amet…</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker#mail.com</td>
<td>Vestibulum consectetur scelerisque…</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo#mail.com</td>
<td>Integer pulvinar leo id risus…</td>
</tr>
</tbody>
</table>
</div>
see working ex here
View this example. add bootstrap headers and responsive class to the divs
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Table</h2>
<p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
There are way to change the td to div by using jQuery and css but not easy and you need to write different css for every table in your application, for more detail see this
If you don't want to write css use RAHUL suggestion for scroll-able table for smaller screen by using bootstrap.
I have a bootstap modal with tabs in the modal body. In each tab i have a regular table, the rows are later appended into the table with jquery.
My issue is that the text in the columns never linebreak, so the right side of the table is shown outside of the modal body.
How can i fix this? This is my HTML modal.
<div class="modal modal-wide fade" id="detailsmodal" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="details">Detaljer</h4>
</div>
<div class="modal-body" id="detailsmodalBody">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">MetaData</li>
<li>Enhet</li>
<li>Appar</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="MetaDataTab">
<br />
<br />
<table id="detailvalues" class="table table-bordered">
<thead>
<tr bgcolor="#4d4f53">
<th>Metadata</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>AppleID#1: </td>
<td id="modalMetaDataCol1">No data</td>
</tr>
<tr>
<td>AppleID Password#1: </td>
<td id="modalMetaDataCol2">No data</td>
</tr>
<tr>
<td>AppleID#2: </td>
<td id="modalMetaDataCol3">No data</td>
</tr>
<tr>
<td>AppleID Password#2: </td>
<td id="modalMetaDataCol4">No data</td>
</tr>
<tr>
<td>SIMpin: </td>
<td id="modalMetaDataCol5">No data</td>
</tr>
<tr>
<td>Losekod: </td>
<td id="modalMetaDataCol6">No data</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane" id="EnhetTab">
<br />
<br />
<table class="table table-bordered" id="devicedetailsTable">
<thead>
<tr bgcolor="#4d4f53">
<th>Detalj</th>
<th>Värde</th>
</tr>
</thead>
<tbody id="devicedetails">
</tbody>
</table>
</div>
<div class="tab-pane" id="ApparTab">
<br />
<br />
<table class="table table-bordered">
<thead>
<tr bgcolor="#4d4f53">
<th>Apps</th>
</tr>
</thead>
<tbody id="appvalues">
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
try using word-wrap:break-word in your css to break the line in the coloumn and width:auto for your table to restrict its size in the modal.
even after setting the tr:last-child's border: none, border is still visible. The edit button should be after the last row. But it got position left. http://jsfiddle.net/priyaa2002/mBfk8/ Here is how it should be
You have a floating <tr> and a floating </div>:
<div id="wrapper">
<div class="para">
<table id="info-table">
<tr>
<td>name:</td>
<td id="name">name</td>
</tr>
<tr>
<td>id:</td>
<td id="myid">myuid</td>
</tr>
<tr>
<td>email:</td>
<td id="email">mysuperemail#email.com</td>
</tr>
<tr> <!-- WHY? -->
</table>
</div>
<div class="edit">
<button type="submit">edit</button>
</div>
</div> <!-- WHY? -->
Get rid of them like so:
<div id="wrapper">
<div class="para">
<table id="info-table">
<tr>
<td>name:</td>
<td id="name">name</td>
</tr>
<tr>
<td>id:</td>
<td id="myid">myuid</td>
</tr>
<tr>
<td>email:</td>
<td id="email">mysuperemail#email.com</td>
</tr>
</table>
</div>
<div class="edit">
<button type="submit">edit</button>
</div>
In the future validate your HTML ;)