More in this section
Forums / Developing with Sitefinity / ConstrainProportions alone?

ConstrainProportions alone?

The forums are in read-only mode. In case that you want to directly contact the Progress Sitefinity team use the support center. In our Google Plus group you can find more than one thousand Sitefinity developers discussing different topics. For the Stack Overflow threads don’t forget to use the “Sitefinity” tag.
2 posts, 0 answered
  1. Bruno Michels
    Bruno Michels avatar
    125 posts
    16 Apr 2010
    17 May 2010
    Link to this post
    Is it possible to use ConstrainProportions from RadEditor alone, if so how?

  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    12 Sep 2017
    17 May 2010
    Link to this post
    Hello Bruno Michels,

    Here is  a sample code that you could use to create  custom size widget

    <li id="imgWidthLiContainer">
                                       <asp:Label ID="Label6" runat="server" AssociatedControlID="Width" Text="Width "></asp:Label>
                                       <asp:TextBox runat="server" ID="Width" onkeyup="adjustProportions(,'imgHeightLiContainer','1');" CssClass="imgDimension"></asp:TextBox>
                                       <asp:RegularExpressionValidator ValidationGroup="editItem" runat="server" ValidationExpression="\d*" ControlToValidate="Width" Display="Dynamic" ID="regexV1" CssClass="validMessage" SetFocusOnError="True"><strong><asp:Literal ID="Literal22" runat="server" Text="ErrorWidth"></asp:Literal></strong></asp:RegularExpressionValidator>
                                   <li class="ConstrainProportions toggle">
                                       <button id="dialogControl_ImageProperties_ConstrainButton" onclick="setConstraint(this); return false; "> </button>
                                   <li id="imgHeightLiContainer">
                                       <asp:Label ID="Label10" runat="server" AssociatedControlID="Height" Text="Height"></asp:Label>
                                       <asp:TextBox runat="server" ID="Height" onkeyup="adjustProportions('imgWidthLiContainer',,'2');" CssClass="imgDimension"></asp:TextBox>
                                       <asp:RegularExpressionValidator ValidationGroup="editItem" runat="server" ValidationExpression="\d*" ControlToValidate="Height" Display="Dynamic" ID="RegularExpressionValidator1" CssClass="validMessage" SetFocusOnError="True"><strong><asp:Literal ID="Literal24" runat="server" Text="ErrorHeight"></asp:Literal></strong></asp:RegularExpressionValidator>
                               <script type="text/javascript">
                                   var w = document.getElementById("imgWidthLiContainer").getElementsByTagName("input")[0].value;
                                   var h = document.getElementById("imgHeightLiContainer").getElementsByTagName("input")[0].value;
                                   var constraintFlag = true;
                                   function adjustProportions(width, height, changedField) {
                                       if (constraintFlag == true) {
                                           if (changedField == '1') {
                                               var wV = document.getElementById(width).getElementsByTagName("input")[0].value;
                                               var hN = document.getElementById(height).getElementsByTagName("input")[0];
                                               hN.value = Math.round((h * wV) / w);
                                           } else if (changedField == '2') {
                                               var wN = document.getElementById(width).getElementsByTagName("input")[0];
                                               var hV = document.getElementById(height).getElementsByTagName("input")[0].value;
                                               wN.value = Math.round((w * hV) / h);
                                   function setConstraint(btn) {
                                       if (constraintFlag == true) {
                                           btn.parentNode.className = "ConstrainProportions";
                                           constraintFlag = false;
                                       } else {
                                           btn.parentNode.className += " toggle";
                                           constraintFlag = true;

    All the best,
    Ivan Dimitrov
    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.
2 posts, 0 answered