Creating whitespace

I’m using style=“clear:both; height:300px” to create a large amount of whitespace on a form.

It’s a scrollable form and I’m using Material design buttons for Submit and Cancel - they float above the content so I need to create space at the bottom of the form or the buttons cover some of the content.

You can see what it looks like without the whitespace here:


My question is - is there some other, errr, sanction way of doing this?

You can put your buttons inside
<ion-footer-bar> </ion-footer-bar>

That will fix them below the form though. I’m going for Google Inbox or Gmail app style interface with a button that floats over the form.

Your buttons are absolutely positioned, from what I see. So You should set their “bottom” position instead of “top”. Then You should add space beneath the form and the buttons on top of that space.

You can read up on CSS positioning here

My buttons are positioned with bottom, not top. They are absolutely positioned, yes.

I have created space beneath the form with:

   <div style="clear:both; height:300px"></div>

I’m just wondering if there is a better way.

Sorry, I only looked at:

.float-button-r {
position: absolute;
left: 0;
top: 50%;

Since the buttons are positioned absolutely they are out of the “flow” of the page. If You want them to be underneath the form and not on top of it You should not position them absolutely. Unless You DO want them to be on top of the form in which case I’m afraid I don’t understand the problem :slight_smile:

I want them on top of the form, but I want whitespace at the bottom of the form.

Go and look at my Codepen

In the HTML at the end of the ion-content you can see the whitespace I’ve created with a div. See how it allows the form to be scrolled above the buttons. Without that the bottom of the form is under the buttons. It works fine with the div - but my question is; Is this the right way to do it?

I did look at Your codepen.
Generally in order to space elements you should use padding and margin instead of creating a special “whitespace” div.

1 Like

I’ve just used margin.

Much better. Thanks!

No problem :slight_smile: Glad we understood each other :slight_smile: