I have a webkit scrollbar attached to a div. I have disabled the default scrollbar by setting the overflow property to hidden, in the body element. I can see the scrollbar which is attached to the div, but cannot see its thumb, and hence also not able to scroll. The div to which scrollbar is attached has id="container". Here is the css -
html
{
}
body
{
overflow-y:hidden;
overflow-x:hidden;
}
#container
{
height:100%;
overflow-x:hidden;
overflow-y:scroll;
}
#Title
{
padding-bottom: 10px;
}
table
{
width: 100%;
table-layout: fixed;
}
#container::-webkit-scrollbar
{
background: transparent;
width: 12px;
}
#container::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(10,11,12,0.3);
/* border-radius: 10px; */
}
#container::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
background:rgba(104,102,102,0.8);
}
The container hosts a div (with id="Title"), and a table. The table has lot of content, so scrolling should happen, but unfortunately it doesn't. If someone could please point out what am I doing wrong, that would be great. Thanks!
Edited : Adding the html -
<body>
<div id="container">
<div id="Title">
<span id="Heading_part_1">abc</span>
<span id="Heading_part_2">xyz</span>
<span id="Heading_part_3">pqr</span>
<span id="Timestamp"></span>
<span id="WrenchIconContainer" onclick="togglemenu();">
<input type="image" src="res/wrench-arrow-icon.png" width="18px" height="18px"/>
</span>
<div id="menu_container" style="display:none">
<p id="id1">sfdf</p><p id="id2" onclick="dosomething();">ffsdf</p>
</div>
</div>
<table id="table1" cellspacing="0" width="auto">
<thead>
<tr>
<th id = "headline" width="85%"></th>
<th id = "storytime" width="15%"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
Because your #container has a height of 100%, the scrollbar "thumb" has no reason to appear because container is actually big enough to fit the entirety of its contents. If you give it a fixed, pixel height, your "thumb" will appear and function beautifully. Here's an example.
If you wrap your container with yet another wrapper and give it position: relative; you can leave your container with a 100% height, but add
position: absolute;
top: 0;
left: 0;
If what you're really trying to do is replace the main browser scroll bar for the page, just replace #container with body for your ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb selectors.
Related
This question already has answers here:
Creating a textarea with auto-resize
(50 answers)
Closed 3 years ago.
Currently
I have a table row that contains a textarea for user input. The purpose of textarea is so user can input multiple lines.
Code:
table {
border-collapse: collapse;
width: 100%;
border: 1px solid black;
}
th, td {
text-align: center;
border: 1px solid black;
padding: 10px;
}
.container {
border: 1px solid blue;
}
.text-area {
width: 100%;
box-sizing: border-box;
display: flex;
}
.fixed-min {
min-width: 600px;
}
<!DOCTYPE html>
<html>
<body>
<table>
<tbody>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>
<div class="container fixed-min">
<textarea class="text-area">Set width in this big column
</textarea>
</div>
</td>
<td>
<div class="container">
<textarea class="text-area">This contents of this column should always be visible i.e. no scroll bar, and instead the height of this row should adjust to show all content.
</textarea>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
https://jsfiddle.net/to45asgy/1/
Problem
I would like the textarea to show all content by auto-adjusting height rather than requiring the user to scroll.
Notes:
I saw a solution on Creating a textarea with auto-resize, but there has to be a simpler solution through CSS that I am missing.
I used to use an editable rather than before, but because I am using this html within a react component, there were other complications with using an editable so I switched to a . I wanted to know if there is a solution, but appreciate it if there is not, and will then refactor the code to use once more.
EDIT: Seems there is no CSS only solution for :'(
It will hide scroll and set size for content text
function autoheight(element) {
var el = document.getElementById(element);
el.style.height = "5px";
el.style.height = (el.scrollHeight)+"px";
}
table {
border-collapse: collapse;
width: 100%;
border: 1px solid black;
}
th, td {
text-align: center;
border: 1px solid black;
padding: 10px;
}
.container {
border: 1px solid blue;
}
.text-area {
width: 100%;
box-sizing: border-box;
display: flex;
overflow:hidden;
min-height:100%;
}
.fixed-min {
min-width: 600px;
}
<!DOCTYPE html>
<html>
<body onload="autoheight('ta')">
<table>
<tbody>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>
<div class="container fixed-min">
<textarea class="text-area">Set width in this big column
</textarea>
</div>
</td>
<td>
<div class="container" >
<textarea id="ta" onkeyup="autoheight('ta')" class="text-area">This contents of this column should always be visible i.e. no scroll bar, and instead the height of this row should adjust to show all content.
</textarea>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
You can make it a div and apply "contenteditable" = true.
Updated fiddle at : "https://jsfiddle.net/hbnr2yk6/"
Relevant changes required are:
<div class="text-area" contenteditable="true">This contents of this column should always be visible i.e. no scroll bar, and instead the height of this row should adjust to show all content.
</div>
.text-area {
width: 100%;
box-sizing: border-box;
display: flex;
min-height:50px;
height:auto;
border:2px solid rgba(63,63,63,1);
}
**************************** javascript solution ***********
Possible solution to fix the problem with textarea would be to use javascript. I have updated the fiddle at "https://jsfiddle.net/uqr98jf4/". In table column 1 there is textrea solution and table column 2 there is div solution. See if any one of it solves your problem.
I always use this library
autosize(document.querySelector('textarea'));
Demo
Please add row textarea rows and columns and columns to textarea
and add overflow: hidden or auto.
To remove the scrollbar you can use overflow: auto; or overflow: hidden;.
https://www.w3schools.com/cssref/pr_pos_overflow.asp
overflow: auto; will automatically create a scrollbar if the text area becomes too overloaded with text.
CSS isn't going to be able to read the content within the textarea tag to dynamically resize the textarea tag.
I am having some trouble formatting DIVs. I'm not much of a web guy so sorry if this question is a little silly.
Currently in my web page I have a Form with 3 divs inside. One div lays on-top, and the other two lay abreast:
However if the bottom two divs are both set to 50% width of the container they will stack vertically. If set to 50% and 49% they will stay abreast but there is a large ugly gap:
Here is a simplified version of the HTML, the styling is included.
<form id="Form1" style="width:100%">
<div id="Div1">
<table id="Table1" cellspacing="1" cellpadding="1" width="100%">
Table Stuff
</table>
</div>
<div id="Div2" BorderWidth="1" Style="display: inline-block;
width: 49%; float: left;">
<table id="Table2" cellspacing="1" cellpadding="1" width="100%">
Table Stuff
</table>
</div>
<div id="Div3" BorderWidth="1" Style="display: inline-block;
width: 50%; float: Right;">
<table id="Table3" cellspacing="1" cellpadding="1" width="100%">
Table Stuff
</table>
</div>
</form>
Thank you for your help.
I would use flexbox.
Use tables for tabular data and not layout.
You will need to account for the width the border adds to your element's width. The simplest fix is to apply box-sizing: border-box; to those elements. This will tell the browser to include the border when calculating the width.
i.e. If you tell an element to have a width and height of 200px and give it a 5px border, without box-sizing: border-box; your element will have a width and height of 210px ( 5px + 200px + 5px ). With box-sizing: border-box; the border is included in the width so the width and height remain 200px and the border is placed within, reducing the available space for content.
div {
min-height: 100px;
}
form {
display: flex;
flex-wrap: wrap;
}
div {
box-sizing: border-box;
}
div:nth-child( 1 ) {
width: 100%;
border: 1px solid red;
}
div:nth-child( 2 ) {
width: 50%;
border: 1px solid green;
}
div:nth-child( 3 ) {
width: 50%;
border: 1px solid yellow;
}
<form>
<div></div>
<div></div>
<div></div>
</form>
That's because the border-width. If you puts 50% + 50% + borders is more than 100%. I don't remember right now but exist a css property or something similar that's allows to the border to be included to the % of width. That will fix your problem.
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.
This question already has answers here:
CSS table right margin in scrollable div
(4 answers)
Closed 6 years ago.
I have a div enclosing a table.
Div has a padding of 20px.
If the table size is more than the div then scroll bar should be shown on the div.
Issue:
Padding is working fine when scroll bar is not present.
But when scroll bar is present then the scroll bar totally occupies the right side padding.
But some how the bottom padding is still applied event with scroll bar.
Question:
How to give 20px padding to div and make sure its content do the padding calculation from scroll bar if present else from border of div?
Note: No styles can be specified at table element. Since this table doesn't aware of the div wrapper.
Sample code and output image attached.
<html>
<head>
<style type="text/css">
.parentDiv {
border: 1px solid red;
height: 50px;
width: 200px;
overflow: auto;
padding: 20px;
}
.childDiv {
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="parentDiv">
<table class="childDiv" width="100%" height="100%">
<tr>
<td></td>
</tr>
</table>
</div>
<br/>
<div class="parentDiv">
<table class="childDiv" width="100%" height="100%">
<tr>
<td><pre>Sample text <input type="textbox"/></pre><br/>Sample second line</td>
</tr>
</table>
</div>
</body>
</html>
Output:
take the padding out of the parentDiv class, wrap the table in a new div - you'll still get scroll bars in the parentDiv, but your container div should compress the table to accomodate them.
try this:
<div class="parentDiv">
<div class="childDiv">
<table>
<tr>
<td></td>
</tr>
</table>
</div>
</div>
<style type="text/css">
.parentDiv {
border: 1px solid red;
width: 200px;
overflow:auto;
}
.childDiv {
border: 1px solid blue;
padding: 20px;
width:100%;
height:100%;
}
</style>
You'll notice that as you increase the height of the table, the lower border drops off the bottom of the div - you can scroll down to see it.
You could move the scrolling in to the new div:
<style type="text/css">
.parentDiv {
border: 1px solid red;
width: 200px;
padding: 20px;
}
.childDiv {
border: 1px solid blue;
width:100%;
overflow-y:auto;
height:50px;
}
</style>
How can i make the inner table to overlap the parent div with 5 px while resizing?
my current solution:
<div id="crop">
<table style="width:105%; height:105%;">
//table cells
</table>
</div>
problem is that it gets smaller when resizing...
how can I make it constantly overlap with 5px;
The folling seems to work nicely in FF3, Chrome and IE7. Though using expressions in CSS styles for IE is not ideal.
You should see that when rendered, the blue "outer" div is displayed within the "inner" div. The "inner" div will be red for browsers other than IE where it will be green instead.
Also note, in this example I had to subtract 2px from the height of the "inner" div to adjust for the top and bottom borders.
<html>
<head>
<style type="text/css">
#outer {
position: relative;
border: solid 1px blue;
height: 100px;
}
#inner {
position: absolute;
border: solid 1px red;
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
}
</style>
<!--[if IE]>
<style type="text/css">
#inner {
border: solid 1px green;
height: 108px;
width: expression(document.getElementById("outer").clientWidth + 10);
}
</style>
<![endif]-->
</head>
<body>
<table width="100%">
<colgroup>
<col />
<col width="100" />
<col width="200" />
</colgroup>
<tr>
<td>
<div id="outer">
<div id="inner">
<table border="1">
<tr><td>A</td><td>B</td></tr>
<tr><td>C</td><td>D</td></tr>
</table>
</div>
</div>
</td>
<td>Alpha</td>
<td>Beta</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>
</body>
</html>
In short:
Stick the table inside another div and set the table's width to 100%
Make that div do the moving around by setting its positioning to absolute (make sure the parent has relative) and set its width to 100%.
Use negative margins on the new div to pull it out by precisely 5px.
It's a bit messy but you'll definitely need negative margins and you'll probably need the position:absolute to have it overlapping...
Have you tried the following:
table {
position: relative;
top: 5px;
left: 5px;
margin-top: -5px;
margin-left: -5px;
}
This table will overlap the div with 5px at the right hand side and at the bottom. Margins are added to make the table fill the left hand side and top. Just omit the margins if you want the whole table to offset. You'd probably have to add some style to the div or content above the table, to keep the div from collapsing.
Here's a full example:
<style type="text/css">
#container {
background-color: red; //color added for illustration
}
#data {
background-color: blue; //color added for illustration
position: relative;
top: 5px;
left: 5px;
margin-top: -5px;
margin-left: -5px;
}
</style>
<!-- ... -->
<div id="container">
some text to make the div visible at the top
<table id="data">
<!-- rows -->
</table>
</div>