Fix width inputs like Mac Skin

10 posts, 0 answers
  1. Gabriel Beauchamp
    Gabriel Beauchamp avatar
    41 posts
    Member since:
    Jan 2008

    Posted 10 Mar 2008 Link to this post

    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,
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 12 Mar 2008 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gabriel Beauchamp
    Gabriel Beauchamp avatar
    41 posts
    Member since:
    Jan 2008

    Posted 12 Mar 2008 Link to this post

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

    Thanks,
  5. Gabriel Beauchamp
    Gabriel Beauchamp avatar
    41 posts
    Member since:
    Jan 2008

    Posted 13 Mar 2008 Link to this post

    How do I get the parent element of the radTextbox?
  6. Gabriel Beauchamp
    Gabriel Beauchamp avatar
    41 posts
    Member since:
    Jan 2008

    Posted 14 Mar 2008 Link to this post

    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,
  7. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 17 Mar 2008 Link to this post

    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
  8. Gabriel Beauchamp
    Gabriel Beauchamp avatar
    41 posts
    Member since:
    Jan 2008

    Posted 27 Mar 2008 Link to this post

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

    Please help!

    Thanks,
  9. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 28 Mar 2008 Link to this post

    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
  10. Gabriel Beauchamp
    Gabriel Beauchamp avatar
    41 posts
    Member since:
    Jan 2008

    Posted 13 Apr 2008 Link to this post

    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,
  11. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 16 Apr 2008 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017