I want to make a responsive table using a bootstrap. I want that if the text in the table cell is too long and the word wrap made the table cell height more than certain amount of pixel like 300px, the cell can be scrolled to view the rest of the text.
The cell itself cannot have scroll-bars, but you can do it this way:
table {
width: 300px;
}
table td {
padding: 0;
line-height: 1.2rem;
}
.maxi {
max-height: 6rem;
overflow-y: auto;
}
<table>
<tbody>
<tr>
<td>
<div class="maxi">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit, lacus dictum varius lobortis, lorem diam fringilla erat, in maximus tortor neque vitae libero. Fusce ac diam tortor. Phasellus elementum pellentesque metus et pharetra. Vestibulum et est non eros elementum posuere. Morbi egestas ac nunc id semper. Donec vel dapibus risus. Duis velit sapien, lacinia at risus eget, efficitur cursus dolor. </div>
</td>
</tr>
</tbody>
</table>
Also on JSFiddle.
Related
I'm looking for a way to create this two column layout, the content on the right is centred horizontally and vertically but the content on the left is centred horizontally and vertically aligned with the top of the content in column twos as the length of the content in column two changes the content in column one always stays aligned to the top.
Please take a look at the image attached as this is easier to explain visually
This can't just be a padded box because as the content on the right grows the padding reduces to stay centered, and the main columns need to stay a min height
Updated layout image
Based on Кольо Пеев answer below I've modified my codepen
https://codepen.io/nitrokev/pen/RwMQZeJ
<div class="fifty-fifty-project-details-grid">
<article class="fifty-fifty-content left lightblue">
<div class="entry-content" >
<h3>Content 1</h3>
</div>
</article>
<article class="fifty-fifty-content right" >
<div class="entry-content" >
<h3>Content 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In enim lorem, sollicitudin ut accumsan in, porta sed dui. Sed sagittis est risus, ac luctus odio porta at. Vivamus at nibh et mi euismod sagittis et sed justo. Nulla pretium pellentesque eros, vel aliquam elit egestas eu. Aliquam erat lorem, tristique sit amet est eu, elementum porta augue. Morbi consequat magna felis, placerat convallis nisl placerat a. Nullam porttitor suscipit metus a condimentum. Nunc eleifend ex sed tristique tempus. Nunc elementum ligula nec pulvinar mattis. Aenean tincidunt, odio in congue iaculis, ipsum quam hendrerit velit, id commodo mauris ante rhoncus odio. Sed eget nibh vitae ipsum consectetur porta sit amet eget ante. Donec ultricies lacinia ultricies. Nullam id porttitor leo. Quisque sit amet nisl ultrices sapien aliquet gravida. Nam auctor mi ut orci dictum, sit amet tempor metus eleifend. Donec rhoncus et justo ac sollicitudin. </p>
</div>
</article>
</div>
.fifty-fifty-project-details-grid {
display: flex;
flex-flow: row wrap;
overflow: hidden;
min-height:45rem;
}
.fifty-fifty-content {
display: flex;
flex-flow: row wrap;
align-items: center;
flex: 0 0 auto;
width: 50%;
margin-left: 0;
margin-right: 0;
height: auto;
padding:3rem;
}
.left{
background-color:#52AACB;
}
.right{
background-color:#52CB8F;
}
I think if there was a way to calculate the current height of the content in column two and apply it to column one, that might work?
Try running this code snippet. I am not fully aware of what you expect since there is no real content given anywhere from your side, but maybe with a few more lines of CSS you can achieve what you desire.
.container {
min-height: 400px;
background-color: #52CB8F;
display: grid;
}
.container__parent {
display: grid;
grid-template-columns: 1fr 1fr;
align-self: center;
}
.container__child {
padding: 16px;
background-color: #555;
text-align: center;
color: #fff;
}
.container__child:first-child {
border: 1px solid red;
}
.container__child:last-child {
border: 1px solid blue;
}
<div class="container">
<div class="container__parent">
<div class="container__child">
test string
</div>
<div class="container__child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisis mauris sit amet massa vitae tortor condimentum lacinia quis. Aliquet enim tortor at auctor. Facilisi etiam dignissim diam quis enim lobortis. Eget nulla facilisi etiam dignissim diam quis enim. Amet nisl suscipit adipiscing bibendum est ultricies integer. Id aliquet lectus proin nibh. Interdum consectetur libero id faucibus. Ornare lectus sit amet est placerat in egestas erat imperdiet. Felis imperdiet proin fermentum leo vel. Arcu dui vivamus arcu felis bibendum ut. Amet luctus venenatis lectus magna fringilla urna. Lobortis elementum nibh tellus molestie. Nibh praesent tristique magna sit amet purus gravida. Odio facilisis mauris sit amet massa vitae. Vel quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Orci phasellus egestas tellus rutrum.
</div>
</div>
</div>
I am trying to make a box with a header and two vertical lines in the content section to make box with three sections. I am still a beginner in HTML and have accomplished making the box but cannot figure out how to make the vertical lines. This is what I am trying to make:
All I need to make the two vertical lines inside the box and fill each of the three sections with content. If anyone could help me out or show the right direction I would appreciate it. Sorry for the horrible photo I had to remove some stuff from the screenshot.
This works:
#container{
width:100%;
height:100px;
border:1px solid black;
}
#header{
width:100%;
background:grey;
height:20px;
}
.fourth{
width:25%;
height:100px;
float:left;
}
.half{
width:50%;
height:100px;
border-left:1px solid grey;
border-right:1px solid grey;
float:left;
}
<div id="container">
<div id="header"><div>
<div class="fourth"></div>
<div class="half"></div>
<div class="fourth"></div>
</div>
See the following Pen: http://codepen.io/rkieru/pen/JKyYpx
.line-navbar li {
display: inline-block;
border-right: 1px solid #ccc;
margin: 5px 0;
}
.line-navbar li:last-of-type {
border-right: none;
}
It is an example of a navigational menu with a similar vertical line treatment, but the CSS should apply easily to your content box design. The only caveat would be ensuring that they are applied to the box with the greatest height, or otherwise ensuring that the content boxes are all the same height.
Don't listen to people telling you to use a table. You can do this with flexbox. Here's an example:
.header {
background-color: LightGrey;
}
.column-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.column {
padding: 10px;
border-left: 1px solid black;
}
.column:first-child {
border-left: none;
}
<div class="header">
This is header text.
</div>
<div class="column-container">
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare, sem sit amet ornare consequat, nunc turpis accumsan urna, ac hendrerit orci sapien eu purus. Proin blandit finibus eros, ut egestas urna aliquam eget. Integer hendrerit metus sed ligula lobortis, et scelerisque libero congue. Nunc facilisis tincidunt dictum. Nam aliquet ullamcorper nisl, ac congue leo pellentesque eget. Vestibulum dui massa, pretium at ex id, aliquet mattis ligula. Aenean ut porta elit. Donec pulvinar a augue non bibendum. Morbi pellentesque erat ut leo tincidunt condimentum.
</div>
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare, sem sit amet ornare consequat, nunc turpis accumsan urna, ac hendrerit orci sapien eu purus. Proin blandit finibus eros, ut egestas urna aliquam eget. Integer hendrerit metus sed ligula lobortis, et scelerisque libero congue. Nunc facilisis tincidunt dictum. Nam aliquet ullamcorper nisl, ac congue leo pellentesque eget. Vestibulum dui massa, pretium at ex id, aliquet mattis ligula. Aenean ut porta elit. Donec pulvinar a augue non bibendum. Morbi pellentesque erat ut leo tincidunt condimentum.
</div>
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare, sem sit amet ornare consequat, nunc turpis accumsan urna, ac hendrerit orci sapien eu purus. Proin blandit finibus eros, ut egestas urna aliquam eget. Integer hendrerit metus sed ligula lobortis, et scelerisque libero congue. Nunc facilisis tincidunt dictum. Nam aliquet ullamcorper nisl, ac congue leo pellentesque eget. Vestibulum dui massa, pretium at ex id, aliquet mattis ligula. Aenean ut porta elit. Donec pulvinar a augue non bibendum. Morbi pellentesque erat ut leo tincidunt condimentum.
</div>
</div>
By the picture I think what you are looking for is HTML Table.
Example:
<table border="1" width="100%">
<tr>
<th colspan="3">Headline</th>
</tr>
<tr>
<td>Content...</td>
<td>Content...</td>
<td>Content...</td>
</tr>
</table>
You can use CSS to style the box.
PD: Next time show some code, this way we can have a better understanding of what you are trying to do.
In html \ css, I've got a div element that can appear at different y positions of a page (conditional to the populated html above it). Problem occurs when content of the div rendered is too tall. In that case I'd like the div to expand to at most the page's height (e.g. based on screen resolution) and add a scrollbar to match its content.
Is there any pure html \ css solution for this, without using js?
Attached is an example of the div structure. Notice that I'd like to have a scroll inside the big blue div, without tying to a specific height, as I do not know in advance what are the given sizes (they're dynamic).
http://jsbin.com/jaboxoneju/edit?html,output
Here is a flexbox layout that causes the second div to scroll when its height would exceed the height of the window.
Live Demo:
html, body {
margin: 0;
padding: 0;
}
html, body, #container {
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
}
#upper {
background-color: red;
}
#scrolling {
background-color: blue;
flex-grow: 1;
overflow: auto;
}
<div id="container">
<div id="upper"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultricies nisl lacus, sit amet viverra magna scelerisque a. Morbi rutrum quam a tellus fermentum, vel ultricies ligula dignissim. Nam bibendum nisi in metus bibendum, sit amet tristique massa molestie.</p></div>
<div id="scrolling"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultricies nisl lacus, sit amet viverra magna scelerisque a. Morbi rutrum quam a tellus fermentum, vel ultricies ligula dignissim. Nam bibendum nisi in metus bibendum, sit amet tristique massa molestie. Quisque pretium arcu non magna pretium, nec fringilla augue pretium. Etiam a tellus ipsum. Curabitur ultrices vel nibh sit amet feugiat. Etiam consequat id ligula eget suscipit. Vestibulum sagittis tincidunt quam porta eleifend. Suspendisse interdum metus et tellus maximus dapibus. Phasellus vel bibendum leo, eu faucibus nisi. Sed vestibulum interdum arcu, et sodales diam cursus vel. Aliquam tristique lorem posuere tortor aliquet, sit amet pharetra lectus tristique. Maecenas consectetur laoreet tellus. Proin interdum tincidunt ex non commodo. Morbi non tristique orci, vel porta ligula. Duis sollicitudin in elit eu laoreet.</p>
<p>Sed volutpat vel tortor id placerat. In nisl odio, ornare at enim sit amet, mollis ultricies libero. Mauris et auctor lorem, in maximus felis. Fusce elementum nisi odio, sed venenatis enim convallis euismod. Sed sed pharetra ligula. Donec venenatis imperdiet turpis, vitae vehicula leo luctus a. Cras ultrices rutrum aliquet. Proin scelerisque nisl vitae posuere consectetur. Sed viverra rutrum nulla ut accumsan. Curabitur posuere consectetur nulla nec cursus. Donec id massa odio.</p></div>
</div>
JSFiddle Version: https://jsfiddle.net/9gtLughL/
<div style="overflow:Auto;">
<h2>my code</h2>
</div>
use this code at the start of the div
You can do this using a table structure.
HTML:
<div class="container table">
<div class="table-row">
Top Content
</div>
<div class="table-row height-100">
<div class="table-cell">
<div class="height-100">
<div class="scroll">
Bottom scrollable content with 100% remaining height
</div>
</div>
</div>
</div>
</div>
CSS:
.table { display:table; }
.table-row { display:table-row; width:100%; }
.table-cell {display:table-cell; height:0; overflow:hidden; }
.container { height:100vh; }
.height-100 { height:100%; }
.scroll { overflow:auto; height:100%; }
The 100vh attributes makes the body tag to have 100% of view height(screen height).
In a table structure, the div with class table-row will get height as much as needed by children, but if it also has height-100 will get 100% of what the other rows do not occupy. Inside it I did a few ugly twitches to get the overflow running on a dynamic height table-cell,
Demo: http://jsfiddle.net/alexix/70vf92e3/2/
I have two rows for my table. The top row contains some text and the bottom row contains a button. I would always like the button to stay at the bottom of the page and the top row to show scroll bars if the text is more than the space available (say if the browser window is resized).
I have been able to keep the button at the bottom using the following code but when I resize the browser it starts to overlap with the text on top. I have also not been able to get a scroll bar on the top row.
<!DOCTYPE html>
<html>
<head>
<style>
.bottomRow {
position: fixed;
bottom: 0
}
</style>
</head>
<body>
<table>
<tr>
<td> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum felis enim, sit amet laoreet orci imperdiet ac. Etiam viverra suscipit finibus. Donec in lectus sed odio sagittis ultrices ut sed nunc. Ut non ornare dolor. In vel nibh vestibulum, tincidunt eros eu, fermentum nunc. Integer non fermentum purus, non molestie lorem. Nunc sit amet dapibus tortor. Aliquam non felis commodo, mollis nibh non, pharetra mauris. Suspendisse nisi libero, maximus a vulputate a, condimentum et massa. Integer quis feugiat mi. In sit amet ante sed nisi facilisis commodo. Cras porttitor cursus diam in tincidunt. Phasellus nec varius dui, eget luctus mi </p> </td>
</tr>
<tr>
<td class="bottomRow"> <button>OK</button> </td>
</tr>
</table>
</body>
</html>
Can someone please let me know how to solve these issues? If there is a better way to achieve the same effects without using table I am fine with that as well.
Thanks,
There is no such thing as a scroll bar for a table cell. You would need to trick the scroll bar into displaying by having a fixed height div inside the cell with overflow-y set to scroll. Then all of your content goes inside the div.
<tr>
<td> <div style='height:200px;overflow-y:scroll;'> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum felis enim, sit amet laoreet orci imperdiet ac. Etiam viverra suscipit finibus. Donec in lectus sed odio sagittis ultrices ut sed nunc. Ut non ornare dolor. In vel nibh vestibulum, tincidunt eros eu, fermentum nunc. Integer non fermentum purus, non molestie lorem. Nunc sit amet dapibus tortor. Aliquam non felis commodo, mollis nibh non, pharetra mauris. Suspendisse nisi libero, maximus a vulputate a, condimentum et massa. Integer quis feugiat mi. In sit amet ante sed nisi facilisis commodo. Cras porttitor cursus diam in tincidunt. Phasellus nec varius dui, eget luctus mi </p> </div> </td>
</tr>
I am not sure why you are having problems keeping your button at the bottom? Can you elaborate on this a little more? What is happening to your button?
I need to have a <textarea> take up all available space inside of a <td>
When a user clicks inside of the table cell, the <textarea> should appear with the exact dimensions of the cell (like an Excel spreadsheet).
I have tried setting the <textarea> width and height to 100%, but that doesn't work; the dimensions just get skewed and all the table cells jump a little bit as this cell get resized incorrectly both vertically and horizontally.
Is there a way to do this?
edit:
You can see how this fails here: http://jsfiddle.net/4QbMr/6/
(both cells should be the same size)
I do not know whether I understand your question but you have to explicitly configure talbe cells width. like this: http://jsfiddle.net/4QbMr/8/. Now it will take all the space vertically, in order to avoid this you have to wrap table in a div.
Here's code of the css:
textarea
{
width:100%;
height:100%;
}
table tr td{
width:100px;
}
html
<table border="1">
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut lacinia mauris. Morbi condimentum feugiat diam at scelerisque. Nam lobortis placerat semper. Cras odio nisi, commodo ut viverra nec, tempus vitae elit. Suspendisse sodales, mauris at fermentum consectetur, quam odio dapibus nibh, nec porta diam tortor non ipsum. Donec vestibulum justo sit amet ipsum facilisis et accumsan orci convallis. Sed id tempus sem. Donec congue sapien ut nunc pretium sed fringilla orci interdum. Fusce viverra viverra scelerisque. Donec cursus ve
</td>
<td>
<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut lacinia mauris. Morbi condimentum feugiat diam at scelerisque. Nam lobortis placerat semper. Cras odio nisi, commodo ut viverra nec, tempus vitae elit. Suspendisse sodales, mauris at fermentum consectetur, quam odio dapibus nibh, nec porta diam tortor non ipsum. Donec vestibulum justo sit amet ipsum facilisis et accumsan orci convallis. Sed id tempus sem. Donec congue sapien ut nunc pretium sed fringilla orci interdum. Fusce viverra viverra scelerisque. Donec cursus ve</textarea>
</td>
</tr>
</table>
First, give the table cells position:relative
Next define textarea in the CSS as
textarea {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
jsfiddle: http://jsfiddle.net/xXXBP/
EDIT
new fiddle: http://jsfiddle.net/xXXBP/8/
Plays nice with FF and IE now. :D
$('td.makeTA').click(function() {
var $td = $(this);
var w = $td.width();
var h = $td.height();
$td.append($('<textarea />').css('width',w+'px').css('height',h+'px'));
}
You'll have to set the table, tr and td height to your size, and then the td size to "100/#ofrow"% (or a fixed width).
like in your updated jsfiddle
textarea
{
width:100%;
height:100%;
}
td {width:50%;/*for 2 columns*/}
table, tr, td{height:100%}