Comments (18)
Just found out, that my suggested solution have an impact of the input fields – so the CSS selector have to be more complex. I will update this soon.
from figma-low-code.
from figma-low-code.
The attached Figma file do have an auto-layout with a fixed padding on both sides and will be rendered in the browser with a width larger than 100%.
figma-low-code Box-Sizing bug.fig.zip
Rendered HTML-Code:
<style>
.qux-screen.metaHeaderWrapper {
min-height: 40px;
display: flex;
flex-direction: column;
background-color: transparent;
height:40px;
width:1024px;
border: 0px solid transparent;
}
.metaHeaderWrapper .metaHeader {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border: 0px solid transparent;
background-color: rgba(254, 211, 133, 1);
width: 896px;
margin-left: auto;
margin-right: auto;
min-height: 40px;
margin-top: 0px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 457px;
padding-left: 64px;
padding-right: 64px;
padding-top: 0px;
padding-bottom: 0px;
}
.metaHeaderWrapper .Benefits {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border: 0px solid transparent;
background-color: rgba(0, 0, 0, 0);
height: 24px;
width: 322px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 32px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
.metaHeaderWrapper .Subtitle_2 {
height: 24px;
width: 143px;
color: rgba(7, 65, 82, 1);
text-align: justified;
font-family: Roboto;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
border: 0px solid transparent;
background-color: transparent;
}
.metaHeaderWrapper .Subtitle_2 .qux-rich-text-child-0 {
font-family: CircularXX;
font-weight: 400;
}
.metaHeaderWrapper .Subtitle_2 .qux-rich-text-child-1 {
font-family: CircularXX;
font-weight: 700;
}
.metaHeaderWrapper .Subtitle_3 {
color: rgba(7, 65, 82, 1);
text-align: justified;
font-family: CircularXX;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
border: 0px solid transparent;
background-color: transparent;
height: 24px;
width: 147px;
}
.metaHeaderWrapper .Contact {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border: 0px solid transparent;
background-color: rgba(0, 0, 0, 0);
height: 26px;
width: 139px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 9px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
.metaHeaderWrapper .Subtitle {
height: 24px;
width: 104px;
color: rgba(7, 65, 82, 1);
text-align: justified;
font-family: Roboto;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
border: 0px solid transparent;
background-color: transparent;
}
.metaHeaderWrapper .Subtitle .qux-rich-text-child-0 {
font-family: CircularXX;
font-weight: 400;
}
.metaHeaderWrapper .Subtitle .qux-rich-text-child-1 {
font-family: CircularXX;
font-weight: 700;
}
.metaHeaderWrapper .Icon {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border: 0px solid transparent;
border-radius: 100px;
background-color: rgba(7, 65, 82, 1);
height: 26px;
width: 26px;
display: flex;
flex-direction: column;
}
.metaHeaderWrapper .Vector {
width: 14px;
margin-left: auto;
margin-right: auto;
height: 14px;
margin-top: 6px;
height:14px;
width:14px;
background-image: url(https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/40fa/51e1/6e5406ef2455bdc806bb754066f5d1a9);
}
</style>
<div class="qux-container qux-element metaHeader">
<div class="qux-container qux-element Benefits"><label class="qux-rich-text qux-element qux-valign-top Subtitle_23"><span class="qux-common-label"><span class="qux-rich-text-child-0">Pflege </span><span class="qux-rich-text-child-1">TÜV zertifiziert</span></span></label><label class="qux-label qux-element qux-valign-top Subtitle_24"><span class="qux-common-label">
98% Zufriedenheitsrate
</span> <!----></label>
<!---->
</div>
<div class="qux-container qux-element Contact"><label class="qux-rich-text qux-element qux-valign-top Subtitle"><span class="qux-common-label"><span class="qux-rich-text-child-0">Hotline </span><span class="qux-rich-text-child-1">0123456</span></span></label>
<div class="qux-container qux-element Icon">
<div class="qux-vector qux-element Vector"></div>
<!---->
</div>
<!---->
</div>
<!---->
</div>
from figma-low-code.
I think the issue is related to the fact that I do not support Auto layouts at screen level (so frame on the canvas). If you wrap the Header with a frame, does the code look ok for you?
I get the following code
.wrapper .metaHeader {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border: 0px solid transparent;
background-color: rgba(254, 211, 133, 1);
width: 896px;
margin-left: 0px;
min-height: 40px;
margin-top: 0px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 457px;
padding-left: 64px;
padding-right: 64px;
padding-top: 0px;
padding-bottom: 0px;
}
So the width is set to 896, which is plus 2 * 64 = 1024. So this seems to be right. I found two issues in the Figma model. The header was pinned left and wright. In such a case, I will try to make it responsive and do not go for a fixed width.
In your example, which part did you think was wrong?
from figma-low-code.
Also can you update to 1.0.20?
npm install [email protected]
from figma-low-code.
Hi, I added auto layout support for root dartboard (= screens) as well. Please note that screens will be always full with.
npm install [email protected]
from figma-low-code.
Hi, adding auto layout support for the screens is great, because if you’re adding content dynamically the screen height have to change dynamically – but the update didn’t fix the wrong width of the meta header, because the box-model is still set to content-box. Also the fixed value for the gap pushes the right Contact element „out of the box“.
Overriding the styles as following fixes the problem:
.metaHeader {
box-sizing: border-box;
gap: 0 !important;
}
from figma-low-code.
Can you share another example? In the one you shared the width is correct by the padding
width: 896px;
from figma-low-code.
I have set up a clean project with the simplest structure possible and can’t reconstruct the issue.
But nonetheless I ask me, if it is necessary to calculate the width and the gap or if we can always set the width to 100% if the element is a part of an auto-layout and it’s width is set to „fill container“.
I think we can also remove the gap-property, if the flex-container has justify-content: space-between
.
from figma-low-code.
That is a tricky one... The Figma auto layout is basically flex box. So the conversion is 1:1m therefore I also include the gap if it is specified in the Figma model. I saw also some examples where the gap makes sense, and justify-content might not be the right way to render it. For instance for longer lists etc. There I would assume users would expect the pixel perfect gap... I have to look into this a little more.
from figma-low-code.
Hi,
you are right. If the item spacing is 'Auto' I should not add the gap. I fixed this in version 1.0.22 which is online. The css looks now like
.wrapper .metaHeader {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border: 0px solid transparent;
background-color: rgba(254, 211, 133, 1);
width: 896px;
margin-left: 0px;
min-height: 40px;
margin-top: 0px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding-left: 64px;
padding-right: 64px;
padding-top: 0px;
padding-bottom: 0px;
}
from figma-low-code.
With regards to 'fill-container'. In my tests, it will set the flex grow to 1 and I do not set the width.
.Desktop-1 .ChildGrow {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border: 0px solid transparent;
background-color: rgba(174, 186, 209, 1);
height: 261px;
flex-grow: 1;
}
Luisa-cloud.mp4
Maybe my test is too simple. If you have a buggy example, please share.
from figma-low-code.
I can confirm that the gap attribute is now gone.
Regarding to the issue with fill-container
: The responsiveness only works when the screen (aka the top level frame) has not an auto-layout. Wrapping the nested auto-layout element (the navigation bar) into a container without auto-layout did not help.
I have attached a Figma test file – maybe that helps you the understand my thoughts.
Figma Low Code Box-Model Bug.fig.zip
from figma-low-code.
Hi,
thanks for the example. Just to be clear, you would expect that in the second screen 'Auto-Layout', the navigation bars would be responsive and always span the full width? Like the top bar in the video?
Auto_Fixed.mp4
from figma-low-code.
I noticed that the nav-bars in the second screen are set to fixed width. In this case the current behavior is in my opinion correct (fixed == not responsive). However, If I set the element to 'fill-container', I would expect the behavior show in the video. This is not happening. I will have to check. Thanks again for you efforts!
from figma-low-code.
There is something strange with the Figma files, when the root elements are ago layout. Somehow the constraints of the children are different than usual. I have to explore that in more details...
from figma-low-code.
Hi,
could you try out 1.0.24? I think I found the bug...
from figma-low-code.
I have just tested version 1.0.24 and the bug is gone and my example now works as expected (after fixing the wrong resizing behavior you mentioned in your comment above).
Thanks for taking care of this!
from figma-low-code.
Related Issues (20)
- Text elements containing only numbers are always rendered top left HOT 5
- Only component instances seem to be generated properly. Master Component is brought in as "background-image" HOT 4
- [Feature] Refer to component by ID instead whole file by ID HOT 15
- api.figma -> rate limit exceeded HOT 8
- open plugins error HOT 3
- Not supported widget type: Custom HOT 1
- Is there way how to deal with interactive things? HOT 2
- [Feature] Respect letter case text style HOT 3
- Vue-router 'history' mode not working HOT 26
- Vue 3 support? HOT 4
- Open source the figma plugin HOT 3
- Screen has fixed width HOT 6
- Some issues reported
- TypeError: Cannot read properties of undefined (reading 'min') HOT 14
- Unable to select specific Pages from Figma file HOT 1
- Absolute positioning is not working accordingly expectation HOT 7
- Add documentation how to setup for running vue project HOT 1
- How to setup Figma low code in a running vue project HOT 1
- Figma plugin does not work with certain Figma projects HOT 13
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 figma-low-code.