I have:
<div id = "first" style="overflow-y:auto;">
<td colspan="2" style="background: #EFF4F8;"><div
id="second" style='height: 100px; word-wrap: break-word; overflow-y: auto; width: 100%; min-width: 580px; line-height: 200%;'>
<pre style="white-space: pre-wrap;">${some_text}</pre>
</div></td>
</div>
if "some_text" width is larger than my screen so I have scroll on all screen, I want the scroll only for div ="second" or for my pre tag. The problem is that I can't change div="first", I have to use it as is. Can you help me?
Thanks,
Your markup seems wrong, but this should be your solution. Let me know how it turns out and I will update the answer to your needs. And use CSS:
CSS
#first {
overflow-y:auto;
}
#second {
height: 100px;
word-wrap: break-word;
overflow-y: scroll;
width: 100%; /* This might still mess up the overflows of parent- and child-tags in different browsers */
min-width: 580px; /* This does not work well in all browsers */
line-height: 200%;
}
#second pre {
white-space: pre-wrap;
}
HTML
<div id="first">
<table>
<tbody>
<tr>
<td colspan="2" style="background: #EFF4F8;">
<div id="second">
<pre>${some_text}</pre>
</div>
</td>
</tr>
</tbody>
</table>
</div>
You want to scroll across the width, that is a horizontal scrollbar.
You should be adding overflow-x
Related
I have a table whose cells contain div elements with different content, so they have different heights. Take this fiddle as an example:
https://jsfiddle.net/6btarubL/2/
As you can see, the code is really simple:
HTML
<table>
<tr>
<td>
<div style="background-color: orange">
DIV
</div>
</td>
<td>
<div style="background-color: aqua">
Line 1<br>
Line 2
</div>
</td>
<td>
<div style="background-color: #fac">
10<br>
20<br>
30<br>
</div>
</td>
</tr>
<tr>
<td>
<div style="background-color: #8f5">
DIV
</div>
</td>
<td>
<div style="background-color: #cb1">
Line 2.1<br>
Line 2.2
</div>
</td>
<td>
<div style="background-color: #eda">
10<br>
20<br>
30<br>
</div>
</td>
</tr>
</table>
CSS
tr {
height: 100%;
}
td {
vertical-align: top;
min-width: 150px;
height: 100%;
}
td div {
height: 100%;
}
I'd like that the divs inside the cells took all the space, so they looked the same. Firefox does this, so its rendering is:
Chrome, on the other side, doesn't obbey the height : 100% df the divs, so the rendering is:
Then fun fact is that, if I remember correctly, Chrome was rendering it the same as Firefox until I updated to version 63 (I think I had version 59 before).
Any suggestions? Thanks!
Please Change your this Css Code and Check again. Chrome
td {
vertical-align: top;
min-width: 150px;
height:1;
}
HTML Change like below
<table>
<tr>
<td>
<div style="background-color: orange">
DIV
<br>
<br>
<br>
</div>
</td>
<td>
<div style="background-color: aqua">
Line 1<br>
Line 2<br>
<br>
</div>
</td>
<td>
<div style="background-color: #fac">
10<br>
20<br>
30<br>
</div>
</td>
</tr>
<tr>
<td>
<div style="background-color: #8f5">
DIV
<br>
<br>
<br>
</div>
</td>
<td>
<div style="background-color: #cb1">
Line 2.1<br>
Line 2.2<br>
<br>
</div>
</td>
<td>
<div style="background-color: #eda">
10<br>
20<br>
30<br>
</div>
</td>
</tr>
</table>
The solution whas this CSS:
<!-- THIS CODE DOESN'T WORK -->
tr {
display : flex;
height: 100%;
}
td {
vertical-align: top;
min-width: 150px;
height: 1;
}
td div {
height: 100%;
}
I'm right where I began. As #3rdthemagical pointed, the display : flex on <tr> breaks the layout and the columns aren't aligned. So, I did another test and these are the results:
WORKING CSS IN CHROME:
tr {
height: 100%;
}
td {
height: 1px;
}
div {
height: 100%;
background-color: aqua;
}
Sample output:
The above code looks like this in Firefox:
WORKING CSS IN FIREFOX:
tr {
height: 100%;
}
td {
height: 100%; /* <---------------- */
}
div {
height: 100%;
background-color: aqua;
}
But, in Chrome I have the problem for which I started this question, so it looks like this:
Who's right? Chrome or Firefox? Isn't there a cross-browser solution for this?
I'll keep on investigating...
You can use display flex
jsfiddle
CSS
tr {
height: 100%;
display: flex;
}
td {
vertical-align: top;
min-width: 150px;
}
td div {
height: 100%;
}
With flex, you can center elements, align vertically, reorder, you can do a lot of stuff.
I have already tested in mozilla, you can use prefixes to have more compatibility:
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
Finally, the solution that worked for me was to use CSS conditionals and load different styles depending on the browser. I've explained it in this question:
Load different CSS rule depending on the browser in an Angular 4 component
Cheers,
I am using white-space: nowrap; in parent div which is sticking it's child div's in a row.
In the child div's I use word-wrap: break-word; which is not working inside of white-space:nowrap;.
My expected result is that all divs in a row even they reach screen limit but when div text exceed div width limit text line break to next line.
Fiddle Link
<div overflow-x:auto; width="100%" style="white-space: nowrap">
<div style="display: inline-block; width: 200px; border-right: solid #778899">
<div style="padding: 0 10px; background-color: white; height: 130px; overflow-x: hidden;">
div1
<p class="text-center" style="word-wrap: break-word;">
datasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</p>
</div>
</div>
<div style="width:200px; display: inline-block; border-right: solid #778899;">
<div class="pd-5" style="background-color: white; height: 130px; overflow-x: hidden;">
div2
<p class="text-center" style="word-wrap: break-word;">
ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss ssssssss
</p>
</div>
</div>
<div style="width: 200px; display: inline-block; border-right: solid #778899;">
<div class="pd-5" style="background-color: white; height: 130px; overflow-x: hidden;">
div3
<p class="text-center" style="word-wrap: break-word;">
sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</p>
</div>
</div>
</div>
You can use white-space:pre-wrap;.
Here's an updated fiddle https://jsfiddle.net/tdc300up/1/
Here's the CSS code I used to solve it:
div > div > div {
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
}
Alternatively, you could also use
div {
white-space: normal;
}
as show in this fiddle here: https://jsfiddle.net/tdc300up/3/
(take note that you don't need all of the additional pre-fixes here thanks to better support - see https://css-tricks.com/almanac/properties/w/whitespace/#browser-support)
Edit
As mentioned by WorkWe in the comments, another fix that you could try is removing the white-space:nowrap; from the main parent container (if it is not required for something else).
You can see an example fiddle here: https://jsfiddle.net/tdc300up/4/
Updated fiddle link. as said by shuvo, add white-space:normal to childern div
`https://jsfiddle.net/gopal280377/tdc300up/2/`
You should try white-space to be normal in the child.As you want to break the line..
<p class="text-center" style="word-wrap: break-word;white-space: normal;">
sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</p>
Remove wrong code of div parent:
<div overflow-x:auto; width="100%" style="white-space: nowrap">
// Some thing
</div>
To:
<div width="100%" style="white-space: nowrap">
// Some thing
</div>
Note: You can remove width="100%", because div block tag, width default is 100%.
And reset white-space for text-center class is:
.text-center {
white-space: normal;
}
I need your help,
The problem that I am having is that my table does not conform to 100% height of my window. How can the HTML coding below be amended to accommodate this change?
<table style="width: 100%; height: 100%; border: solid 1px black;">
<tr>
<td style="text-align: center; vertical-align: middle; padding: 5px; position: relative;">
<p style="display: inline-block; width:100%; background: #ccc; vertical-align: middle;">
Title Text
</p>
</td>
</tr>
</table>
Expected outcome is:
You can also change height:100%; to height:100vh; Check out this EXAMPLE
Try this:
Add to your CSS following code:
html, body {
height: 100%;
}
It's important to expand the html and body first.
After that you can make a <table style="height:100%"> like in the JS Fiddle
I am wanting to have a page with a fixed-height header and footer, and with the contents taking 100% of the remaining height.
I currently have the behavior I desire working in Chrome, but in Internet Explorer, the row will grow beyond the desired height, forcing the footer off of the page (as evidenced by the scrollbar on the page). I can't find a fix for the Internet Explorer problem for the life of me.
Here is the desired behavior (in Chrome), note the row does not expand to fit contents, and instead has the ability to scroll:
Here is the undesired behavior I am experiencing with Internet Explorer:
Here is the approach I am taking:
<head>
<style>
body {
margin: 0px;
table-layout:fixed;
}
table {
border-collapse:collapse;
}
table, tr, td {
overflow:hidden;
padding: 0px;
}
</style>
</head>
<body>
<table style="width:100%; height:100%; top:0px; bottom:0px;">
<!--HEADER-->
<tr style="height:100px;">
<td colspan="2" style="background-color:#ff0000; text-align:center;">
<h1>Piano Festival</h1>
</td>
</tr>
<!--CONTENTS-->
<tr>
<!--LEFT CONTENT PANE-->
<td style="background-color:#ff00ff;">
<div style="height:100%; overflow-y:scroll;">
<form>
<!--Form contents here-->
</form>
</div>
</td>
<!--RIGHT CONTENT PANE-->
<td style="background-color:#00ffff; width:100%;">
</td>
</tr>
<!--FOOTER-->
<tr style="height:100px;">
<td colspan="2" style="background-color:#00ff00";>
</td>
</tr>
</table>
</body>
I'd prefer to avoid using any Javascript or CSS extensions. How can I work around this problem so that I get the same behavior in IE that I have in Chrome right now (scrollable contents instead of a growing row height)?
I also highly recommend not using tables for this. Here is a refactored version using divs to get you started.
HTML:
<div class="header">
<h1>Piano Festival</h1>
</div>
<div class="registration">
...lots of stuff....
</div>
<div class="main">
Main section
</div>
<div class="footer">
footer
</div>
And here's the CSS:
body, html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
.header {
margin: 0;
background: darkgreen;
height: 10%;
}
.registration {
background: deeppink;
width: 20%;
overflow: auto;
height: 80%;
float: left;
}
.main {
display: inline-block;
}
.footer {
background: blue;
height: 10%;
position: fixed;
width: 100%;
bottom: 0;
}
Here's a working demo.
How do you prevent a td to grow wider than the table max-width? I cannot set the size in pixels, as it is used to fill up the rest of the width of the table. And when I set max-width to 100% this seems to be its content width.
<div class="content" style="width: 200px; max-width: 200px;">
<table class="outer-table" style="width: 100%; max-width: 100%;">
<tr>
<td style="white-space: nowrap; max-width: 100%; background-color: yellow;">
<div class="inner-div" style="width: 100%; max-width: 100%; overflow: scroll;">
This is a table width to much content. I use "white-space: nowrap" to force it to grow wide.
</div>
</td>
</tr>
</table>
</div>
See it in action: http://jsfiddle.net/TxqT4/1/
just remove white-space: nowrap from your td style
using nowrap property you are forcing td content to stay inline ie. no line break that's why it is creating the problem
See here Update code