Page 1 of 1

Save screen space

Posted: Sat Mar 02, 2024 3:50 am
by daveb

I am trying to find a way to place the filter and export buttons as well as the search criteria and button on one line to minimize the space taken on the screen. Can anyone explain if this is possible?

I assume that the code would be in Page_Renderinng., or perhaps Page_Load.


Re: Save screen space

Posted: Sat Mar 02, 2024 9:54 am
by arbei

You may try add your own CSS styles (e.g. display) to the <div> tags of them, see:


Re: Save screen space

Posted: Sat Mar 02, 2024 4:49 pm
by philmills

I moved my toolbar to top right below the breadcrumbs by overriding .btn-toolbar class in user styles (HTML>Styles>User):

.btn-toolbar { 
   display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    position: absolute;
    top: 125px;
    right: 20px;
}

modify top and right to suit your site
Be aware that you need to keep your search section narrow (don't put too many items on one row) so that they don't collide on smaller screens

If you want to just fly the buttons over the right instead of left you can use flex-end:

.btn-toolbar { 
   display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

Re: Save screen space

Posted: Wed Mar 06, 2024 2:30 am
by daveb

Will moving the toolbar to the right also result in the search criteria being higher on the page?

Also, can you explain where to put the code you showed?

Thanks


Re: Save screen space

Posted: Wed Mar 06, 2024 9:43 am
by mobhar

daveb wrote:

Also, can you explain where to put the code you showed?

philmills wrote:

in user styles (HTML>Styles>User)


Re: Save screen space

Posted: Sat Mar 09, 2024 6:39 am
by daveb

Works great. Thank you