Replace the top bar with button bar

Ask for Help
1

I have successfully replaced the glide top bar with a button bar with CSS.

WhatsApp Image 2022-09-25 at 9.50.37 AM
WhatsApp Image 2022-09-25 at 9.50.37 AM828×297 8.45 KB

However, it takes display/function tradeoffs in GDE, as follows:

Screenshot 2022-09-25 094745
Screenshot 2022-09-25 094745876×368 26.6 KB

Maybe I need to discuss the possibility to fix it @ThinhDinh or whoever.

2

So I assume the first screenshot is the real version, the second is the GDE?

3

Yes, the first is the result that has been achieved. Those are screenshots of the app. The second is a consequence of the settings that must be accepted in GDE. I hope there is a match between the two.

4

Have you tried hiding that utilities bar with CSS?

5

Yes, hiding the glide app bar causes the top 0 to move up in GDE.

<pre><span><style>
/*Button on top*/
[data-test="app-button-view"]{
position: fixed;
top: 0px;
width:50%;
left:0;
height: 45px;
z-index:3;
border-radius:  0px;
background-color: black !important;
padding: 15px 20px 15px 20px;
justify-content: space-between;
}

[id*="screenScrollView"] :nth-child(2) :nth-child(2) > button {
left:50%;
background-color: black !important;
padding-right:20px;
justify-content: flex-end;
}

[data-test="glide-app-bar"] {
display: none;
}
6

Can you show me what are the components you have on the screen, and in what order?

7

I only use button bar and rich text components. Button in second.

8

Not liking that I have to touch app-root, I’m sure there might be more cases we have to revert the display for, but let me know if it works for you.

<pre><span><style>
/*Button on top*/
[data-test="app-button-view"]{
position: fixed;
top: 0px;
width:50%;
left:0;
height: 45px;
z-index:3;
border-radius:  0px;
background-color: black !important;
padding: 15px 20px 15px 20px;
justify-content: space-between;
}

[id*="screenScrollView"] :nth-child(2) :nth-child(2) > button {
left:50%;
background-color: black !important;
padding-right:20px;
justify-content: flex-end;
}

[data-test="glide-app-bar"] {
display: none;
}

div[id="app-root"]:first-child svg {
display: none;
}

div[id="tabBar"] svg {
display: block !important;
}

image
image417×847 24.2 KB

A further note: the button bar isn’t clickable in my instance.

9

Despite removing the svg, it still seems to be there and covering the button. If the height of the button is increased you will be able to click on the bottom of it. But in real applications, it will display a very high bar strip of the button.

How do I lower the button on the view in GDE (not in the app) that’s my point, or is there a more correct action in CSS?

10

If you have already had what you want in the real app, then to not make it too time-consuming to figure out, I would advise going to the builder code and delete the div, then as long as you’re not refreshing the tab then it will stay that way.

1 Like
11

I got it, please try…

<pre><span><style>
/*Button on top*/
div[id*="screenScrollView"] > div > div:nth-child(2) > div  { 
position: fixed;
top: 0px;
width:100%;
left: 0px;
margin:0 auto;
z-index:5;
column-gap:0;
background-color: black !important;
    padding-top: var(--safe-area-inset-top);
}

[data-test="app-button-view"] {
position: fixed;
left: 0px;
z-index:25;
width:50%;
height: 44px;
border-radius:  0px;
background-color: black !important;
padding: 14px 20px 14px 20px;
justify-content: space-between;
}

div[id*="screenScrollView"] >div>div:nth-child(2) :nth-child(2) > button {
position: fixed;
left:50%;
width:50%;
height: 44px;
z-index:25;
border-radius: 0px;
background-color: black !important;
justify-content: flex-end;
}

[data-test="app-button-view"]:hover {
color: darkorange  !important;
background-color: black !important;
}

[data-test="glide-app-bar"] {
display: none;
}