checkbox/radiobutton with class "rfdRtl" inside RadWindow

[Ofer Tiber]

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)

[Georgi Tunev]

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