has a default layout of "block". This means that I can't get horizontal layout of subelements using e.g., inline-block. The internal layout doesn't matter since it's inside the wrapping div.
Switching all creation of "div" to "span" in EzComponent appears to be sufficient and not break anything.
What has a default layout of block? The only thing that defaults to block is if you use the visibility binder. You can always use a BindStyle and set it to what you want. Otherwise, nothing should default to block except the dialog box (which should).
Sorry, that wasn't communicated well. Let me try again:
Let's say I have a container (Component) that has two elements (Component). I want the elements laid out horizontally. Normally I'd do something like the following:
A
B
I can't get this in to work in webez because the inner elements are wrapped in div's created by addComponent. Something like this:
# shadow-root
A
...
Now, because there are intervening divs (which have block layout) things are vertical, not horizontal.
If the wrapping divs were instead spans things would work out how I want.
Set position:relative and display on #container, and set it to 100% width/height. That should work. If you want no spacing, or easy centering set display:flex.
If you don’t want the spacing, set container’s display to flex.
From: James Clause @.>
Sent: Tuesday, April 2, 2024 12:36 PM
To: gsilber/WebEZ @.>
Cc: Greg Silber @.>; Comment @.>
Subject: Re: [gsilber/WebEZ] Use 'span' instead of 'div' for EZComponent generated HTML (Issue #8)
Sorry, that wasn't communicated well. Let me try again:
Let's say I have a container (Component) that has two elements (Component). I want the elements laid out horizontally. Normally I'd do something like the following:
A
B
I can't get this in to work in webez because the inner elements are wrapped in div's created by addComponent. Something like this:
shadow-root
A
...
Now, because there are intervening divs (which have block layout) things are vertical, not horizontal.
If the wrapping divs were instead spans things would work out how I want.
What has a default layout of block? The only thing that defaults to block is if you use the visibility binder. You can always use a BindStyle and set it to what you want. Otherwise, nothing should default to block except the dialog box (which should).
Sorry, that wasn't communicated well. Let me try again:
Let's say I have a container (Component) that has two elements (Component). I want the elements laid out horizontally. Normally I'd do something like the following:
I can't get this in to work in webez because the inner elements are wrapped in div's created by addComponent. Something like this:
Now, because there are intervening divs (which have block layout) things are vertical, not horizontal.
If the wrapping divs were instead spans things would work out how I want.
Set position:relative and display on #container, and set it to 100% width/height. That should work. If you want no spacing, or easy centering set display:flex.
Like this:
If you don’t want the spacing, set container’s display to flex.
From: James Clause @.> Sent: Tuesday, April 2, 2024 12:36 PM To: gsilber/WebEZ @.> Cc: Greg Silber @.>; Comment @.> Subject: Re: [gsilber/WebEZ] Use 'span' instead of 'div' for EZComponent generated HTML (Issue #8)
Sorry, that wasn't communicated well. Let me try again:
Let's say I have a container (Component) that has two elements (Component). I want the elements laid out horizontally. Normally I'd do something like the following:
A
B
I can't get this in to work in webez because the inner elements are wrapped in div's created by addComponent. Something like this:
shadow-root
A
...
Now, because there are intervening divs (which have block layout) things are vertical, not horizontal.
If the wrapping divs were instead spans things would work out how I want.
— Reply to this email directly, view it on GitHub https://github.com/gsilber/WebEZ/issues/8#issuecomment-2032536065 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AHVF3ICEM3VOFSRADEC3FJLY3LM5JAVCNFSM6AAAAABFTWQ6DGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMZSGUZTMMBWGU . You are receiving this because you commented. https://github.com/notifications/beacon/AHVF3IAG2ODUOISH34DGWULY3LM5JA5CNFSM6AAAAABFTWQ6DGWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTTZEYFAC.gif Message ID: @. @.> >
Ah, I see. Well if not dynamic, you could put them in divs of the parent and arrange those. I'll have to think about how to do it dynamically.
what about setting the content div to display:flex? I believe that might work. Don't forget the flex-direction: row.