How do I remove the scrollbars but allow scrolling in internet explorer? It looks fine in FireFox/Chrome/Safari but it looks absolutely terrible in IE and is basically un-useable.
Here is my CSS:
<style type="text/css">
table
{
display:inline-block;
overflow:auto;
white-space: nowrap;
}
th, td
{
display:inline-block;
height:100px;
width:100px;
overflow:hidden;
white-space: pre-wrap;
}
th {
text-align: left;
}
td {
vertical-align: top;
padding-top:0px;
}
</style>
And here's a screenshot of my table in IE9-11 (they all look the same):
It's so hideous...
Here is a fiddle with the code http://jsfiddle.net/EZM6x/
Find the version of IE that it works in, and use this.
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=//put version here">
<![endif]-->
I would totally disable the scrollbar, and add a jquery event and use the animate or scrollTop function to achieve the results.
Or you can use a scrollbar plugin like tinyscrollbar and set the scrollbar's CSS to display:none
If you can not use jquery, you can still align the scrollable areas above each other to hide the scrollbars.
Related
1.) This works in Chrome.
In Firefox, however, a django tables table that we are rendering on our site is not observing the overflow style. From what I read, table cell elements may be a "per browser" decision because they aren't pure block elements (if I am understanding the standard correctly), but here's a picture of my problem.
I've tried fussing with the max-width tag (to no effect other than the width changes but the overflow is still garbled into the next cell). I could technically wrap the line (white-space), but we don't want huge table rows on the page.
The Mozilla developer page (Overflow) says "In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap." The height property doesn't seem to change this either. No other CSS property I've tried seems to have an effect.
I keep thinking that this is something Firefox may not support (i.e. table cells aren't "block-level"?), but I can't quite say that for certain.
EDIT: Here's the html. It's just a basic table produced by django tables. Please ignore the inline style I attempted which is commented out.
EDIT: Here's inline code and a JSFiddle link at the bottom.
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<head>
<style>
<body {font-family: Arial, Helvetica, sans-serif;}
th {
padding: 8px;
}
td {
padding: 8px;
}
td.content {
overflow-x: scroll;
max-width: 0;
white-space: nowrap;
}
</style>
</head>
<body>
<table>
<thead><th>Column 1</th><th>Column 2</th><th>Column 3</th></thead>
<tbody>
<tr><td>Other stuff</td><td class="content">A REALLY REALLY REALLY
REALLY LONG MESSAGE</td><td>Other stuff</td></tr>
</tbody>
</table>
</html>
JSFiddle
I made a simple code for you, i hope help you, tell me if this is what you want:
.msg_list{
border:1px solid red;
}
.td-content{
border:1px solid blue;
max-height:100px;
max-width:100px;
}
.content{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
.content div{
width:200px;
}
<table class="msg_list">
<thead>
</thead>
<tbody>
<tr>
<td class="td-content">
<div class="content">
<div>One really really really really really long message</div>
</div>
</td>
</tr>
</tbody>
</table>
If you watch you can see in the css the class .content and his property max-width, i tested it in firefox, you can try it
How can I center one div inside another div?
Thank you!
You have some fundamenatal syntactic issues to face here:
You should stop using div to encase image tags and instead use the figure tag in HTML5.
You should (as commented by Hevlastka) remove the size defined in the <img> tag and have the sizing only defined in CSS.
You have set a max-width without setting a width which can cause issues on IE based browsers.
IE10 and IE11 do not appear to support overriding min-width or max-width values using the initial value.
IE7 doesn't support min-width on input button/submit button/reset button.
max-width doesn't work with images in table cells in IE.
Using Normalize CSS is highly recommended (esp. if you don't want to use javascript).
You should try and get out of the habit of using <style> as soon as possible and instead put your CSS in its own specific file to be called by the HTML file.
Edits to your code that I've used to make it work for me on IE 11 and Edge:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title is REQUIRED in HTML head area</title>
<style>
div {
text-align:center;
}
/*
The picture and the div must be Centered
inside their container!
*/
figure {
border: 1px solid red;
padding:20px;
text-align:center;
display:inline-block;
margin:auto;
}
img {
border: 1px solid black;
width: 100%;
max-width:640px;
height: auto;
margin:auto;
}
</style>
</head>
<body>
<div>
<figure>
<img src="https://image.ibb.co/bE3eVF/my_Picture.jpg">
</figure>
</div>
</body>
</html>
Adding Modernnizr.js is solving the problem.
Add this between your <head> tags.
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
and remove display: table; from your CSS.
This is my following table which is not working in IE 8.
The problem is when I am scrolling the table, the first column is getting fixed and remaining rows are scrolling above the first column. This is probably only in IE 8; it is working fine in Chrome and Firefox.
<table border=0 id="dataTable0" class='table_data' style="position:absolute; margin:0;table-layout:auto" width=100%>
<syn:outputData outputdata="#{DocDetailsBean.paraList}" ></syn:outputData>
</table>
This is my CSS file:
.table_data {
background-color:#F3F3F3;
color:#666666;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
Add table-layout: fixed to the 's style. Without it, applying width to a table cell is interpreted as min-width (a carryover from when min-width didn't exist)
I found two ways to solve this problem in IE8.
1) Adding extra td element of width: 0px to tr's of thead and tbody.
IE8 demo
2) Adding a hidden letter to content of after pseudo selector.
tr:after{
content: ".";
visibility: hidden;
}
I added the above in conditional css. because the problem was only in IE8. (I haven't tested in IE9+)
<!--[if IE 8]>
<style>
/* the above css code here */
</style>
<![endif]-->
IE8 demo
I used the latter one because it is simple.
I tried to add right scroll in div. This works in most browsers, but not properly when using iPad Safari. Does the iPad not suported this css attribute?
I prepared test html. It do not work too.
<html>
<head>
<style>
.ounner {
border: solid 1px red;
width:300px;
height: 500px;
overflow:scroll ;
}
.inner{
border: solid blue 1px;
height: 700px;
width: 400px;
}
</style>
</head>
<body>
<div class="ounner">
<div class="inner">
sdsd
</div>
</div>
</body>
</html>
overflow: auto and overflow: scroll are supported on MobileSafari, but since scrollbars are not used on iOS, to scroll these areas one must use two fingers.
There is a JavaScript library called iScroll that handles touch events and implements one-finger momentum scrolling manually; perhaps that would be worth looking into.
I have used css:
-webkit-overflow-scrolling: touch;
and scrolling works with 1 finger as well (iPad 2, iOS 5.1.1).
Hope it helps, Filip
How can I stop this text from overflowing?
<html>
<head>
<style type="text/css">
.sticky
{
background-color: #FCFC80;
margin: 5px;
height: 100px;
width: 135px;
}
.sticky .edit
{
vertical-align:middle;
height: 100px;
position:relative;
color:Black;
background-color:blue;
height:90px;
vertical-align:middle;
width:90px;
border-collapse:collapse;
}
</style>
</head>
<body>
<div id="note44" class="sticky">
<div id="text44" class="edit" title="Click to edit" style="">A very long word: abcdefasdfasfasd</div>
</div>
</body>
</html>
I think word-wrap is supported in most browsers?
word-wrap:break-word;
Depends on what the desired output should be, but if you want to hyphenate the word, you can use , that is, replace "abcdefasdfasfasd", with say, abcdefasdfasfasd.
You could also have a look at the overflow property.
does justify do it?
There's a CSS property called word-wrap. Give it the attribute "break-word" and you should be good to go.
.break-word {
word-wrap: break-word;
}
Source: Web Designer Wall - Force text to wrap
The css mentioned above won't work in all browser's as it's non-standard.
When I run into this I usually use php's wordwrap function, but that's no good if you're not using php.
Two things which need to be pointed out:
You've defined the height of the second element twice in the css.
If you wrap text inside an element with a defined height, it could well overflow, and cause you a new set of problems.