-ms-overflow-x Attribute | overflowX Property

Sets or retrieves how to manage the content of the object when the content exceeds the width of the object.

Syntax

HTML { -ms-overflow-x : sOverflow }
Scripting[ sOverflow = ] object.style.overflowX

Possible Values

sOverflowString that specifies or receives one of the following values.
visible
Default. Content is not clipped and scroll bars are not added. Elements are clipped to the size of the containing window or frame.
scroll
Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object.
hidden
Content that exceeds the dimensions of the object is not shown.
auto
Content is clipped and scrolling is added only when necessary.

The property is read/write for all objects except the following, for which it is read-only: currentStyle. The property has a default value of visible for all objects with the exception of TEXTAREA which has a default value of hidden. The Cascading Style Sheets (CSS) attribute is not inherited.

DHTML expressions can be used in place of the preceding value(s). As of Internet Explorer 8, expressions are not supported in IE8 mode. For more information, see About Dynamic Properties.

Remarks

 New for Windows Internet Explorer 8 Internet Explorer 8. The -ms-overflow-x attribute is an extension to CSS, and can be be used as a synonym for overflow-x in IE8 mode.

With Microsoft Internet Explorer 6 and later, when you use the !DOCTYPE declaration to specify standards-compliant mode, this property applies to the html object.

Standards Information

This property is defined in Cascading Style Sheets (CSS), Level 3 (CSS3) World Wide Web link.

Applies To

A, ABBR, ACRONYM, ADDRESS, APPLET, B, BDO, BIG, BLOCKQUOTE, BODY, CENTER, CITE, CODE, currentStyle, CUSTOM, DD, defaults, DEL, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, hn, HTML, I, IFRAME, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, KBD, LABEL, LEGEND, LI, LISTING, MENU, OL, P, PLAINTEXT, PRE, Q, RT, RUBY, runtimeStyle, S, SAMP, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TEXTAREA, TT, U, UL, VAR, XMP, CSSCurrentStyleDeclaration Constructor, CSSRuleStyleDeclaration Constructor, CSSStyleDeclaration Constructor

See Also

Tags :


Community Content

Tower_9
Tower_9

I'm trying to make alternative to code tags with white spaces, this code section is not limited by height, but it has limited width and in cases when text goes outside width limits there is need after scrollbar. For example: 

<div style="border: 1px dotted black; width: 200px; overflow-x: scroll;">
<pre style="margin-top: 0px; margin-bottom: 0px;">
test test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test test
</pre>
</div>
Works as I need in cases if text is longer that browser can show, but if there is short text and no need to show scrollbar, it shows inactive scrollbar, all browsers that I've tested with, shows inactive scrollbar.
So I tryed to set "overflow-x: auto", works well on FF, Opera, Safari and Chrome, BUT on IE7 and IE8beta2 there is anoying thing, that in cases when there is need after scrollbar, last row of text goes under scrollbar.

Any suggestions?

Sorry for my bad english...
Tags : div

Tower_9
quickfix for overflow-x content height

quickfix for previous problem. 

<html>
<head>
<title>overflow-x quickfix</title>
<script type="text/javascript">
<!--
function check_div(){
 //Detect user agent
 if(navigator.userAgent.toLowerCase().indexOf("msie") != -1) isIE = true;
 else isIE = false;
 if(isIE){// If using IE
  eldiv = document.getElementsByTagName("div");// Find all div elements on page
  for(i in eldiv){// Go throu every found div element
   if(eldiv[i].clientHeight < eldiv[i].scrollHeight){// If displayed element height is less than scrollable height
    var diff = eldiv[i].scrollHeight - eldiv[i].clientHeight;// Find difference of heights
    eldiv[i].style.height = eldiv[i].offsetHeight + diff;//Change element height
   }
  }
 }
}
-->
</script>
</head>
<body onLoad="check_div();">
<div style="border: 1px dotted black; width: 200px; overflow-x: auto;">
<pre style="margin-top: 0px; margin-bottom: 0px;">
test test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test test
</pre>
</div>
<div style="border: 1px dotted black; width: 200px; overflow-x: auto;">
<pre style="margin-top: 0px; margin-bottom: 0px;">
test test test test
test test test
test test test test
</pre>
</div>
</body>

Should fix IE problem on "overflow-x: auto;" case when there is text overflow detected and scrollbar is showed over text.

Tags : div

Page view tracker