This is a migrated thread and some comments may be shown as answers.

Width in IE8

34 Answers 624 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

34 Answers, 1 is accepted

answered on 21 Oct 2008, 08:05 AM

ComboIE8.JPG

Hi David,

RadComboBox works as expected at our side. We have tested with IE 8 beta 2. Do you use the same version?

Please see the attached image for a reference.

Regards,
Rosi
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 20 Mar 2009, 08:30 PM

I must admit to being a bit disappointed in this response.

Internet Explorer 8 has been available to developers in various beta and release candidate forms for quite some time now. And this forum thread was originally started by David in October of 2008. In my opinion, the Telerik development team had plenty of time to get ready for the release of IE8. What's more, I believe support for IE8 should have been a top priority for the Q1 2009 release - even over new features.

Yes, things work fine in IE8 if compatibility mode is engaged, so at least there's a workaround. And I suppose the beginning of April isn't far off, but it would have been nice to see Telerik ahead of the curve on this one.

answered on 20 Mar 2009, 11:02 PM

@Mark:
While I would like everything to magically work now that IE 8 is final, it is not really fair to expect Telerik to have all of the IE 8 specific bugs worked out by the time the browser was released in final form (No matter how many beta's and RC's there were). IE 8 had some pretty significant changes between the betas and RC. And even though RC should have been very close to final, they have obviously continued to make significant changes between RC and the final build.

An example of one of these changes and the Telerik controls I've experienced was with the RadWindow. In Beta 2 and RC the iframe inside the RadWindow would not properly fill 100% height unless you manipulated the dom after page load. In IE 8 Final, the iframe behaves correctly. This was without any changes from Telerik to the RadWindow.

Telerik has always been on top of their game when it comes to supporting the latest browsers. I believe that if it would have been realistic to have full IE 8 compatibility, they would have done it for Q1.

Besides, waiting a few weeks for an official fix should not be that big of a deal. If you need to get something out the door before Q1 2009 SP1 is released, I recommend that you follow my instructions a few posts back (note that the work-around I mention will continue to work after this issue is fixed), or add the meta tag to force IE 7 rendering mode.

answered on 18 Nov 2009, 07:22 PM

ie8-defaultmode.jpg

firefox.jpg

ie8-compatabilitymode.jpg

Sorry to bring up old issues, but I am testing with Internet Explorer 8 with RadControls for ASPNET AJAX Q1 2009.

In every scenario I tested under, the RadNumericTextbox without SpinButtons works fine in IE and Firefox.

With the spinbuttons, IE8 stretches the textbox width to 100% in default mode despite setting the width manually, but compatability mode works as expected.

In the snippet below, I also added a "kludge" I came across as a way to allow it to stay inline and set the width in both modes with the spinbuttons available. It involves a couple of divs and some CSS:

    
            <%@ Page Language="VB" AutoEventWireup="false" CodeFile="TEST.aspx.vb" Inherits="ListMonitor_TEST" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server">  
        
                <title>Test Page</title>   
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">  
        
                    </asp:ScriptManager> 
        
                    <p><strong>RadNumericTextBox WITHOUT SpinButtons:</strong><br /> 
        
                    inline text <telerik:RadNumericTextBox ID="RadNumericTextBox3" runat="server" Culture="English (United States)" 
        
                        Value="0" Width="60px">  
        
                        <NumberFormat DecimalDigits="0" AllowRounding="false" /> 
        
                    </telerik:RadNumericTextBox> inline text</p> 
        
                    <p><strong>RadNumericTextBox WITH SpinButtons:</strong><br /> 
        
                    inline text <telerik:RadNumericTextBox ID="RadNumericTextBox4" CssClass="inline_override" runat="server" Culture="English (United States)" 
        
                        Value="0" Width="60px" ShowSpinButtons="true">  
        
                        <NumberFormat DecimalDigits="0" AllowRounding="false" /> 
        
                    </telerik:RadNumericTextBox> inline text</p> 
        
                    <p><strong>RadNumericTextBox WITH SpinButtons (Div/float hack):</strong></p>  
        
                    <div style="float: left;">inline text&nbsp;</div><div style="float: left; white-space: nowrap; width: 60px; vertical-align: middle;"><telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" Culture="English (United States)" 
        
                        Value="0" Width="60px" ShowSpinButtons="true">  
        
                        <NumberFormat DecimalDigits="0" AllowRounding="false" /> 
        
                    </telerik:RadNumericTextBox></div>inline text  
        
                </form> 
        
            </body> 
        
            </html>

