I am using Bootstrap 4 with float-left and float-right classes that keep my 2 divs left and right of each other and works great, but I want the right div to be sticky as well, but this doesnt seem to work. I am using position-sticky on the div using float-right
Float class Reference here: Float URL
Sticky class Reference: Position URL
Essentially my HTML looks like this:
<section class="section">
<div class="float-left col-md-8">
<div class="row sameheight-container">
<div class="col-md-12">
#*Form fields, such as input, select etc.*#
</div>
</div>
</div>
<div class="float-right col-md-4 position-sticky">
<div class="row sameheight-container">
<div class="col-md-12">
<div class="card card-block sameheight-item">
<table>
<thead>
<tr>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>3</td>
<td>6</td>
</tr>
<tr>
<td>5</td>
<td>10</td>
<td>50</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Please note that the first Div has a bunch of form controls, so I have removed that and just put a comment in there.
Is there a way of doing this?
Thanks for any help!
Related
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 2 years ago.
I've seen multiple examples of how to center a bootstrap card but none of them fits my needs. I'm trying to center a bootstrap card vertical and horizontal so the card is placed exactly in the center of the screen. I want to achieve this by using only bootstrap classes like mx-auto etc. I've been trying for few hours but havent come to a solution yet, this is the code im working with:
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12">
<div class="card h-100 login-card">
<div class="card-body">
<h5 class="card-title">Login</h5>
<h6 class="card-subtitle text-muted">You can login here</h6>
</div>
<table class="table table-borderless table-hover h-75">
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
</table>
</div>
</div>
That results in this:
What I'm trying to get:
Hope someone can help me out and find the best solution to achieve this!
Thank you!
CSS:
.row{
height: 100vh;
}
HTML :
<div class="row d-flex justify-content-center align-items-center">
<div class="col-lg-3 col-md-3 col-sm-12">
<div class="card h-100 login-card">
<div class="card-body">
<h5 class="card-title">Login</h5>
<h6 class="card-subtitle text-muted">You can login here</h6>
</div>
<table class="table table-borderless table-hover h-75">
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
</table>
</div>
</div>
I'm having difficult getting the headers of a table to center. The table HTML is below:
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Photo</th>
<th>Description</th>
<th>Location</th>
<th><span class="d-none d-md-flex text-center">Disposition</span><span class="d-flex d-md-none mx-auto">Dispo</span></th>
<th class="text-right">Price</th>
<th><span class="d-none d-md-flex mx-auto">Match %</span><span class="d-flex d-md-none mx-auto">Match</span></th>
</tr>
</thead>
<tbody id="lisc_recs"></tbody>
</table>
</div>
It's this particular column that is giving me heartburn:
<th><span class="d-none d-md-flex text-center">Disposition</span><span class="d-flex d-md-none mx-auto">Dispo</span></th>
I can get it to center normally using .text-center if there is no responsive display elements inside the , like:
<th class="text-center">Disposition</th>
Is there a way to center text inside the span when displayed using d--flex or d--table-cell?
The problem appears to be that the span is always generating itself at full width of the :
Centering content in flexbox elements requires either justify-content or align-items, not text-align.
Use Bootstrap's justify-content-center class.
More on that
I am working on site which is based on table-layout (no div). Now requirement change and has to re-create so that it look responsive, and for responsive we choose bootstrap as option.
Now, How can I convert tables layout into bootstrap grid layout so can 1. look not change, 2. have responsive also.
table-layout is too complex in site. lots of nesting is there. For example:
<table border="0" width='100%' bgcolor='#ff00ff'>
<tr style='padding-bottom:1em;'>
<td>
<table border="0">
<tr valign='bottom'>
<td width='50'> </td>
<td>
<img border="0" src="#" width="100" height="300">
</td>
<td width='25'> </td>
<td>
<span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
</td>
</tr>
</table>
</td>
<td align='right'>
<table border="0" cellspacing="0">
<tr>
<td align='center' colspan='3'>
<span>Another tesing text</span>
<span style='color:#FFFFCC;'> - </span>
<span style='font-size:11px;color:#fffff;'>Random text</span>
</td>
</tr>
</table>
</td>
</tr>
For example how can I convert above code with bootstrap row, col-*-* grid-layout.
Trust me, I tried a lot to convert this, but sometime looks change or some time just not work at all.
General suggestion on how to convert table base layout into bootstrap are also welcome.
Here is some great literature: Bootstrap 3 Grid system
Replace table and tbody with div class="container"
Replace tr with div class="row"
Replace td with div class="col-ww-nn"
Where ww is device width (xs, sm, md, lg)
Where nn is a number 1-12 for width percentage (divided by 12)
Below is your updated code (including some syntax fixes too). Note, I've added responsiveness so that on phones (xs devices) your second main column would be a separate line. And you can make images responsive with img-response so that it's size changes with the device.
<div class="container" style="background-color:#ff00ff">
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="row">
<div class="col-xs-4 col-sm-4">
</div>
<div class="col-xs-4 col-sm-4">
<img src="#" class="img-responsive">
</div>
<div class="col-xs-4 col-sm-4">
</div>
<div class="col-xs-4 col-sm-4">
<span style="font-size:10px;color:#cccccc;">Alpha testing</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="row">
<div class="col-xs-4 col-sm-4">
<span>Another tesing text</span>
</div>
<div class="col-xs-4 col-sm-4">
<span style="color:#ffffcc;"> - </span>
</div>
<div class="col-xs-4 col-sm-4">
<span style="font-size:11px;color:#ffffff;">Random text</span>
</div>
</div>
</div>
</div>
</div>
Actually it is not so complex.
Just skip every <table> and <tbody> tag, treat every <tr> as block element with class="row" and every <td> as block element with class="col-*-*". Nesting Bootstrap grid is totally okey, so if you have somthing like that:
<tr style='padding-bottom:1em;'>
<td>
<table border="0">
<tr valign='bottom'>
<td width='50'> </td>
<td>
<img border="0" src="#" width="100" height="300">
</td>
<td width='25'> </td>
<td>
<span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
</td>
</tr>
</table>
</td>
</tr>
Just do:
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6"> </div>
<div class="col-xs-6">
<img border="0" src="#" width="100" height="300">
</div>
<div class="col-xs-10"> </div>
<div class="col-xs-2">
<span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
</div>
</div>
</div>
</div>
Ofcourse those are just example Bootstrap classes - you don't have to stick with numbers ;)
I am experimenting with the recently released MDL kit and trying to use the grid layout with cards and tables.
what I found was the MDL grid is not as flexible as the Bootstrap grid for nested columns (probably 'cos I don't know enough about it yet). So in my 3 column layout I use cards and tables side-by-side to present the data I have.
But unfortunately the card does not span the whole width of a column unless I apply width=100% manually. But as soon as I do it the table is not responsive and overlap with cards around in when the screen size reduces.
JSFiddle
Can anyone tell me how to get rid of this issue.
<body>
<main class="mdl-layout__content">
<div class="page-content">
<div class="demo-grid-1 mdl-grid">
<div class="mdl-cell mdl-cell--4-col ">
<div class="mdl-card mdl-shadow--4dp demo-card-wide">
<div class="mdl-card__media">
<img src="http://www.gaynz.com/articles/uploads/2/Auckland-at-night.jpg" width="173" height="157" border="0" alt="" style="padding:10px;">
</div>
<div class="mdl-card__supporting-text">Auckland Sky Tower, taken March 24th, 2014</div>
<div class="mdl-card__supporting-text">The Sky Tower is an observation and telecommunications tower located in Auckland, New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure in the Southern Hemisphere.</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp mdl-cell--4-col" style=" width: 100%">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-card mdl-shadow--2dp demo-card-wide">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
<div class="demo-grid-1 mdl-grid">
<div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">this is a text</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">another text</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">30/05/2015</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">3999.34</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
Let's see if I can help you with each problem:
First, the cards not taking up the whole column. The issue is the nested divs. If you make the column like this:
<div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
rather than putting the card within the column, then it will take up the whole column. See the updated JSFiddle here.
Next, for nested columns, you need to have nested grids, like this:
<main class="mdl-layout__content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
<div class="mdl-card__supporting-text">
<main class="mdl-layout__content">
<div class="mdl-grid">
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col">
See the JSFiddle here.
It sounds like you've changed your goal a bit, but hopefully you can put these two together to fix your problem.
Here's how to do it:
.mdl-data-table {
table-layout:fixed;
width:100%;
}
#my-table td, th {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
/* unrelated to responsive table css */
#my-table{
margin-top:24px;
}
.material-icons {
vertical-align: -25%;
}
<meta name="description" content="Responsive Material Design Lite Table" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.green-light_green.min.css" />
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<section class="mdl-grid" id="my-table">
<div class="mdl-layout-spacer"></div>
<div class="mdl-cell mdl-cell--6-col-tablet mdl-cell--10-col-desktop mdl-cell--stretch">
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
<thead>
<tr>
<th>Key</th>
<th>Description</th>
<th>Run</th>
<th><i class="material-icons">timer</i></th>
<th>Work</th>
<th><i class="material-icons">timer</i></th>
<th>Play</th>
<th><i class="material-icons">timer</i></th>
<th>Study</th>
<th><i class="material-icons">timer</i></th>
<th>Assumptions</th>
<th>Climb Mountain</th>
<th>Fly Kite</th>
</tr>
</thead>
<tbody>
<tr>
<td>ABC-1234</td>
<td>asdf asdf asdf asdf</td>
<td>asdf asdf asdf asdf</td>
<td>25</td>
<td>qwer qwer qwer</td>
<td>25</td>
<td>sdfgs sdf sdgf</td>
<td>25</td>
<td>lkjhlk lkhjh</td>
<td>25</td>
<td>bvnfhf hffjj hdgdh</td>
<td>25</td>
<td>bjh jbh kjb bkjb</td>
</tr>
<tr>
<td>XYZ-1234</td>
<td>dfdf asdf asdf asdf</td>
<td>bgbgdf asdf asdf asdf</td>
<td>25</td>
<td>qwer qwer qwer</td>
<td>25</td>
<td>sdfgs sdf sdgf</td>
<td>25</td>
<td>lkjhlk lkhjh</td>
<td>25</td>
<td>bvnfhf hffjj hdgdh</td>
<td>25</td>
<td>bjh jbh kjb bkjb</td>
</tr>
</tbody>
</table>
</div>
<div class="mdl-layout-spacer"></div>
</section>
To have your table adapt to the size of its container and respond to any change in size you can set its width attribute to a certain percentage.
<table class="mdl-data-table mdl-js-data-table" style="width:100%;">
...
</table>
My requirement is I have two links at left side and if I click on a link, respective page should get displayed on the right side.
how can make this arrangement using tags.
I tried as the below, but its not showing side by side. where as DisplayData gets appeared at the bottom of links. Thanks in advance..
<div id="accountstabs-1">
<div id="links" style="text-align:left">
<li>Manage</li>
<li>Users</li>
</div>
<div id="DisplayData" style="text-align:right">
<table class="data">
<thead>
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
</tr>
</thead>
</table>
</div>
</div>
CSS:
#accountstabs-1>div {
float : left;
}
http://jsfiddle.net/T4E88/
You need to use floats instead of text-align to position elements. (text-align should only be used for text.)
Check out this JSFiddle example.
I updated your HTML like this:
<div id="accountstabs-1">
<div id="links" >
<li>Manage</li>
<li>Users</li>
</div>
<div id="DisplayData" >
<table class="data">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
</table>
</div>
<div class="clr"></div>
</div>
Notice that I removed the two text-align inline styles from the divs, and added the new div near the bottom with class clr.
Then the CSS looks like this:
#links {
width: 50%;
float: left;
}
#DisplayData {
width: 50%;
float: right;
}
/* clearfix */
.clr { clear: both; }
The purpose of the "clearfix" is to make sure that any elements added after your right column get displayed underneath the columns properly.
You should put the styles in a separate CSS file, but the following should work;
<div id="accountstabs-1" style="width:400px">
<div id="links" style="display:block;float:left;width:200px">
<li>Manage</li>
<li>Users</li>
</div>
<div id="DisplayData" style="display:block;float:right;width:200px">
<table class="data">
<thead>
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
</tr>
</thead>
</table>
</div>
</div>
div is a block element and it take the whole place horizantly,
to place another div in parallel you need to use css property float left .
use style property style="float:left".
<div id="accountstabs-1">
<div id="links" style="text-align:left; float:left">
<li>Manage</li>
<li>Users</li>
</div>
<div id="DisplayData" style="text-align:right">
<table class="data">
<thead>
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
</tr>
</thead>
</table>
</div>
</div>