Fix width inputs like Mac Skin

[Gabriel Beauchamp]

There is a weird behavior with the Mac Skin or any other Skin that uses a background image with a fix width. The behavior only happens in IE 7, the control works great with FireFox. Here is a test link.

http://beta.l33tlink.com/testInput.aspx

When you type in something that will go beyond the width of the input, the control's background image will stay at the bottom right, but when you go back to the beginning of your input using the left arrow keyboard key, the background image is lost, since it stays on the bottom right.

Is there a way around this bug?

Thanks,

[Dimo]

Hello Gabriel,

Thank you for providing a live URL.

We are aware of this issue with RadInput Mac skin. Unfortunately, it is caused by IE7 behavior (I can't tell whether this is a bug or not).

Because of this problem, we have already removed the textbox background images from RadInput Inox and Macromedia skins. However, the Mac skin is somewhat special and the textbox cannot be made look like a real Mac textbox without background images.

You have a couple of options - use a custom Mac-like skin with no background images, or use another skin.

If all you Mac skin textboxes are the same size, you can try the following workaround - remove the background images from the textbox and use them on the HTML elements containing a RadInput. Thus these background images will not move with the textbox text. RadInput has client events, which you can use to change the CSS class of the control's parent element, so that the user experience (changing colors on hover, focus, etc.) is preserved. For example:

<telerik:RadTextBox>
     <ClientEvents OnMouseOver="radhover"  />
</telerik:RadTextBox>

<script type="text/javascript">
function radhover(sender, eventargs)
{
      ..........
}
</script>

Let us know if you need additional information.

Regards,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Gabriel Beauchamp]

Thanks, I will try your last suggestion. I will let you know if it works.

Thanks,

[Gabriel Beauchamp]

How do I get the parent element of the radTextbox?

[Gabriel Beauchamp]

On the ClientEvent OnMouseOver, how do I get the parent element??

<script type="text/javascript">
function radhover(sender, eventargs)
{
      //get the parent element and change the background image
     //How do I do that??  sender.getParent() ??
}
</script>

Your help is appreciated,

Thanks,

[Maria Ilieva]

Hello Gabriel Beauchamp,

Try this approach in order to get the parent element of RadInput:

var input= sender.get_element()
->input.ParentElement

Best regards,
Maria Ilieva
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Gabriel Beauchamp]

That doesn't work. I get an undefined Object for input.ParentElement

Please help!

Thanks,

[Maria Ilieva]

Hello Gabriel,

Could you please post the code that you are using, or better yet open a formal support ticket, and supply us with a small working project, so that we could review it and advise you further.

Greetings,
Maria Ilieva
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Gabriel Beauchamp]

Pretty simple example would be to just do:

<script type="text/javascript">
function radhover(sender, eventargs)
{
    var input = sender.get_element();
    alert(input.ParentElement);
}
</script>


This will alert: "undefined"

Please help,

Thanks,

[Maria Ilieva]

Hi Gabriel,

Try the following solution:

<script type="text/javascript">
function radhover(sender, eventargs)
{
    var input = sender.get_element();
    alert(input.parentElement);
}
</script>

Another possible approach for this functionality is to use an alert(input.parentNode) as opposed to alert(input.parentElement).


Greetings,
Maria Ilieva
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center