Maximum width not respected #230

New Issue

2016-10-21T07:46:55-07:00

roxlu commented

2016-10-21 07:46:55 -07:00

(Migrated from github.com)

I'm using css-layout to layout a gui with this hierarchy: main > container > button. The main node is 1280x720 pix. The container gets a max-width of 400. When I set the flex direction of the container to column, then the max-width is taken into account and the button becomes 400 wide. When I set the flex direction of the container to row it seems like the max-width is ignored and the button becomes 1280 wide.

This is a print of the properties when using colum:

{layout: {width: 1280, height: 720, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 0, overflow: 'visible', children: [
  {layout: {width: 400, height: 14, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 0, overflow: 'visible', maxWidth: 400, maxHeight: 14, children: [
    {layout: {width: 400, height: 30, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 0.5, overflow: 'visible', marginBottom: 5, marginStart: nan, marginEnd: nan, minHeight: 30, },
  ]},
]}

These are the properties when using row. Not that the child gets a width of 1280:

{layout: {width: 1280, height: 720, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 0, overflow: 'visible', children: [
  {layout: {width: 400, height: 14, top: 0, left: 0}, flexDirection: 'row', alignItems: 'stretch', flex: 0, overflow: 'visible', maxWidth: 400, maxHeight: 14, children: [
    {layout: {width: 1280, height: 30, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 0.5, overflow: 'visible', marginBottom: 5, marginStart: nan, marginEnd: nan, minHeight: 30, },
  ]},
]},

Is this a bug or feature?

I'm using css-layout to layout a gui with this hierarchy: main > container > button. The `main` node is 1280x720 pix. The container gets a max-width of 400. When I set the flex direction of the container to `column`, then the max-width is taken into account and the button becomes 400 wide. When I set the flex direction of the container to `row` it seems like the max-width is ignored and the button becomes 1280 wide. This is a print of the properties when using `colum`: ``` {layout: {width: 1280, height: 720, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 0, overflow: 'visible', children: [ {layout: {width: 400, height: 14, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 0, overflow: 'visible', maxWidth: 400, maxHeight: 14, children: [ {layout: {width: 400, height: 30, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 0.5, overflow: 'visible', marginBottom: 5, marginStart: nan, marginEnd: nan, minHeight: 30, }, ]}, ]} ``` These are the properties when using `row`. Not that the child gets a width of 1280: ``` {layout: {width: 1280, height: 720, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 0, overflow: 'visible', children: [ {layout: {width: 400, height: 14, top: 0, left: 0}, flexDirection: 'row', alignItems: 'stretch', flex: 0, overflow: 'visible', maxWidth: 400, maxHeight: 14, children: [ {layout: {width: 1280, height: 30, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 0.5, overflow: 'visible', marginBottom: 5, marginStart: nan, marginEnd: nan, minHeight: 30, }, ]}, ]}, ``` Is this a bug or feature?

emilsjolander commented

2016-10-21 07:58:47 -07:00

(Migrated from github.com)

Can you please post a jsfiddle repro? We try to be consistent with the web so if this is working one way on the web and a different way in css-layout it is most likely a bug. Please use http://jsfiddle.net/y11txxv9/245/ as a base because it is set up with the same default values used in css-layout.

roxlu commented

2016-10-21 08:08:46 -07:00

(Migrated from github.com)

@emilsjolander I've created this: http://jsfiddle.net/roxlu/y11txxv9/246/

emilsjolander commented

2016-10-21 08:51:11 -07:00

(Migrated from github.com)

@roxlu thanks. I'll look into this

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#230