Comments (5)
ohhhhhhh I got the issue. "100%" in html is so crap π.
I'm going to fix in both Tailwind and HTML, thanks!
from figmatocode.
That's an excellent question. I don't know. I converted from Tailwind and Tailwind uses 100%, and it seems to work. Maybe the bug is somewhere else? I'll investigate.
Do you prefer flex: 1 or nothing, just the number, like width: 42px?
from figmatocode.
Sorry. I didn't explain the problem well.
https://www.figma.com/file/EyQ0Dck1wzPfg0thNeBnAM/Untitled?node-id=1%3A2
Yellow box: auto layout enabled (-> direction), fixed width, fixed height
Blue box: fill container width, fixed height
Green box: fill container width, fixed height
Red box: fixed width(240px), fixed height
FigmaToCode plugin output:
<div style="padding: 20px; width: 843px; background-color: rgba(246.50, 239.56, 72.92, 1); display: inline-flex; flex-direction: row; align-items: flex-start; justify-content: flex-start;">
<div style="width: 100%; height: 292px; background-color: rgba(91.89, 88.83, 242.25, 1);"></div>
<div style="width: 10px;"></div>
<div style="width: 240px; height: 292px; background-color: rgba(242.25, 88.83, 98.03, 1);"></div>
<div style="width: 10px;"></div>
<div style="width: 100%; height: 292px; background-color: rgba(88.83, 242.25, 122.58, 1);"></div></div>
Red box's width is 103.28px not 240px
Then correct width: 100%;
with flex: 1
<div style="padding: 20px; width: 843px; background-color: rgba(246.50, 239.56, 72.92, 1); display: inline-flex; flex-direction: row; align-items: flex-start; justify-content: flex-start;">
<div style="flex: 1; height: 292px; background-color: rgba(91.89, 88.83, 242.25, 1);"></div>
<div style="width: 10px;"></div>
<div style="width: 240px; height: 292px; background-color: rgba(242.25, 88.83, 98.03, 1);"></div>
<div style="width: 10px;"></div>
<div style="flex: 1; height: 292px; background-color: rgba(88.83, 242.25, 122.58, 1);"></div></div>
The widths of red, blue, green box are just the same as in figma.
from figmatocode.
Updated version is now up!
from figmatocode.
That's fastπ
from figmatocode.
Related Issues (20)
- [SwiftUI] its not converting component correctly in SwiftUI. HOT 1
- [Tailwind CSS] Enable color exact values for standard tailwind colors via tailwind css config export. HOT 10
- Collect superscript and subscript texts from figma HOT 2
- Use variable names as-is, in Tailwind code. HOT 1
- π Make FigmaToCode even better by combining two approaches: designToCode and LowCode
- Tailwind classes are out of order HOT 2
- Find a better way to preview Tailwind HOT 22
- Better Responsive Preview HOT 3
- [Feature request] Disable irrelevant UI options HOT 3
- [Improvement] Support Tailwind arbitrary borders HOT 5
- [Proposal] Move to Standard coding style + away from function expressions HOT 3
- [Proposal] AST approach for HTML, Tailwind, BEM, etc
- can you support flex-wrap and hug content( without fixed width and height) HOT 20
- Support font family in Tailwind HOT 1
- The style of alll the HTML elements is position: absolute HOT 7
- I can't find this great plugin in Figma VSCode extension HOT 3
- [Flutter] Unnecessary Rows and Column widgets are being generated by plugin HOT 3
- [Feature Request] Properties on exported code HOT 2
- missing identifier Stack HOT 6
- Making the plugin standalone HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from figmatocode.