Set dynamic width of a div based on parent container width?

Ask us anything How do I?
1

I have a datagrid inside of a div.
The div is inside an expanded layout container.

How can I dynamically set the width of the div to resize along with the parent (expanded layout) container?

Currently, if the div is set to auto width, it is inifintely extended off of the page.

image
image2256Ă—677 66.8 KB

2

You might want to look into how the parent is set up. As it might influence how the child behaves.

3

That was my initial thought. But after tinkering for a while, I think the best solution would be to bind the max width of the child based on the viewport width. Is there anyway to do this in weweb or with custom code?

4

I don’t think it’s a great idea (not a best practice), but if you want to go that way, then you can do it like this. Bind Plug on Max-Width → String “50vw”

Screenshot 2023-09-05 at 10.24.12
Screenshot 2023-09-05 at 10.24.121920Ă—1247 117 KB

5

For others, I found a workaround but it’s not perfect.

  • I created a global JS formula called “Return viewport width” with the formula → return window.innerWidth;
  • Then I did a bind on the max width of the element (a div in my case) with the “Return viewport width” formula. I subtracted padding (72px in my example) to determine the final width of the element.
    image

The recommended solution is to rebuild the datagrid using a table. This should give you more control over the sizing, functionality, etc. I will test this route.

6

I think you’re overcomplicating it a little bit. You might want to spend some time and look into the settings, might find out the root of the problem. I’ve never had such problems with datagrids :slight_smile:

1 Like
7

Btw. you can get the same effect of a table with divs set to percentages of the parent. We did it like this on a project and it’s almost the same. If you see the underlining theory, css tables are just more strict divs with some fancy properties.

1 Like
8

I understand your point and I’ve solved it when the table or datagrid is NOT in an expanded layout (accordion). Any idea how to do this when INSIDE an expanded layout (accordion)?

Horizontal scroll working when outside expanded layout

image
image1732Ă—245 22.1 KB

No horizontal scroll inside expanded layout

image
image1737Ă—212 20.4 KB

It’s possible that I don’t have the correct settings but I am pretty sure I’ve tried every combination of width and scroll constraints.

9

Solved it! I had 1 setting in a parent of a parent that was affecting all children. Thanks for all the responses and help in figuring this out.

1 Like
10

Make sure to let us know an exact solutions so other can find it if they have a similar problem

1 Like
11

Set the expanded layout to a width of 100%.
Set the child within the expanded layout (like a datagrid) to a max-width of 100%.
Set the datagrid to scroll.