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

checkbox/radiobutton with class "rfdRtl" inside RadWindow

1 Answer 63 Views
Window
This is a migrated thread and some comments may be shown as answers.
Ofer Tiber
Top achievements
Rank 1
Ofer Tiber asked on 19 Aug 2010, 07:54 AM
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)

1 Answer, 1 is accepted

Sort by
0
Georgi Tunev
Telerik team
answered on 24 Aug 2010, 08:44 AM
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
Tags
Window
Asked by
Ofer Tiber
Top achievements
Rank 1
Answers by
Georgi Tunev
Telerik team
Share this question
or