Skip to main content
kristinf8610
kristinf8610
Inspiring
March 27, 2023
Question

How to make a header/billboard full width of page

  • March 27, 2023
  • 7 replies
  • 0 views

So we have a portal where the entire interface is in a!formLayout. Within the formLayout is a section that contains a billboard. We want the header to span the entire width of the page, but billboards don't do that, they have a margin on the right and left side.

I know a!headerContentLayout allows the billboard to stretch the entire width of the page - so I figured I'd change the interface to a!headerContentLayout, put the billboard in the 'header' parameter, and the a!formLayout in the contents array. But a!headerContentLayout does not support a!formLayout as shown in this error I receive:

The contents contain a component that is not supported in the header content layout. Received: FormLayout 

Is there a way to make the billboard/header stretch the full width of the screen in this situation? Thanks for any help!

    7 replies

    S
    sanchitg0002
    March 28, 2023

    You cannot use formLayout inside any of the layouts that exist but you can duplicate almost everything formLayout provides using other components. Form layout is just for convenience, but personally I do not remember using it in any of my projects. 

    When you use formLayout you still have to add other components to the form which you can directly add into a section and using buttonLayout at last you can make it look like just as formLayout. Form validations can also be created using cardLayout with showWhen and some styling. This approach will give you more control over the UI too.

    kristinf8610
    kristinf8610Author
    Inspiring
    March 29, 2023

    Thanks. I asked my team lead if there was a reason we were using formLayout, and that the only way was to convert it to headerContentLayout. So that is what I did, and she said it was fine for now. Now the only issue I'm having is the footer. There is also a footer on all the pages, as a sub-interface. It was made using a billboardLayout. I can't switch that to headerContentLayout though, because then it's calling a headerContentLayout within a headerContentLayout, which obviously isn't allowed. I've been brainstorming with another coworker how we might be able to manually make our own footer without using billboard or headerContentLayout, like with cardLayout or something, but cardLayout also won't stretch the full width of the page. Any ideas on this?

    S
    sanchitg0002
    March 29, 2023

    You can use cardLayout and set the contentsPadding parameter of headerContentLayout to "NONE"

    stefanhelzle0001
    stefanhelzle0001
    Brainy
    March 28, 2023

    a!formLayout is made to be used in user input tasks. Just use a headerContent Layout.

    davel001150
    davel001150
    March 28, 2023

    In other words, ditch the FormLayout() altogether, replace it with headerContentLayout, then you can put a columns layout inside that, and put a buttonArrayLayout on the bottom, and it will be just like a form again.

    kristinf8610
    kristinf8610Author
    Inspiring
    March 29, 2023

    Thanks, that is what I ended up doing. Although perhaps I could use your brainstorm for one last part of the problem, I responded to Sanchit Gupta's response up above with my remaining issue. Thanks! :)

    T
    theresaf174840
    March 28, 2023

    agreed with everyone else. You can use other form components like section layouts and modularize the different components of the formLayout and place it in a headerContent or just call the sub-interfaces directly. 

    Terms & ConditionsAccessibility statement