RapidWeaver Elements 0.7.11 (23517)
See this screenshot.
This is a problem I had previously and it still needs fixing, I think.
When one brings a Container onto a page, why am I able to set the left Margin Spacing to a value but I can not set the right Margin Spacing to any value. If the left works, why not the right? In fact, setting the left causes the scroll bar at the bottom to appear???
Cheers.
do a margin search…this has been answered several times before.
the way I look at it is if you have a photo on your table and you want a margin round it then it gets bigger if you add spacing it gets smaller.
This going to happen depending on how the SIZE of the container is setup. So if it is set to a width of FULL, adding a LEFT margin will PUSH it over. Then if you add a RIGHT margin you will not see it because the container has been pushed over by the LEFT amount.
If you change the SIZE width to AUTO the container will shrink and now both margins will be set and visible.
This is happening because your Grid width is set to full — 100% of the viewport in this case — and margins are added to the outside of the component, so it seems like they’re not doing anything.
If you want to add spacing to either side of your Grid, you should first set the Width to auto, then apply padding (padding is added to the inside of the component).
Hope that helps 
1 Like
Thanks Ben.
But,…
My point is that when one sets a right Margin Spacing, NOTHING happens to the right hand margin on the screen. So why does it show a margin change when a left margin is set?
To repeat, if it won’t adjust the right Margin Spacing at all why DOES it adjust the left Margin Spacing? I am talking about how illogical this is.
As I see it, when a left margin spacing is set, nothing should happen on the screen just like setting a right margin spacing currently does nothing.
I fully understand how these things currently work in Elements, but what I am saying is, it is NOT logical and logic should be the very basis of every Mac program. That is what the Mac was all about from day one.
I have to say with my 76 years of life’s experience that logic has been thrown out the window in these latter days.
Totally understandable question — and you’re not alone in finding this confusing! The behaviour you’re seeing is actually down to how CSS handles margins, not Elements specifically.
When you set a margin-right, that margin is applied — but if there’s nothing to the right of the component (like in the above example), there’s simply nothing for the margin to push against, so it appears as if nothing is happening. It’s one of those quirks in CSS layout that can feel counterintuitive at first.
It’s great to hear you’ve figured out how things work in Elements — and I agree, Mac software should feel logical and consistent. We do our best to make Elements behave in a way that reflects how websites work under the hood. In this case, the “illogical” part is really just how CSS itself works.
That said, we’re always open to improving how Elements communicates these things or offers visual feedback, so please let us know if you have any more thoughts on this
perhaps this will explain it…I have a margin for the right but I cant see it cos theres no where to put it as the component is at the edge
hahahahah
1 Like
Ben, I really appreciate the full reply you gave me. But I am going to throw it back at you. You said and I quote: “When you set a margin-right, that margin is applied — but if there’s nothing to the right of the component …, there’s simply nothing for the margin to push against”
But doesn’t the exact same logic apply when one sets a left margin, there is also nothing for it to push against. So why does a left margin appear on the screen?
I don’t know anything about programming, but surely an IF statement which queries whether the Sizing has been set to other than Auto could be used to stop the left margin being produced. That way I would know that setting left and right Margin does not work and therefore I can deduce I have something else set incorrectly and not think that Elements has a bug, since putting a left margin in does cause the bottom scroll bar to appear.
@paulcruice if you share your project we can show you how to fix it!
David, simplicity is good but you miss my point all together.
Of course if CSS knows how to see a left edge of the page to place a margin but not the right then one can only wonder as to the logic of CSS.
Hopefully a simpler explanation…
Under normal circumstances, the left side (left margin) is fixed. You always see it. It is like a wall. When you set a left margin (when the size of the component is set to full), it pushes against the wall of the left side and moves the component toward the right. The right side of the page is ephemeral. If you reduce the size of the web browser window, the right side of the page changes, but the component still abuts against the right side. When you make the browser window larger, the right side of the page increases, and the component expands to the right. If you set right margin space, it is just out to the right, past the right side of the component, and you don’t see it. If you set the component you want margins around to a size LESS than the full screen width, then you will see the right margin. The right side only becomes a wall if the component you want to put margins around doesn’t go all the way to the right side of the screen.
1 Like
Dan, I know how to fix it. It is already done.
My concern is for the Elements program itself and the support you subsequently have to offer.
If a Spacing Margin can be set on the left but not the right and at the same time it makes the bottom scroll bar appear, this makes me think there is a bug. As I said above surely an IF statement which queries whether the Sizing has been set to other than Auto could be used to stop the left margin being produced. I hasten to add again, I do know nothing about programming.
Of course, if that is a limitation of CSS then the company is going to have to bear the support calls it gets on this issue and I’m trying to prevent that.
Steve, you wrote before I finished my last comment so didn’t see yours in time. Nevertheless, thanks. But can I ask, how does one then explain (for example, in the manual) what the setting of Sizing to Auto does which allows the Spacing Margin settings to see the right hand wall??
As I said to Dan above surely an IF statement which queries whether the Sizing has been set to other than Auto could be used to stop the left margin being produced.
I hasten to add again, I do know nothing about programming.
When the component is set to size of full, the right side is attached to the right side of the page, so any margin set on the right side is past the page end. . The left side is a wall, so the margin can push against that and moves the component to the right. (that is why you get the horizontal scroll bar). Auto changes the way that the component is placed on the screen, allowing you to see the margin on the right, and not extending the width of the visible page. (I probably have the details wrong, but either @dan or @ben can better explain what is actually happening under the hood).
Unfortunately, is just how CSS works. (Not always logical or straightforward).
See: https://htmlforpeople.com and / or Installing Tailwind CSS with Vite - Tailwind CSS which might provide better explanations. The first link is an HTML / CSS guide and the second are the Tailwind Docs
1 Like
Steve, I really appreciate your trying to get through to me. However, my question still stands:
How does one then explain to a user (for example, in the manual) what the setting of Sizing Width to Auto does which allows the Spacing Margin settings to see the right hand wall??
I ask this because the right wall is present and visible as far as the program is concerned when the Sizing Width setting is set to Auto.
Auto: Right side of page a moveable wall and right margin can push against it. Setting a right side margin will push against the wall moving component to left and you see margin on right. No matter how wide you make page, you will see right margin.
Full: Right side of component is glued to an invisible but porous wall. Right margin is on the other side of the wall (page border) and you won’t see it. Left margin will move component so right side of component is on other side of invisible wall, and you will see horizontal scroll bar. When you expand right side of page, the right side of the component is always past the right side of the page and you will always see the horizontal scrollbar
See also: CSS Margin
As Steve said, “Unfortunately, that’s just how CSS works.”. If we were building a page layout app, we’d be able to make up our own rules, but we’re not. We’re building a web design app based on CSS and Tailwind, we need to stick to the same terminology.
We’ll make sure to add an explanation to the manual about how margins work in CSS (and Elements).
Sorry it doesn’t work the way you want, but at least you now know and won’t be caught out again!
3 Likes
Is that your light bulb moment!!! its not an elements problem.
Start asking the CSS creators. I had same question when I started with elements and it was explained to me and how to fix it…THE END
1 Like
Thanks, Dan.
1 Like