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

How can I get size and location of RadInput?

4 Answers 43 Views
Input
This is a migrated thread and some comments may be shown as answers.
Aleksandar
Top achievements
Rank 1
Aleksandar asked on 26 Oct 2008, 07:34 PM
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

4 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 27 Oct 2008, 08:51 AM
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.
0
Aleksandar
Top achievements
Rank 1
answered on 27 Oct 2008, 11:28 AM
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

0
Dimo
Telerik team
answered on 27 Oct 2008, 12:05 PM
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.
0
Aleksandar
Top achievements
Rank 1
answered on 28 Oct 2008, 02:48 AM
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
Tags
Input
Asked by
Aleksandar
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Aleksandar
Top achievements
Rank 1
Share this question
or