Search code examples
jquerycssjquery-uijquery-ui-resizable

Resizing Div width to fit to its child control

I am trying to apply jQuery resizable and draggable on my aspx page. Most of the things are in order except that the resizable handles are getting placed at different positions on the controls i.e

for a label(DynamicControlABC) it is getting shown at the center of the label whereas for the textbox(DynamicControlTextbox1) its getting shown approx 3px outside the se corner.

If I try to reposition the handle according to the textbox then the handle moves more towards the center of the Label and vice versa (I would have posted a screenshot but atleast 10 reputation points needed to post an image :( ). I viewed the page on both IE10 and Firefox and both yield the same result.

My Code is below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="Stylesheet" href="css_custom/jquery-ui.css" type="text/css" />
    <script src="js/jquery-1.11.0.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.10.4.js" type="text/javascript"></script>
    <script type="text/javascript">
 $(document).ready(function (e) {
            $("#btnEdit").click(function (e) {
                SetButtonText();
                ToggleEditMode();
            });

        function SetButtonText() {
            $('#btnEdit').val(function (i, text) {
                return text === "Edit" ? "Editing" : "Edit";
            });
        }

        function ToggleEditMode() {
            if ($("#btnEdit").val() != "Edit") {
                $("*").filter("[id^=DynamicControl]"), function () {
                    $(this).resizable().parent('.ui-wrapper').draggable({ opacity: .45, cancel: "null" });
                };
            }
            else {
                $("*").resizable({ cancel: "*" }).draggable({ cancel: "*" });
            }
        }
    </script>
</head>
<body>
    <form id="MyForm" runat="server">
    <asp:Label Text="ABCDEFGH" runat="server" ID="DynamicControlABC"></asp:Label>
    <asp:TextBox runat="server" ID="DynamicControlTextbox1" Text="Text1"></asp:TextBox>
    <input type="button" id="btnEdit" value="Edit" />
    </form>
</body>
</html>

Also I am new to asking questions here so please let me know if I am missing out something.

This is what I did in the jQuery-UI.js. The following code already existed

if(this.element[0].nodeName.match(/canvas|textarea|input|select|button|img/i)) {

        //Create a wrapper element and set the wrapper to the new current internal element
        this.element.wrap(
            $("<div class='ui-wrapper' style='overflow: hidden;'></div>").css({
                position: this.element.css("position"),
                width: this.element.outerWidth(),
                height: this.element.outerHeight() ,
                top: this.element.css("top") ,
                left: this.element.css("left")
            })
        );

and I added this for a label:-

 else if(this.element[0].nodeName.match(/label|span|div/i)) {

        this.element.wrap(
            $("<div class='ui-wrapper' style='overflow: hidden;'></div>").css({
                position: this.element.css("position"),
                width: this.element.outerWidth() + 7,
                height: this.element.outerHeight() + 3,
                top: this.element.css("top") ,
                left: this.element.css("left") 
            })
        );

Now the handles are coming up fine on the labels.

Solution

  • the reason the resizable handles are getting placed weirdly is I think you're using the universal selector ("*") so it targets anything, its not that bad to use this selector but if your building an app its quite expensive to use this on filtering the DOM

    Here take a look what i did, on your code

    there was some minor refactoring and removing ( you can put back your method whatever you like)

    im not sure why your using cancel instead of draggable disable (let me know if this is intended)

    $(document).ready(function (e) {

       $("#btnEdit").click(function () {  
             resizableMode();
       });


        function resizableMode() {

            //cache selectors
            var $elem = $('[id^=DynamicControl]'); 
            var $editBtn = $("#btnEdit");

            //toggleText button
            $editBtn.val(function (i, text) {
                return text === "Edit" ? "Editing" : "Edit";
            }); 

            //set resizable to textbox
            $elem.resizable(); 

            //set states
            if ($editBtn.val() !== "Edit") {
                 $elem.resizable('enable')
                      .parent('.ui-wrapper').draggable({ opacity: 0.45 , disabled:false }); 
            } else { 
                $elem.resizable('disable')
                     .parent('.ui-wrapper').draggable({ disabled: true });
            }
        }

});

    see output

    http://jsbin.com/sowah/1 (there is slight css changes)

    you can edit it here http://jsbin.com/sowah/1/edit