Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FlexboxLayout flex shrink factor is not multiplied by the flex base size #2980

Closed
PanayotCankov opened this issue Oct 28, 2016 · 3 comments
Closed

FlexboxLayout flex shrink factor is not multiplied by the flex base size #2980

PanayotCankov opened this issue Oct 28, 2016 · 3 comments
Assignees
@PanayotCankov
Labels
bug
Milestone
2.5.0

Comments

@PanayotCankov
Copy link
Contributor

PanayotCankov commented Oct 28, 2016 •
edited

During testing we found out the upcoming release of FlexboxLayout will have a little bit off behavior when shrinking items.

Using the following HTML example, when the browser is resized, the items will shrink distributing the negative extra space proportionally to their size. Making the small items visible even when the container size is really small.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  display: flex;
  border: 1px solid red;
}
p {
  border: 1px solid black;
  overflow: hidden;
}
</style>
</head>
<body>

<div>
  <p>row</p>
  <p>rowwreverse</p>
  <p>column</p>
  <p>columnwreverse</p>

  <p>row</p>
  <p>rowwreverse</p>
  <p>column</p>
  <p>columnwreverse</p>
</div>

</body>
</html>

While in {N}, the flex-shrink (default 1) doesn't seem to be multiplied by the content size when accountent for a flex-shrink-factor:

<Page>
    <ScrollView orientation="horizontal">
    <!-- Experiment with the width here. The "row" item below will completely disappear while "columnwreverse" will stay quite large -->
    <FlexboxLayout width="400" horizontalAlignment="left" borderWidth="1" borderColor="black">
        <Label text="row" borderWidth="1" borderColor="black" />
        <Label text="rowwreverse" borderWidth="1" borderColor="black" />
        <Label text="column" borderWidth="1" borderColor="black" />
        <Label text="columnwreverse" borderWidth="1" borderColor="black" />
        <Label text="row" borderWidth="1" borderColor="black" />
        <Label text="rowwreverse" borderWidth="1" borderColor="black" />
        <Label text="column" borderWidth="1" borderColor="black" />
        <Label text="columnwreverse" borderWidth="1" borderColor="black" />
    </FlexboxLayout>
    </ScrollView>
</Page>

Read: https://www.w3.org/TR/css-flexbox-1/#flex-base-size:

Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.

This doesn't seem to be applied in our case.
@PanayotCankov
Copy link
Contributor Author

PanayotCankov commented Oct 28, 2016 •
edited

Distributing negative extra space in a row sometimes affects the last item in a row, decreasing its size by 1, just enough to force text component to show ellipsis, even when it is with flex-shrink=0:

<Page>
    <!-- Experiment with the width here: -->
    <FlexboxLayout width="120" horizontalAlignment="center" verticalAlignment="center" borderWidth="1" borderColor="black">
        <Label flexShrink="1" text="rowwreverse" borderWidth="1" borderColor="black" />
        <Label flexShrink="1" text="column" borderWidth="1" borderColor="black" />
        <!-- Shows almost as large as it should be to show 'row' but gets off by 1 pixel just enough to display 'r...' -->
        <Label flexShrink="0" text="row" borderWidth="1" borderColor="black" />
    </FlexboxLayout>
</Page>

@PanayotCankov PanayotCankov self-assigned this Nov 2, 2016
@PanayotCankov PanayotCankov modified the milestones: 2.4.0, 2.5.0 Nov 2, 2016
@vchimev
Copy link
Contributor

vchimev commented Nov 8, 2016

The previous comment by @PanayotCankov will be addressed in 2.4.0.
The following snippet will work as expected:

<Page>
    <!-- Experiment with the width here: -->
    <FlexboxLayout width="120" horizontalAlignment="center" verticalAlignment="center" borderWidth="1" borderColor="black">
        <Label flexShrink="1" text="rowwreverse" borderWidth="1" borderColor="black" />
        <Label flexShrink="1" text="column" borderWidth="1" borderColor="black" />
        <Label flexShrink="0" text="row" borderWidth="1" borderColor="black" />
    </FlexboxLayout>
</Page>

@PanayotCankov PanayotCankov changed the title FlexboxLayout discrepancies FlexboxLayout flex shrink factor is not multiplied by the flex base size Nov 16, 2016
@lock
Copy link

lock bot commented Aug 29, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot locked and limited conversation to collaborators Aug 29, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@PanayotCankov PanayotCankov

Labels
bug
Projects
None yet
Milestone
2.5.0
Development

No branches or pull requests
2 participants
@PanayotCankov @vchimev