I attached screenshots of how it looks in IE8 under the two modes and Firefox.

Are there any official bug fixes available for this yet?

Thanks!

answered on 12 Apr 2010, 08:15 AM

Hi,

I'm having a problem. using the latest Telerik Radcombobox version: 2010.1.309.35

Essentially the control looks fine in Chrome and IE compat-mode, however in IE8 and FF 3.6 the width collapses and i see just a little drop-down arrow.

here's the call:

<telerik:RadComboBox ID="RadComboBoxDT" Width="240px" Height="180px" AllowCustomText="false"

EmptyMessage="Select a choice" runat="server" CssClass="lst14" DropDownWidth="240px"

DataValueField="ID" DataTextField="Name" HighlightTemplatedItems="true" OnClientDropDownClosed="onDropDownClosing"

OnClientLoad="setComboBoxText">

the CssClass is only a width element

.width = 145px !important

no stylistic elements are being set by code for this control.

Thanks for your help!

answered on 13 Apr 2010, 08:27 AM

HI Kamen,

I reduced this down to the javascript-toggle class:

when i use toggle-container this problem shows up:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

/* <![CDATA[ */

var cancelDropDownClosing = false;

function StopPropagation(e) {

//cancel bubbling

e.cancelBubble = true;

if (e.stopPropagation) {

e.stopPropagation();

}

function removeLastComma(str) {

return str.replace(/,$/, "");

}

function onDropDownClosing() {

cancelDropDownClosing = false;

}

/* ]]> */

</script>

function setComboBoxText() {

var combo = $find("<%= RadComboBox1.ClientID %>");

combo.set_text("Multiple Items Selected");

}

function onCheckBoxClick(chk) {

var combo = $find("<%= RadComboBox1.ClientID %>");

var hdnFilterSk = document.getElementById("<%= hdnFilterSk.ClientID %>");

cancelDropDownClosing = true;

var values = "";

var items = combo.get_items();

for (var i = 0; i < items.get_count(); i++) {

var item = items.getItem(i);

var chk1 = $get(combo.get_id() + "_i" + i + "_chk1");

if (chk1.checked) { values += item.get_value() + ","; } }

values = removeLastComma(values);

if (values.length > 0) {

hdnFilterSk.value = values;

combo.set_text("Multiple Items Selected");

}

else {

combo.set_text("");

}

</script>

</telerik:RadCodeBlock>

<telerik:RadAjaxPanel ID="pnlAjax1" runat="server" LoadingPanelID="pnlAjaxLoading1"

EnableAJAX="true">

<a href="#">Set Filters</a></h2>

<div class="toggle_container" style="display: none;"> // OFFENDING LINE RIGHT HERE

<asp:HiddenField ID="hdnFilterSck" runat="server" />

<telerik:RadComboBox ID="RadComboBox1" Width="240px" Height="300px" AllowCustomText="false"

EmptyMessage="Select a school" runat="server" DropDownWidth="340px" DataValueField="ID"

DataTextField="Name" HighlightTemplatedItems="true" OnClientDropDownClosed="onDropDownClosing"

OnClientLoad="setComboBoxText">

<asp:CheckBox runat="server" ID="chk1" Checked="false" onclick="onCheckBoxClick(this)" />

<asp:Label runat="server" ID="Label1" AssociatedControlID="chk1">

<%#Eval("Name")%>

</asp:Label>

</div>

</ItemTemplate>

</telerik:RadComboBox>

<br />

</div>

</telerik:RadAjaxPanel>

answered on 15 Apr 2010, 03:11 PM

Hello Austinguy,

Yes, we already identified this problem although in other circumstances. The width of RadComboBox is not set when RadComboBox is residing in a container with display: none. We are already working on a fix for the next service pack, meanwhile you can run the repaint() method of RadComboBox right after you show it, something like this:
<a href="#" onclick="$telerik.$('.toggle_container').show(); $find('RadComboBox1').repaint()">Set Filters</a>
Let me know if this helps.

All the best,
Kamen Bundev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Width in IE8

34 Answers, 1 is accepted