27
Views
2
Comments
Carousel to display full page images
Question

I am developing a  reactive web app with Outsystems 11. On the entry page(home), i want to display a carousel with three images in them to cover the entire page. How can i achieve this? I currently have a carousel with the three images in it but the images do not cover the entire screen.

My intention is to achive something like this https://www.hms.com/ 

Billy Mganda wrote:

I am developing a  reactive web app with Outsystems 11. On the entry page(home), i want to display a carousel with three images in them to cover the entire page. How can i achieve this? I currently have a carousel with the three images in it but the images do not cover the entire screen.

My intention is to achive something like this https://www.hms.com/ 

Hi Billy,

From my understanding you want it to be full width?! If so you have to change the layout web block of your screen.

If you just want this on the entry page an not on the other screens I would say to make a copy of the Layout web block (on the Common UI flow) and name in something like Layout_FullWidth. (This is because all screens are using the Common/Layout by default so if you changed directly the Common/Layout you would be changing all the others screens layout)

On the Layout_FullWidth change the width of the placeholder where you are placing your carousel or change where your placeholder is located on the widget tree (you should only need to remove the "MainContentWrapper" container or move the main content placeholder to outside the "MainContentWrapper" container and the main content placeholder will adapt to full width of the page) - check the widget tree of that web block to understand what is limiting the width of the widgets. If I did not explained my self properly it is a matter of moving with those elements on the layout to obtain what you want.

Then you just need to set the Source Web Block of your entry page to the new Layout_FullWidth, in order to update to the new layout.  

Hope it helped,

Clarisse


Hi Billy,

You can create a new layout by copying the existing layout add change (override) the  following css 

.layout-top .content .ThemeGrid_Container {

    margin: var(--space-none) auto;

    padding: var(--space-xl);

    width: 100%;

}

to

.layout-top .content .ThemeGrid_Container {

    margin: 0;

    padding: 0;

    max-width: 100%;

}


the actual max-width is set in this css

.ThemeGrid_Container {

max-width: 1280px;  // this restricts the total width 

padding-left: 5%;

padding-right: 5%;

}

The above css will affect other content like the content in the header. Try to use the chrome tools to find which will suit you better and go with it.

Hope this solves your issue.