How to make the child divs to display all in one line inside outer div and not fall to second line?
The outer div width should be fixed so the scrollbar should be visible so we can scroll to see all inner divs.
http://jsfiddle.net/pkbkY/
<style type="text/css">
.child
{
width: 100px;
float: left;
}
</style>
<div style="width: 500px; overflow: scroll;">
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
</div>
Here you go: http://jsfiddle.net/thirtydot/pkbkY/1/
#scroll_container {
width: 500px;
overflow: scroll;
white-space: nowrap;
}
.child {
width: 100px;
display: inline-block;
border: 1px solid red;
}
If you need the gaps to be gone, the easiest solution is to remove the whitespace between the child elements: http://jsfiddle.net/thirtydot/pkbkY/2/
Related
I'm trying to change my top left and right border radius on my css but its not doing anything, I have tried targeting the IDs and the table itself and the but nothing is working I'm hoping someone can point out what I'm doing wrong, I'm just not seeing it change at all in my actual html template
heres my code for an example
<table id="flightsContainer">
<tr id="flightsHeader">
<td id="firstTableHeader"><b>FLIGHT INFO</b></td>
<td><b>DEPART</b></td>
<td><b>RETURN</b></td>
<td><b>TRAVELER</b></td>
<td><b>STATUS</b></td>
<td><b>TOTAL</b></td>
</tr>
<tr v-for="flight in pageOfItems" :key="flight.id">
<td>
<section id="flightsAgency">
<div>
<img src="../assets/agency1.png"/>
</div>
<div>
<small>Booking No:</small>
<b><p>{{flight.booknum}}</p></b>
</div>
</section>
</td>
<td>
<section>
<small>{{flight.departDate}}</small>
<b><p>{{flight.departLocation}}</p></b>
</section>
</td>
<td>
<section>
<small>{{flight.returnDate}}</small>
<b><p>{{flight.returnLocation}}</p></b>
</section>
</td>
<td>
<section>
<small>{{flight.travelerType}}</small>
<b><p>{{flight.travelerAge}}</p></b>
</section>
</td>
<td>
<section>
<b><p class="pending" v-bind:class="{ pending: flight.isPending, cancelled: flight.isCancelled, complete: flight.isComplete}">{{flight.status}}</p></b>
</section>
</td>
<td>
<section>
<small>USD</small>
<b><p>{{flight.total}}</p></b>
</section>
</td>
</tr>
</table>
table{
border-top-left-radius: 10px;
}
#flightsHeader{
height: 3em;
border-top-left-radius: 10px;
background-color: #2E9CFE;
color: white;
}
You need to add the following CSS to the first TD in the header.
border: 1px solid #2E9CFE;
border-top-left-radius: 10px;
So it becomes
#flightsHeader{
height: 3em;
background-color: #2E9CFE;
color: white;
}
#firstTableHeader {
border: 1px solid #2E9CFE;
border-top-left-radius: 10px;
}
<table id="flightsContainer">
<tr id="flightsHeader">
<td id="firstTableHeader"><b>FLIGHT INFO</b></td>
<td><b>DEPART</b></td>
<td><b>RETURN</b></td>
<td><b>TRAVELER</b></td>
<td><b>STATUS</b></td>
<td><b>TOTAL</b></td>
</tr>
<tr v-for="flight in pageOfItems" :key="flight.id">
<td>
<section id="flightsAgency">
<div>
<img src="../assets/agency1.png"/>
</div>
<div>
<small>Booking No:</small>
<b><p>{{flight.booknum}}</p></b>
</div>
</section>
</td>
<td>
<section>
<small>{{flight.departDate}}</small>
<b><p>{{flight.departLocation}}</p></b>
</section>
</td>
<td>
<section>
<small>{{flight.returnDate}}</small>
<b><p>{{flight.returnLocation}}</p></b>
</section>
</td>
<td>
<section>
<small>{{flight.travelerType}}</small>
<b><p>{{flight.travelerAge}}</p></b>
</section>
</td>
<td>
<section>
<b><p class="pending" v-bind:class="{ pending: flight.isPending, cancelled: flight.isCancelled, complete: flight.isComplete}">{{flight.status}}</p></b>
</section>
</td>
<td>
<section>
<small>USD</small>
<b><p>{{flight.total}}</p></b>
</section>
</td>
</tr>
</table>
You are missing the border width, style and color. I added an example below.
table { /* this is if you want border radius for the table */
/*border: 1px solid;*/
border-top-left-radius: 10px;
}
#flightsHeader {
height: 3em;
border-top-left-radius: 10px;
background-color: #2E9CFE;
color: white;
}
#flightsHeader td:first-child{/* this is if you want border radius for the first <td> in the header */
border-top-left-radius: 10px;
}
<table id="flightsContainer">
<tr id="flightsHeader">
<td id="firstTableHeader"><b>FLIGHT INFO</b></td>
<td><b>DEPART</b></td>
<td><b>RETURN</b></td>
<td><b>TRAVELER</b></td>
<td><b>STATUS</b></td>
<td><b>TOTAL</b></td>
</tr>
<tr v-for="flight in pageOfItems" :key="flight.id">
<td>
<section id="flightsAgency">
<div>
<img src="../assets/agency1.png" />
</div>
<div>
<small>Booking No:</small>
<b><p>{{flight.booknum}}</p></b>
</div>
</section>
</td>
<td>
<section>
<small>{{flight.departDate}}</small>
<b><p>{{flight.departLocation}}</p></b>
</section>
</td>
<td>
<section>
<small>{{flight.returnDate}}</small>
<b><p>{{flight.returnLocation}}</p></b>
</section>
</td>
<td>
<section>
<small>{{flight.travelerType}}</small>
<b><p>{{flight.travelerAge}}</p></b>
</section>
</td>
<td>
<section>
<b><p class="pending" v-bind:class="{ pending: flight.isPending, cancelled: flight.isCancelled, complete: flight.isComplete}">{{flight.status}}</p></b>
</section>
</td>
<td>
<section>
<small>USD</small>
<b><p>{{flight.total}}</p></b>
</section>
</td>
</tr>
</table>
I have a 3x3 html table. In the second row the first and third column contain div's that are rotated to show content vertically. Other cells show content normally. These vertical divs overflow from TD height. I want to expand TD height dynamically based on Div height(width vertically).
Here is the code from fiddle
UPDATED
HTML
<table>
<tr>
<td>
<div>
?
</div>
</td>
<td>
<div>
<input placeholder="some text">
<button>X</button>
</div>
</td>
<td>
<div>
?
</div>
</td>
</tr>
<tr>
<td class="expand">
<div class="vertical">
<input placeholder="some text">
<button>X</button>
</div>
</td>
<td>
<div>
<input placeholder="some text">
<button>X</button>
</div>
</td>
<td class="expand">
<div class="hw vertical">
<input placeholder="some text">
<button>X</button>
</div>
</td>
</tr>
<tr>
<td>
<div>
?
</div>
</td>
<td>
<div>
<input placeholder="some text">
<button>X</button>
</div>
</td>
<td>
<div>
?
</div>
</td>
</tr>
</table>
CSS
table td {
border: 2px solid lightgray;
}
.hw {
width: 208px !important;
height: 20px;
}
.expand {
white-space: pre;
}
.vertical {
/* writing-mode: vertical-rl; */
transform: rotate(90deg);
}
Thanks in advance.
Use white-space: pre; in td.
edits
check this updated snippet. I used 'writing-mode: tb-rl' to make text vertical.
Check Can I Use for broswer support
table td {
border: 2px solid lightgray;
white-space:nowrap
}
.vertical {
writing-mode: tb-rl;
}
<table>
<tr>
<td>
<div>
?
</div>
</td>
<td>
<div>
lorem ipsum
</div>
</td>
<td>
<div>
?
</div>
</td>
</tr>
<tr>
<td>
<div class="vertical" >
vertical text
</div>
</td>
<td>
<div>
lorem ipsum
</div>
</td>
<td>
<div class="vertical">
vertical text
</div>
</td>
</tr>
<tr>
<td>
<div>
?
</div>
</td>
<td>
<div>
lorem ipsum
</div>
</td>
<td>
<div>
?
</div>
</td>
</tr>
</table>
You can achieve this with jQuery:
var height = $('.vertical').width();
$('.vertical').css({'height':height+'px'});
It takes the width of what the TD would have been if horizontal and applies it to the height instead.
Jsfiddle here
In the code below, div with red background gets 0 height when the image is there but with image node removed, it gets the correct height of 60px from the parent. Why is it and how can it be corrected?
Here is also the jsfiddle link: https://jsfiddle.net/zuymamq7/
html,body{
width:100%;
height:100%;
}
<table style="width:100%;height:100%;">
<tr style="height:60px;">
<td>
<div style="width:100%; height:100%; background-color:blue;">
<img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;"></img>
<div style="display:inline-block;width: 10%; height:100%; background-color:red;">
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
Biggest thing that I noticed as I began to edit this:
You added a close image tag (</img>). Those don't exist. The correct syntax is either <img src="something.jpg"> or more technically <img src="something.jpg" /> Threw off some things a lot (especially in the editor)
I'm thinking this is what you want, or at least, I hope.
html,
body {
width: 100%;
height: 100%;
}
<table style="width:100%;height:100%;">
<tr>
<td style="height:60px">
<div style="width:100%; height:100%; background-color:blue;">
<img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;" />
<div style="display:inline-block;width: 10%; height:100%; background-color:red;">
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
Other Way
If you can change up the HTML a bit, then this should work too.
html,
body {
height: 100%;
width: 100%;
}
table {
border-collapse: collapse;
}
<table style="width:100%;height:100%;">
<tr style="background-color:blue">
<td style="height:60px;width:60px;">
<img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;" />
</td>
<td style="background-color:red; width:10%">
Text
</td>
<td> </td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
I have divs as shown in the FIDDLE , the div content gets overlapped with the header resulting in hiding of the content data ie "Sample data 1".
<div id="header">
<div id="firstdiv">
<table border="0px" width="100%" style="background-color:rgb(2, 44, 72)">
<tr>
<td id="test1" style="width:90%;" align="left">test
</td>
</tr>
</table>
</div>
</div>
<div id="content">
<table border="0">
<tr>
<td>Sample data 1
</td>
</tr>
<tr>
<td>Sample data 2
</td>
</tr>
<tr>
<td>Sample data 3
</td>
</tr>
<tr>
<td>Sample data 4
</td>
</tr>
</table>
</div>
//CSS
#header
{
position:relative;
}
#firstdiv
{
float:left;width:100%;
position:absolute;
color:white;
}
Thanks
Remove the absolute positioning from the #firstdiv element. The left float also seems unnecessary.
See here: http://jsfiddle.net/k8Vut/2/
Add some padding to header: http://jsfiddle.net/k8Vut/3/
#header
{
padding-top: 25px;
}
Since your firstdiv is absolute it'll start from top: 0 position and hence overwrites the relative positioned header. So if you add some padding, it'll move the header a little below and make space for firstdiv
#main {
margin: auto;
padding: 0;
width: 95%;
}
#left-wrapper {
display: block;
}
#content {
height: 500px;
white-space: nowrap;
overflow-y: auto;
overflow-x: scroll;
}
<div id="main">
<table>
<tr>
<td>
<div id='left-wrapper'>
</div>
</td>
<td>
<div id='content'>
<table>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
The content wrapper contains a table which holds some data which size is unknown, and must not be wrapped so white-space:nowrap is set, and it works fine. The height of the content div has a fixed size and the vertical scrollbar appears ok. The main div's width is set to 95%. The problem is that the content div does not activates the scrollbar when the data is too long to fit, instead it resizes itself to the right side of the screen, even if the wrapper main div's width is set to 95%. Is there a way to activate the content div's horizontal scrollbar without setting it's width? It's maximum width should be in line with the width of the main wrapper, it would not be a problem even if it has a fixed width, but then it must fill the remaining area to be in line with it's wrapper main div which as I mentioned has it's width set to 95%.
I searched everywhere, days are passing and I simply can't figure out a right solution. Please if anyone has a suggestion I would appreciate it very much. Thanks.
The inner <div> will stay inside the container <div> with the CSS you have. But, because you have a <table> surrounding the inner <div> it doesn't behave as expected.
I think the solution may be to layout the page without the <table>.
This example shows the inner <div> being constrained inside the outer <div> using your current CSS.
<html>
<head>
<style>
#main {border:solid 2px orange; margin: auto; padding: 0; width: 190px;}
#left-wrapper {display: block;}
#content {border:solid 2px purple; height: 500px; white-space: nowrap; overflow-y: auto; overflow-x: scroll;}
</style>
</head>
<body>
<div id="main">
<div id='content'>
<table style="border:solid 1px #ddd;">
<tr style="background-color:#ccccff;">
<td>column A</td>
<td>column B</td>
<td>column C</td>
<td>column D</td>
<td>column E</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>2</td><td>3</td>
</tr>
<tr>
<td>11</td><td>12</td><td>11</td><td>12</td><td>13</td>
</tr>
</table>
</div>
</div>
</body>
</html>