checkbox/radiobutton with class "rfdRtl" inside RadWindow

2 posts, 0 answers
  1. Ofer Tiber
    Ofer Tiber avatar
    2 posts
    Member since:
    Apr 2006

    Posted 19 Aug 2010 Link to this post

    Hi,

    I am trying to decorate a page that should be opened inside RadWindow.
    for this purpose I am using RadFormDecorator and using the class "rfdRtl" in order to have the text of radio buttons and checkboxes on the left. my problem is that when clicking on the checkbox/radiobutton, then the vertical scrollbar of RadWindow jumps to the top (very annoying...)

    I believe you can reconstruct just by adding the following code snipet under the body tag of RadWindow:
    <table style="width:180px" class="rfdRtl">
      <tr>
        <td style="width:20px;padding-top:300px" />
        <td style="width:140px">
          <asp:CheckBox ID="test" runat="server" Text="Testing..." />
        </td>
        <td style="width:20px" />
      </tr>
    </table>

    Is it a bug? when removing the class "rfdRtl" it works just fine.
    The skin I am using is "Default" (but, i am not sure if it matter)

  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 24 Aug 2010 Link to this post

    Hi Ofer,

    For convenience I am pasting the reply I sent in your support ticket on the same subject - I believe it could be of help for other users as well:


    This could happen in some scenarios because of the way RadFormDecorator styles checkboxes. When RadFormDecorator is used, the real checkboxes are hidden outside of the viewport. When the decorated checkbox is clicked however, browsers try to focus the real checkbox, hence the "jumping". To avoid that, the only thing that you usually need to do is to set position:relative to the parent container. By "parent container" I mean the parent element that is wrapping the checkboxes - it could be a DIV or a SPAN tag for example.

    In your case however, because of the RTL mode, the approach is a bit different. You need to add the following CSS in your page:
    input.rfdRealInput
    {
        display: none;
        display: block\9;
        position: static !important;
        float: right;
        outline: 0;
        width: 0;
    }

    I hope this helps.

    Greetings,
    Georgi Tunev
    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
Back to Top