Overflow visible not working

[TheCroc]

Hi

I need to set overflow: visible on a textbox but have found that the style is not being obeyed.

I modified a Telerik example page by adding a textbox to the page with the overflow property set:

<li>
      test : <input type="text" value="message" style="overflow:visible;width:20px" />
</li>

I have attached a screenshot of what I see.

I am using RadControls for ASP.NET AJAX Q3 2010 and I see the problem in IE8 and FireFox 3.6.

Any help is appreciated.

[Georgi Tunev]

Hi,

Such behavior is expected - you will get the same if there aren't any RadControls on the page:

<form id="form1" runat="server">
<ul>
    <li>test :
        <input type="text" value="message" style="overflow: visible; width: 20px" />
        <div style="overflow: visible; width: 20px; border:1px solid red;">
            message</div>
    </li>
</ul>
</form>

If you run this code in your browser, you will notice that only the DIV element will display the text as you need it. The input however, does not support this.

Best wishes,
Georgi Tunev
the Telerik team

[TheCroc]

FireFox is consistent with your description. However IE8 does not behave in the same way, which is what confused me in the first place. Using your code on an empty page without Telerik controls I see input and DIV both overflowing. In a Telerik page viewed in IE8, I see just the DIV overflowing. See attached screen shot.

[Georgi Tunev]

Hello again,

This is happening not because of Telerik's controls, but due to the fact that your HTML page does not have a doctype set. See attached video - there I used the same code in a standard HTML page, created by Visual Studio. You will notice that if I remove the Doctype declaration or set the browser to show the page in quirks mode, I will get the same result as in your screenshot. On the other hand, our controls are built upon the MS AJAX framework which uses XHTML-compliant doctype and they (like any other AJAX controls) rely on that doctype for proper styling and positioning on the page.


Best wishes,
Georgi Tunev
the Telerik team

[TheCroc]

That explains the problem exactly.

Thanks Georgi, I really appreciate your time and help.