CODEWITHSUNDEEP
javascriptjquerygridster
Zarthus
Zarthus

Reputation: 466

How to determine the height and width of HTML user input and tell gridster to fit accordingly?

I'm currently using Gridster.js (http://gridster.net/) in combination with CKEditor.

Once the user saves their content with CKEditor, this content is put into the widget. However the widgets do not automatically resize themselves to fit the content, and while the user is able to resize it themselves, it would be more convienient for the userbase to have it be done for them the moment they press save.

I have tried a few things, but none to any avail. I'm having trouble getting the size of the current content, and then resizing the gridster respectively.

In my code, I have two values to work with. the gridster element (widget), and the value that will be put into it (contents). I have to determine the height of the contents. Once this is done successfully, I will be able to determine if my code for getting the x and y values work.

My current code looks like this:

// Initialization of the gridster element.
// The base dimensions are relevant to understand how we 
// calculate the multipliers, later on.
gridster = $(".gridster > ul").gridster({
    widget_margins: [10, 10],
    widget_base_dimensions: [100, 50],
    draggable: {
        handle: 'header'
    },
    resize: {
        enabled: true,
        max_size: [20, 10],
        min_size: [2, 1]
    }
}).data('gridster');

And (the relevant bits of) my JavaScript class that handles saving and resizing:

// Saves the content from CKEditor to the gridster widget
this.save = function (data) {
    var lastContents = this.default_html + data + '</div>';

    $(this.editor).removeClass('gs-w-new');
    this.resize_widget(this.editor, lastContents);
    $(this.editor).html(lastContents);
    this.modal.modal('hide');
};

/* @TODO: resize_widget function */
// if the new content from ckeditor is larger than the 
// original size of the widget, we need to make it larger.
this.resize_widget = function(widgetId, contents) {

    var element = $('<div>')
        .addClass('fake-div-gs-w-resize')
        /*
        .fake-div-gs-w-resize {
            position: absolute;
            display: none;
            height: auto;
            width: auto;
            white-space: nowrap;
        }
        */
        .css('display', 'block')
        .html(contents);

    var widget = $(widgetId);

    var elementWidth = $(element).width(), // I am expecting this to return the width of the content, but it returns 0.
        elementHeight = $(element).height(), // As you might imagine, this also returns 0.
        width = widget.width(),
        height = widget.height();

    $(element).css('display', 'none');

    console.log(widgetId, widget, width, height, elementWidth, elementHeight);

    // this code never gets past here, because element{Height,Width} returns 0.
    if (elementHeight > height || elementWidth > width) {

        var width_multiplier = 100, // data-x = 1 === width_multiplier px
            height_multiplier = 50; // from "widget_base_dimensions: [100, 50],"

        var x = Math.round(width / width_multiplier),
            y = Math.round(height / height_multiplier),
            eX = Math.ceil(elementWidth / width_multiplier),
            eY = Math.ceil(elementHeight / height_multiplier);

        console.log("setting to x:" + eX + ", y:" + eY + " with width:" + width + ", height:" + height);

        if (eX >= x && eY >= y)
            gridster.resize_widget(widget, eX, eY);
    }

};

Whilst I am not completely confident in my logic for determining the sizes; the main focus of this question is with determining the size of the HTML contents, as what I gathered from other SO posts did not seem to help in my case.

Upvotes: 1

Views: 1410

Answers (2)

Sid James
Sid James

Reputation: 529

I had the same challenge, i.e. dynamic content appearing inside the new tile caused an overflow and appeared outside the tile boundaries. We used the '.scrollHeight' of the tile contents in combination with Zartus' code:

var contentHeight = $widgit.firstChild.scrollHeight;
var tileHeight = $widgit.firstChild.clientHeight;

Upvotes: 0

brettwhiteman
brettwhiteman

Reputation: 4452

You need to actually add the element to the DOM for the width() and height() functions to work. In your example, the element is not added to the document.

See this JS Fiddle as an example https://jsfiddle.net/y1yf1zzp/10/

Upvotes: 1

Related Questions