RadButton moves out of place

[Tiago]

Hello,

I have 4 RadListBoxes with an RadButton on the footer that on select changes the next one, so, the first changes the second, the second changes the third and so on, and all have scrollbar.

Now that I have configured the AjaxManager to ajaxify them, the button gets out of place when the listbox is updated, and when I pass the mouse over the button, it gets back to the right place. This happens in IE6, and I'm using the Q3 2010 release, as it is the only version available for now in the company I work.

Does anyone knows a solution for this?

Thanks!

[Rumen]

Hi Tiago,

IE6 and IE7 have incorrect interpretation of the CSS position:relative; property. You can see how to fix the problem in the following article: RadButton known issues in IE6 and IE7.

Best regards,
Rumen
the Telerik team

[Tiago]

Thanks!

The button was in the footer of a listbox, so i just added this to the css and it worked fine:

.rlbFooter
{
    position: relative;
}

[Supriya]

Setting the property position:relative also doesn't work on the radbuttons.

Still the rad buttons move out of place, and when mouseovered they return to the original place.

I am using a lot of radbuttons, and my page is getting messed up.

Help would be appreciated.

[Slav]

Hello Supriya,

Please ensure that you are applying the CSS style position: relative to the HTML container that has an overflow.

It is also possible that your problem is not related to the scenario discussed in this thread. You can check if the issue persists after replacing the RadButton with a standard Button control.

Note that I am mostly guessing as to what your setup is. I will need more information about the configuration of your page, as well as reliable steps for reproducing the problem in order to help you accordingly.

Greetings,
Slav
the Telerik team

[Taylor]

I also see a similar issue. It is very easy to reproduce the problem when using a ModalPopupExtender control as typically the RadButtons will not show up in IE6.  When I open a ModalPopupExtender panel in IE6, the RadButtons are not visible.  Initially, they do not have the focus as there are other controls before them on the ModalPopupExtender panel.  And, if I have two RadButtons on the panel, when i tab to where the first one should be in the tab order, both buttons show up correctly.  I can replace them with standard ASP buttons and Image Buttons and they work as expected so the problem is RadButton specific.  Has there been a resolution identified for this problem yet?

[Slav]

Hello Taylor,

I tried to reproduce the problem you described, but to no avail. I have attached my test page and a screen capture that shows the behavior on my end so that you can compare it with your actual project and let me know if I am missing something.

Please note that IE6 is an outdated browser, which sometimes interprets incorrectly the CSS styles on your page. An example for this is the positioning issue that was already discussed in this thread. It appears that the current problem is similar, however it is specific to your setup and I need to examine it in order to provide a concrete solution.

If you are still having difficulties, please modify the attached sample so that it matches your case. If this is not possible, you can also prepare a simple, fully runnable sample that isolates the problem so that I can inspect it locally.

Greetings,
Slav
the Telerik team

[Taylor]

Hello Slav,

I have created a sample that will demonstrate the problem.  Please provide me with an email address that I can send it to.

[Marin Bratanov]

Hi Taylor,

You can open a formal support ticket from your account where you can attach your project. Alternatively, send it to support <at> telerik.com and we will get it. Let us know which way you prefer.


Greetings,
Marin Bratanov
the Telerik team

[Slav]

Hi Todd,

Thank you for the provided sample. As I mentioned in the previous posts, the problem stems from positioning issues with IE 6. In your particular case it appears that relatively positioned elements in an HTML table, which is contained in an element with position: fixed (the popup extender), are not displayed correctly. Since the RadButton is relatively positioned, it is affected by this browser bug as well.

You can avoid the problematic behavior by removing the table from the popup content and using CSS to position the elements. Another option is to locate the section below in NewDialog.ascx and to apply position: relative to the marked table cell:

...
   <tr>
     <td class="buttonsWrapper">
         <table>
             <tr>
                 <td>
                     <telerik:RadButton ID="SaveButton" runat="server" Text="Save" AutoPostBack="false">

                     </telerik:RadButton>
                     <asp:Button ID="CancelButton" runat="server" ImageAlign="AbsMiddle"
                         Text= "Cancel"
                         ToolTip="Cancel" CausesValidation="false"
                         AlternateText="Cancel" Style="position: absolute;" />
                 </td>
             </tr>
         </table>
     </td>
 </tr>
...

<style type="text/css">
    .buttonsWrapper
    {
        position: relative;
    }
</style>

Greetings,
Slav
the Telerik team

[Nareshkumar]

I am using IE 8, still this issue persists for me. The rad buttons moving oout of my content.

[Ianko]

Hello Nareshkumar,

From the provided information I can only try to make assumptions about the encountered behavior and the reason for it.

It would be helpful if you could open a formal support ticket with more details about the issue and possibly a locally runnable project, which isolates the problem, so that we could investigate it and find a possible solutions for you.

Regards,
Ianko
Telerik