Repository navigation
[CSS] "width: 100%" seems to not work inside of Unity #89
Description
I'm seeing an issue in a pretty simple example where setting a % on the width in CSS on a view object doesn't seem to work. In this example, the 'gradient-rule' class should stretch but it doesn't in Unity. It does however, render fine in the browser previewer.
Expected Behavior: a red box is rendered
Actual Behavior: red box is width 0 and not rendered
index.tsx
import { render } from '@reactunity/renderer';
import './index.scss';
function App() {
return (<view className="black-bar">
<view className="content">
<h1 className="title">Title</h1>
<view className="gradient-rule"></view>
<p className="message">Message text</p>
</view>
</view>);
}
render(<App />);
index.scss
.black-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 250px;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
}
.content {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-align: left;
}
.gradient-rule {
height: 4px;
background-color: red;
// align-self: stretch /* Works */
width: 100%; /* Doesn't work */
// width: 250px; /* Works */
}
Activity
gkurt commentedon Mar 31, 2023
This seems to happen when the element has percentage width and its parent has
autowidth. I thought Yoga would handle this case, but apparently it does not. This requires multi-pass calculation so maybe they don't have it for performance reasons. I will open an issue in Yoga and try to fix this.feat(layout): ship the Yoga binaries built here, fixing `width: 100%`…