How to express a layout with margins and max-width?

#1

I am having trouble expressing this layout in horizontal dimension for an element with computed layout:

“Left and right margin 20px, with max width of 480px”

So on smaller screens, it would have the margin and keep growing with the screen. On bigger screens, it would be centered with a max-width.

I can accomplish the desired result somewhat with “width 80%, max-width 480px”, but it’s not the same.

How do I express the margins+maxwidth layout in Subform?

#2

@jaanus I too experience what I believe you are describing.

Using the artboard as the containing element:

The artboard does not appear to respect margins set on a direct child layer when the artboard is narrower than the max-width set on the child layer.

However, if padding is set on the containing element, the behavior you desire can be achieved.

I'm tempting to file this as a bug, but I don't know enough about the layout engine and how the creators designed it to confirm or deny whether this was intentional.

#3

Hi @jaanus, if you are setting the width as 100%, then that percentage is calculated against (parent width - parent left padding - parent right padding). So this is where the artboard has a padding of 50 on all sides and the pink box has a width of 100%:

This is what @rmion is talking about.

Does that clarify things?

#4

Let me pipe in here and say that you can build this a different way:

  • Set the main axis under the parent's children layout to row:

  • Set the element's width to 1/ (or click the arrow button in the width field) and the max-width to 480px

  • Set the element's margin-left and margin-right to 20px

That result in this, which I think is your intended behavior @jaanus:

#5

Thanks. I understand both of these solutions, and both seem to work. The trouble I am having with both of them is that the element is not self-contained and that you need to manipulate the parent’s properties. For example, my parent actually has column axis layout for children, so I don’t like that solution #2 forces me to change it to row. This seems to go against the spirit of being able to make the element a self-contained reusable component.

#6

This is a good insight and exactly the kind of feedback we need.
Ryan and I are redesigning the layout engine semantics, so I'm going to make a note about your concern and see if we can address it with the new system.

Thanks for reflecting on your needs and telling us about 'em despite all of the other distracting broken trivial stuff in the app right now = )

#7

@kevin You mention throughout this forum that you are redesigning the layout engine semantics.

Is your goal to refactor what exists today so that this community's feedback can be more effective as you start to build an even better layout engine? Or is the work you're doing right now intended to be the layout engine that is available day 1 of Subform's eventual product launch?

I ask because your comments have led me to sit on some of my issues with the layout engine, at least until I know you and Ryan are comfortable with receiving feedback on an engine that you think (rightly or wrongly) will serve eventual Subform customers.

Ultimately, you and Ryan are likely to answer this and many other questions of mine if/when you start publishing 'plan' or 'roadmap' posts that detail your reasoning for existing behavior and specifically what aspects of Subform you want/expect feedback on as we continue to improve this software.

#8

I appreciate you guys putting out such an early version and giving the community an aspirational preview of what's to come. I've made tools myself and know there's lots of hard work between here and there, and different things are best addressed in different stages of the project (core vs trivial stuff). I do see lots of annoyances and opportunities for improvement in the product, but I realize this is an early alpha and the core concepts are more interesting to me at this early stage.

#9

Not sure if I totally understand your question.
We are rethinking the layout engine, and that will definitely be released to everyone here before any kind of broader public release.

Now is definitely the time for feedback on the layout engine --- both specific details/questions like the one that started this thread, as well as larger points like @jaanus's comment about wanting the elements to be "self-contained" in a sense.

Let me writeup my own thoughts and goals about why I want to rethink the layout engine, and that topic will be a good place to have this discussion.
(I'll edit this comment once that other topic is up.)

Re: roadmap, we are still thinking what to do on that.
We will have tactical stuff on the weekly updates (https://talk.subformapp.com/c/announcements) but are still thinking about what to do for larger stuff and/or a single topic that we keep up to date w/ all features.