# Excessive Whitespace Around Components

**URL:** <https://forums.realmacsoftware.com/t/excessive-whitespace-around-components/44009>\
**Category:** RapidWeaver Elements\
**Created:** [July 31, 2024, 2:02am UTC](https://forums.realmacsoftware.com/t/excessive-whitespace-around-components/44009 "2024-07-31T02:02:03Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 31, 2024, 2:02am UTC](https://forums.realmacsoftware.com/t/excessive-whitespace-around-components/44009/1 "2024-07-31T02:02:03Z")

</div>

I’m finding that there appears to be a lot of whitespace around elements that I have no control over. Is there somewhere that this is being specified so I can tighten things up?

The first place I notice this is with the navbar. By default, it is really tall, and I cannot find any way to reduce the height I can find.

The same applies to an SVG that I placed within a Flex Item. The Flex Item ends up being square even though the SVG is a narrow rectangle. With the Flex Item, I partially fixed the problem by using the translate settings, which remove the excess whitespace below the SVG but add more above. I’m assuming this is because it simply adjusts the position of the SVG within the Flex item. Maybe I don’t have the Flex setup correctly.

Of course, this could all be a user error, but I thought I would try to find out how to reduce the problem.

NOTE: I have not added any padding or margins around these items.

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [July 31, 2024, 6:04am UTC](https://forums.realmacsoftware.com/t/excessive-whitespace-around-components/44009/2 "2024-07-31T06:04:42Z")

</div>

Hi Robin! It would great if you could provide a screenshot or two and your project file so we can get a better understanding of what you’re seeing 🙂

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 31, 2024, 6:45am UTC](https://forums.realmacsoftware.com/t/excessive-whitespace-around-components/44009/3 "2024-07-31T06:45:24Z")

</div>

Attached is a screenshot that I have marked up showing where all the whitespace is located. Does this help?

 ![CleanShot 2024-07-30 at 20.42.50@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/6/8/684b7160ac3628a625bdf5e6b9e12a93fe7b2403.jpeg)

How do I send the project file?

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 31, 2024, 9:59am UTC](https://forums.realmacsoftware.com/t/excessive-whitespace-around-components/44009/4 "2024-07-31T09:59:19Z")

</div>

You can upload it to [we transfer](https://wetransfer.com) and post the link here!

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 31, 2024, 6:03pm UTC](https://forums.realmacsoftware.com/t/excessive-whitespace-around-components/44009/5 "2024-07-31T18:03:27Z")

</div>

Here is a link to the file on Dropbox.

[https://www.dropbox.com/scl/fi/o7w6p8qlitmuutgipmz5p/GB24-BOX-2024-07.elements.zip?rlkey=7ke8m1a6kf408qud8e2mt4kfo&st=whwhz8hg&dl=0](https://www.dropbox.com/scl/fi/o7w6p8qlitmuutgipmz5p/GB24-BOX-2024-07.elements.zip?rlkey=7ke8m1a6kf408qud8e2mt4kfo&st=whwhz8hg&dl=0)

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [July 31, 2024, 7:46pm UTC](https://forums.realmacsoftware.com/t/excessive-whitespace-around-components/44009/6 "2024-07-31T19:46:35Z")

</div>

For the Menu: right now there are no styling options for the padding/height of the Menu. It is something we could add though 🙂

Keep in mind that the Sections are designed to be ready to go “out of the box”, and not have an overwhelming amount of styling options. They should be dropped on the page and look great.

We do, however, want to make all the Section components flexible enough so you can customise them just enough to make them your own 😃

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 31, 2024, 7:58pm UTC](https://forums.realmacsoftware.com/t/excessive-whitespace-around-components/44009/7 "2024-07-31T19:58:26Z")

</div>

what happened to the navigation as shown in videos 9 10 and 11

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 31, 2024, 8:19pm UTC](https://forums.realmacsoftware.com/t/excessive-whitespace-around-components/44009/8 "2024-07-31T20:19:35Z")

</div>

This is the type of navbar I’m attempting to construct but from what I have discovered so far it does not look possible. This is a sticky navbar that stays at the location shown as the content scrolls.

 ![CleanShot 2024-07-31 at 10.14.57@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/e/ae50d7093ad94d6601a5d3fda794d46588ed9d1b.jpeg)

One thing I have not been able to discover with the Menu component in Elements is a means fo indicating the currently active page in the navbar. It seems there are a few missing settings for achieving this, including a HOVER background color and an ACTIVE page background color. Am I missing something.

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [July 31, 2024, 8:27pm UTC](https://forums.realmacsoftware.com/t/excessive-whitespace-around-components/44009/9 "2024-07-31T20:27:54Z")

</div>

We will be adding more Menus in the coming weeks that will cover many more styles and options 😊

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 31, 2024, 8:40pm UTC](https://forums.realmacsoftware.com/t/excessive-whitespace-around-components/44009/10 "2024-07-31T20:40:58Z")

</div>

Awesome, I look forward to seeing what you come up with.

---

<div class="post-metadata">

**Author:** ![Bill](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bill/32/107_2.png) [@Bill](https://forums.realmacsoftware.com/u/Bill)\
**Post date:** [August 1, 2024, 12:25am UTC](https://forums.realmacsoftware.com/t/excessive-whitespace-around-components/44009/11 "2024-08-01T00:25:45Z")

</div>

If you want the navbar to never move, then in Navbar, set the positioning to fixed and set a vertical amount.

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [August 1, 2024, 4:26pm UTC](https://forums.realmacsoftware.com/t/excessive-whitespace-around-components/44009/12 "2024-08-01T16:26:59Z")

</div>

Yes, I had discovered that and applied it to the menu, so now it has the look I was after. The only remaining issue is reducing the height of the menu, when that becomes available.

I also need to figure out how one gets the items in the navbar right aligned instead of centered.

I’d also like to know how I can get rid of the drop zone at the right edge of the navbar?

This is how it now looks.

 ![CleanShot 2024-08-01 at 06.23.55@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/6/a628f75f97f3b24a771f40ef8156c4616d25ba27.jpeg)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [August 1, 2024, 10:05pm UTC](https://forums.realmacsoftware.com/t/excessive-whitespace-around-components/44009/13 "2024-08-01T22:05:06Z")

</div>

> [@upssjw](#):
>
> what happened to the navigation as shown in videos 9 10 and 11

We removed some of the prototype Components for the Beta while we worked out what users want/need. You can expect many more components and options as the beta progresses - we will be focused around added user requests 🙂

> [@handshaper](#):
>
> I’d also like to know how I can get rid of the drop zone at the right edge of the navbar?

That is only visible in the editor, if you preview the site in your browser you’ll notice the drop zone has gone ☺

---

<div class="post-metadata">

**Author:** ![trinube](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@trinube](https://forums.realmacsoftware.com/u/trinube)\
**Post date:** [August 1, 2024, 10:18pm UTC](https://forums.realmacsoftware.com/t/excessive-whitespace-around-components/44009/14 "2024-08-01T22:18:40Z")

</div>

> [@handshaper](#):
>
> One thing I have not been able to discover with the Menu component in Elements is a means fo indicating the currently active page in the navbar.

+1 on this. One of my current sites does this and I’d like to be able to reproduce it:

 ![menubar](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/1/b146877b915c75f4290967029faacbb3a59a695d.png)

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [August 1, 2024, 10:18pm UTC](https://forums.realmacsoftware.com/t/excessive-whitespace-around-components/44009/15 "2024-08-01T22:18:57Z")

</div>

Yes, I did notice that it is only present in the editor.

My main reason for wanting to hide it was because when previewing the MOBILE menu there is this huge drop zone at the bottom of the view.

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [August 1, 2024, 10:21pm UTC](https://forums.realmacsoftware.com/t/excessive-whitespace-around-components/44009/16 "2024-08-01T22:21:02Z")

</div>

Exactly. I use a similar approach but I also use the background of the active page to make it pop a little more.

 ![CleanShot 2024-08-01 at 12.20.07@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/a/aaf15311817d54d3a260b7db506f7ddd1303c510.png)

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [August 1, 2024, 10:37pm UTC](https://forums.realmacsoftware.com/t/excessive-whitespace-around-components/44009/17 "2024-08-01T22:37:01Z")

</div>

One thing I discovered that was impacting the amount of whitespace around an SVG component was the fact that when specifying the SIZE of the component. An assumption appears to being made that the SVG is a SQUARE. But if it is in fact a rectangle a lot of extra space can be added to the SVG, in my case to the top and bottom.

It seems there should be an option to specify both the width and height of the SVG, not just a size value. Or it should initially use the VIEWBOX of the SVG if present and then allow the size to be scaled.

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [August 2, 2024, 8:53am UTC](https://forums.realmacsoftware.com/t/excessive-whitespace-around-components/44009/18 "2024-08-02T08:53:48Z")

</div>

> [@handshaper](#):
>
> An assumption appears to being made that the SVG is a SQUARE. But if it is in fact a rectangle a lot of extra space can be added to the SVG, in my case to the top and bottom.
> 
> It seems there should be an option to specify both the width and height of the SVG, not just a size value.

You’re correct. We need to improve the SVG settings to account for this. Hopefully this will be in the next beta 🙂
