Code Monkey home page Code Monkey logo

Comments (18)

supermueller avatar supermueller commented on September 23, 2024

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.

KlausSchaefers avatar KlausSchaefers commented on September 23, 2024

from figma-low-code.

supermueller avatar supermueller commented on September 23, 2024

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.

KlausSchaefers avatar KlausSchaefers commented on September 23, 2024

Luisa-cloud (5)
Hi,

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.

KlausSchaefers avatar KlausSchaefers commented on September 23, 2024

Also can you update to 1.0.20?

npm install [email protected]

from figma-low-code.

KlausSchaefers avatar KlausSchaefers commented on September 23, 2024

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.

supermueller avatar supermueller commented on September 23, 2024

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.

KlausSchaefers avatar KlausSchaefers commented on September 23, 2024

Can you share another example? In the one you shared the width is correct by the padding

  width: 896px;

from figma-low-code.

supermueller avatar supermueller commented on September 23, 2024

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.

KlausSchaefers avatar KlausSchaefers commented on September 23, 2024

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.

KlausSchaefers avatar KlausSchaefers commented on September 23, 2024

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.

KlausSchaefers avatar KlausSchaefers commented on September 23, 2024

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.

supermueller avatar supermueller commented on September 23, 2024

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.

KlausSchaefers avatar KlausSchaefers commented on September 23, 2024

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.

KlausSchaefers avatar KlausSchaefers commented on September 23, 2024

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!

Figma-Low-Code-Box-Model-Bug-–-Figma

from figma-low-code.

KlausSchaefers avatar KlausSchaefers commented on September 23, 2024

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.

KlausSchaefers avatar KlausSchaefers commented on September 23, 2024

Hi,

could you try out 1.0.24? I think I found the bug...

from figma-low-code.

supermueller avatar supermueller commented on September 23, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.