How can I get size and location of RadInput?

[Aleksandar]

No way to find size and location of RadInput. I am using: Sys.UI.DomElement.getBounds(RadInputDOMElement),while RadInputDOMElement is  sender.get_wrapperElement() or  sender.get_element() in any of the client events.
Do you have any suggestions on how to get this info?

Alex

[Dimo]

Hi Aleksandar,

This works on my side, please check you code.


<telerik:RadTextBox ID="RadTextBox1" runat="server" Text="text" ClientEvents-OnValueChanged="getSize" />

<script type="text/javascript">
function getSize(sender, args)
{
    var tbwrapper = sender.get_wrapperElement();
    var bounds = Sys.UI.DomElement.getBounds(tbwrapper);
    alert("width " + bounds.width + "; height " + bounds.height + "; x " + bounds.x + "; y " + bounds.y);
}
</script>


Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Aleksandar]

Hi Dimo,
Check this out:

<script type="text/javascript">
function getSize(sender, args)
{
    var tbwrapper = sender.get_wrapperElement();
    var bounds = Sys.UI.DomElement.getBounds(tbwrapper);
    alert("width " + bounds.width + "; height " + bounds.height + "; x " + bounds.x + "; y " + bounds.y);
}
</script>

<form id="form1" runat="server">

<asp:Panel ID="Panel1" runat="server"
    style="left:0px;top:0px; border:solid 1px; width:700px; height:700px; background-color:#ffffff; overflow:hidden;">

    <telerik:RadTextBox ID="RadTextBox1"
       runat="server" Text="text" ClientEvents-OnValueChanged="getSize"
        style="color: #404040;
        position: absolute;
        left: 100px;
        height: 16px;
        border-right: #89afe6 1px solid;
        border-top: #89afe6 1px solid;
        font-size: 12px;
        border-left: #89afe6 1px solid;
        border-bottom: #89afe6 1px solid;
        background-color: #e0eeff;
        width:60%"/>
</asp:Panel>

Returns 1px for width and 1px for height.
Reagrds,
Alex

[Dimo]

Hello Aleksandar,

The problem is with the position:absolute style, which in this case applies to the RadInput textbox. This causes the control's wrapper to have zero dimensions, because there is nothing to expand it.

You have two options:

1) Use

var tbwrapper = sender._textBoxElement;

instead of the wrapper element.

2) Apply the position:absolute style to the RadInput wrapper like this:


ASPX

<asp:Panel CssClass="TextBoxWrapper">
   <telerik:RadTextBox Skin="SkinName" />
</asp:Panel>


CSS

.TextBoxWrapper .radInput_SkinName
{
     position:absolute;
     top:0;
     left:100px;
}



Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Aleksandar]

Thanks for this, but if this was in your documentation, I would be few hours ahead now. I also stopped using your Input control because of this.

Regards,
Alex