Question

Resize Or Remove Background/Canvas

Forms

Updated November 1, 2018

asked on October 31, 2018

I have a form where making it as compact as possible on the screen is critical and as a result, I am having to use CSS to minimize most margins & padding. The last thing I need to make really small or remove is the canvas background. When the form loads on the screen, it appears to have 20-30 px dedicated to showing the top of the background/canvas that I would like to remove (shown in the orange box below).

The problem is that I cannot find a way to remove that as it is not part of the bod,y but instead appears to be part something built via JS. Does anyone know how to resize/remove the top portion of the background/canvas in a form?

0 0

Answer

SELECTED ANSWER

replied on November 1, 2018 • Show version history

As an alternative, you can also do this:

$('div.cf-formwrap').css({'margin-top': '0px', 'margin-bottom': '0px'})

The result will be a little more predictable than explicitly moving the title up. The value of 38 pixels isn't consistent across themes, and may vary for a variety of reasons. By removing the top and bottom (optional) margins from the parent form div, you'll have more consistent and portable results.

1 0

Replies

replied on October 31, 2018

Maybe somebody else knows it better, but I don't have enough context to see what portion of the form needs removing. With Responsive layout enabled, as the window size decreases, the external padding automatically goes away, and the form fills the whole viewport.

What is the reason for being space constrained? Are you on a mobile device? Are you embedding the form in another application? Is it displayed on a small desktop monitor, or one running at low resolution? Is there a way you can show us the entire form?

0 0

replied on October 31, 2018

The customer wants all of the info shown without having to scroll so I am having to utilize all monitor real estate I can to make it work. I am just trying to get rid of the empty space that is shown above a form in the orange box. This is the space that shows the background color/pattern but does not contain anything in the actual form.

0 0

replied on November 1, 2018

Hi Beau

Hope this help's, It takes like a split second to move up.

$('#cf-formtitle').css({marginTop: '-=38px'});

move form.png (9.59 KB)

| Download

0 0

SELECTED ANSWER

replied on November 1, 2018 • Show version history

As an alternative, you can also do this:

$('div.cf-formwrap').css({'margin-top': '0px', 'margin-bottom': '0px'})

1 0

replied on November 1, 2018

This worked perfectly! I had been trying to do it through CSS but hadn't though about doing it the java. Thanks for the help.

0 0

You are not allowed to follow up in this post.

Question

Question

Resize Or Remove Background/Canvas

Answer

Replies

Sign in to reply to this post.