make widget auto-size height to fit content (no vertical scrollbar)

I want height as per inner container, i do not want any scroll bar and i want to put image inside grid-stack-item-content and i want grid-stack-item height same as image Height,

i have tried but i do not get result, can please let me know it;s possible

The same issue here, HELP NEEDED!
Set the height of each grid based on their inner contents!

have been pulling my hair for the last 2 days, any reply would be highly appreciated!

I believe that what you're asking about can be done with CSS and DOM manipulation. If either of you could provide a jsFiddle, I'd be happy to help achieve the desired outcome.

Hi Radiolips

here have more info
i have drag and drop element, every drag have his one html contain inside

please see this url
http://webiberis.com/project/gridstack/demo/

there have 2 div (drag me element ) in this div have image, when i will drag and drop in gridstak element then it's show image inside gridstack container, but in gridstack container have scroll bar and have fixed height

there i need full height same as image height without scrolling.

and there i want height as per image height without spacing and scroll bar

@radiolips

Hi & thanks for your reply @radiolips,
@ashokprajapati has already provided an example, but here is a jsfiddle example for you:
https://jsfiddle.net/web2fix/3psxL32L/

Please note the section called MIDDLE and sidebars which have scrollbars,
I would like to have the scrollbar removed and update the height of each container (or grid) as much as their inner contents go!

That would be really nice if I could have that on initialization.
I have taken a look at the source and I saw that there is an "auto" option for cellHeight so it would be nice to be able to pass a variable like "dynamic" which could read the $(content's).scrollHeight for each grid and set it as cellHeight for that (each) grid.

isAutoCellHeight = this.opts.cellHeight === 'auto'; isDynamicCellHeight = this.opts.cellHeight === 'dynamic'; if (isAutoCellHeight) { self.cellHeight(self.cellWidth(), true); } else if (isDynamicCellHeight) { // then get the height of each inner container and calculate it as a grid height or in this case cellHeight } else { this.cellHeight(this.opts.cellHeight, true); } ;

@radiolips

I tried to fix this issue temporarily but something is not right with the cellHeight
I set the cellHeight to be 1 pixell then calculated the inner height and passed to the divs as data-gs-height="calculated inner height"

then this happened: the columns are now extremely long! even some of them do not have any contents.
some columns are supposed to have just 100px height but they are going insanely longer than 100px
extremely in need of your help @radiolips!
example after the dirty fix which brings up the cellHeight bug: jsfiddle

Help still needed! I am still pulling my hair! has been a week. Let me know if this can not be done with grid stack. Just saying that "It can be done with CSS and DOM manipulation" will not solve our issue!

i also want answer for this question.

@radiolips

I believe this is one of the most important features that should be included! I have the same issue working around is not as easy as @radiolips says!
I have been working around for days and no results! css manipulation does not work and javascript height recalculation after initialization also slows down the loading time!
The only one way to fix this is on initialization through the plugin itself.
if you think otherwise then prove it @radiolips!

@radiolips

Is there a solution to this yet? @radiolips @webdesignmzm

Also looking for a solution to this, any updates?

I am looking for solution as well.

@webdesignmzm

Apologies for the delay.

Firstly, @webdesignmzm and @somchaisomsi, I'd like to point out that this library, and the support everyone receives, is entirely free of charge. Please be more considerate to the contributors who are spending their own time to provide a better dashboard experience for all users.

I am closing this ticket. Before closing it, I will say (note that I am now now, nor have I anywhere on this ticket, said the word "easy") that this can be done using Javascript and CSS. This Stack Overflow article (http://stackoverflow.com/questions/2522579/how-do-i-get-the-real-height-of-a-overflow-hidden-or-overflow-scroll-div) explains how to grab the height of a div with a scrollbar. If you put this code into a setTimeout or if you run it onchange from gridstack, you'll have widgets that have height that auto-update based on content. Width may be adjusted the same way. I have built this code based on @ashokprajapati 's link.

$('.grid-stack').data('gridstack').resize(
    $('.grid-stack-item')[5],
    $($('.grid-stack-item')[5]).attr('data-gs-width'),
    Math.ceil(($('.grid-stack-item-content')[5].scrollHeight + $('.grid-stack').data('gridstack').opts.verticalMargin) / ($('.grid-stack').data('gridstack').cellHeight() + $('.grid-stack').data('gridstack').opts.verticalMargin))
);

This code simply calls resize on a widget, doesn't change its width, and updates its height to be the correct math to determine height (this assumes verticalMargin is in pixels).

auto-size height to fit content

auto-size content batch mode

fixed in the next release v9! even though items have height=1 to start with they are sized to content and reflow as needed...

long overdue feature - don't forget to donate to help support this lib!

20230807_093423.mp4

@adumesny

@adumesny is this feature already available to use in production? i just updated to 8.4.0 right now but still cant see the fitToContent option

as I mentioned it will be in v9 - still need to consume it in my app and test it some more...

more fix gridstack#404

sizeToContent number support

more resizeToContent fixes

tweaks to resizeToContent()

works for nested grid too!

20230910_120205.1.mp4

Navigation Menu

Repository navigation

make widget auto-size height to fit content (no vertical scrollbar) #404

17 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

make widget auto-size height to fit content (no vertical scrollbar) #404

Description

Activity

somchaisomsi commented on Mar 28, 2016

radiolips commented on Mar 28, 2016

ashokprajapati commented on Mar 28, 2016

ashokprajapati commented on Mar 28, 2016

somchaisomsi commented on Mar 28, 2016

somchaisomsi commented on Mar 28, 2016

somchaisomsi commented on Apr 1, 2016

ashokprajapati commented on Apr 1, 2016

webdesignmzm commented on Apr 10, 2016

fredagsfys commented on Jun 14, 2016

MarkH170 commented on Jun 29, 2016

preetsin commented on Jun 30, 2016

radiolips commented on Aug 17, 2016

17 remaining items

adumesny commented on Aug 7, 2023

PGabriel20 commented on Aug 10, 2023

adumesny commented on Aug 10, 2023

adumesny commented on Sep 11, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions