Overflow-x is not scrollable in my case. Please see the result in the picture. It just shows the scrollbar but it's not scrollable.
image
Here's what I've done
<div class="table-wrapper">
<table class="table">
....
</table>
</div>
.table-wrapper {
overflow-x: scroll;
overflow-y:hidden;
}
I've searched on the internet and tried some other instructions but don't work for me.
As per my knowledge, you have to define max-width max-height (max-height: 410px !important;) of your table once data will be overflow in table row it will we display scroller.
Related
As this link : https://jsbin.com/tudeseqomi/edit?html,css,output
the panel width and height shoule be 800px and 450px.
So I want to let the part:
<div class="panelFrame">
<div class="panel">
</div>
</div>
can scroll because it's too big over the blue zone ,
How can I do this ?
p.s. I don't know why the <div class="panelFrame"> part become whit on jsbin, on my local it's green
add overflow-x: scroll; on .rightpart class
.rightpart{
background-color:blue;
height:500px;
overflow-x: scroll;
}
See below
set overflow:hidden/scroll in css for the green div
You have given the color green to which is overwritten by the class .panel in one of the included CSS from the following link, https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/less/panels.less.
Use the property overflow:scroll to have scroll on the element or reduce the width of the 'panelFrame' and use the above property.
I've been working with a html page that has a form in the bottom of the page. That form is inside a table and table is inside a div. Fiddle here : http://jsfiddle.net/2ZTvQ/
Problem is on smaller screen the div is taking 100% width(full width of the screen) but not width of the whole table containing the form. I'm not an expert with html/css so I'm not even sure if it can be done this way.
Sample HTML:
<div class='wide'>
<table width="100%">
<tr>
<td>
looooooooooooooo ooooooooooo00000 ooooooong text goes here
</td>
</tr>
</table>
</div>
CSS:
.wide {
text-align:center;
background:#e7e7e4;
width: 100%;
padding-top:20px;
}
Remove text-align:center; or create a new aligning style for the table.
What I think you will have to do is add a min-width to .wide of however small the table will get after manually trying to reduce it's width. So once it is as small as you can get it (use media queries to change classes under a certain window width) set
.wide { min-width: thatSize; }
What will happen now is instead of the content disappearing or running out of the div, you will now just have to scroll horizontally to see it all.
Or what you can do is add
.wide { overflow: scroll; }
What that will do is keep the viewport the same size, but make the content inside .wide scrollable like an iframe. Probably better looking than the first solution. Whatever you decide is a design choice on your part. But most important thing would be using media queries and trying to get the form as thin as possible. Display block and percentage widths are your friends there.
Hi all am created a html layout having two sides left and right left one having navigation menu and right having contents
i need both has full-height has to come to bottom of the screen even there is very low contents.
now it looks like
here my fiddle
demo
moreover i tried full height for body and html to
body, html{
height:100%;
}
(relevant) HTML:
<div class="wrapper">
<div class="left">
<!-- stuff -->
</div>
<div class="spacer"></div>
<div class="right">
<!-- stuff -->
</div>
</div>
(relevant) CSS:
body, html {
height : 100%;
}
.wrapper {
width : 600px;
display : table;
margin : 0 auto;
height : 100%;
}
.left, .right {
display : table-cell;
}
.left {
width : 30%;
}
.right {
width : 65%;
}
.spacer {
display : table-cell;
background : transparent;
width : 5%;
}
Running Demo
I used normalized.css to reset the styles and avoid the default margins otherwise applied to the display: table; div. Try removing it on the demo (External Resources menu on the left) to see what I mean.
Take a look here to read something else on CSS Resets.
EDIT: added the transparent spacer.
Use :
display: table-cell
Here's the result:
http://jsfiddle.net/GhxQL/6/
You've got the right CSS in your fiddle; you just have some errors in the code.
Make sure your lines of CSS end in ; instead of : – there are a few lines in which you have colons instead of semicolons. And change your first line from htm, body to html, body.
Updated fiddle: http://jsfiddle.net/hqkVh/7/
Ok Let's make the equation HARDER !!
so if you have RESPONSIVE WEB DESIGN and WANT TO USE BOTH HEIGHT and MIN-HEIGHT and also Height All the Time 100% What's THEN ?
if you use HEIGHT 100%, u cant handle All of the content of your columns, It's obvious by resizing the browser the Height is 100% and the content dont show completely
You might wanna CHECK THIS SOLUTION from my own question, the MIN-HEIGHT Solution
PLEASE CONSIDER THESE QUESTIONS ARE NOT DIFFERENT JUST THE WAY OF ASKING IS DIFFERENT
I suggest Use Min-Height 100% and Height Auto
I have come across some methods of centering a div within a div, but those usually requires the element to be centered to have a fixed width and height. Is there a way to do it if the inner div to be centered will be of variable width and height (example: centering an image inside a frame of a fixed size, and the image could be of variable width/height)
horizontal centering can be done with CSS:
#containerDiv {
text-align:center;
}
#innerDiv {
margin: 0 auto;
text-align: left;
}
For vertical centering I use Javascript if the containerDiv doesn't have a fixed height.
The only ways to center variable width in all browsers (that I know of) is with
<table align="center" cellpadding="0" cellspacing="0"><tr><td><div>This div is variable width and is centered.</div></td></tr></table>
or JavaScript
As for center horizontal that would force you to use JavaScript (I think)
IE needs a "text-align: center" on the top-level element.
For example, your body element has "text-align: center",
and your container has "margin: 0 auto".
Then IE will center it.
You can set back "text-align" to left on your container if you don't want its content centered.
Centering the width is easy...you probably already know this, but just set the left and right margin to auto. For height, unfortunately, I've only seen weird positioning work-arounds. You'd think that they'd make a similar margin for top/bottom, but alas, no. I'll try to find a link on the work-arounds.
<div style='width:400px;height:200px;background-color:#CCCCCC;'>
<div style='margin:0px auto;width:30px;height:30px;background-color:#0000CC;'> </div>
</div>
EDIT: Found link that might help on the vertical part:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
You could use the display attribute to make a table-cell out of it:
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
<DIV class="container">
<P>This small paragraph...
</DIV>
However, this recommendation does not really work for me. But this one does:
https://stackoverflow.com/a/6284195/156481
A div, containing a table has the following CSS styling:
#formulaAlts {
float: right;
height: 200px;
overflow: auto;
}
This makes it so that when the table is >200px, a scrollbar appears only for the table and the other elements on the page stay put. Great!
Now for our friend IE...
In IE, the element spawns the vertical scrollbar without growing the containing element. To "solve" this, a horizontal scrollbar is created.
That sucks. And I don't want it to suck...
Any ideas?
--EDIT--
I found out that the line
overflow-x: hidden;
forces IE to ignore the horizontal scrollbar. This is better.. but not quite there because now part of my table is invisble.
Careful.
overflow-x
isn't the most widely supported attribute out there.
I tend to go with a containing div with some right padding:
CSS:
div.scroll {
overflow:auto;
padding-right:6px;
/* I've found 6px to be just right my purposes, but try others*/
}
EDIT: You'll need to add a height attribute somewhere for this to work! I usually have a default set in the div.scroll declaration then tweak that for specific cases (most).
HTML:
<div class="scroll" >
<table>
<!-- your table stuff in here -->
</table>
</div>