If you see something involving data-test then it’s likely to be a static one, else no.
I think it’s a no at this point. Not sure if there’s a CSS to have a dynamic size based on screen. If anyone can contribute it would be of great help.
@Pablo_books Thanks for these helpful tips.
Is there a way to hide the whole tab bar at the bottom?
If you only have one visible tab in your app, the tab bar would already be hidden.
If you have multiple tabs, here’s the code.
<pre><span><style>
[id="tabBar"]{
display: none;
}
@ThinhDinh Thank you!
How would I hide the page title (text in the middle) in a detailed screen, in the source code I find the title at 2 places.
Sorry for the late reply. Here’s the one.
<pre><span><style>
#app-root div[opacity='1'] {
color: transparent;
}
Just discovered this for hiding the submit button in a form. I use it when I want floating buttons for FAQ pages.
[data-test="nav-button-Submit"]{ display: none }
Is there any reason you don’t use a link to screen action?
Yeah it means I don’t have to add more tabs to my database!
Also it slides up which is pretty neat.
You would be linking to the same item (this item), that’s not an additional tab, just to be clear
I think I had the same idea at one point but opt against it due to the “Cancel” text.
I would need a tab to link to. Right now I just copy and paste into custom fields.
Plus the slide up is really cool.
This seems like a very odd use case.
If you’re hiding the submit button in a form, then how do your users actually submit the form?
Because i’m using it to display information, not to action anything so the submit button is just a tad confusing.
I’m using it like a modal/pop up.
ah, I see.
Okay, well as @ThinhDinh pointed out, the usual way to do this would be with a Link to Screen → This Item action.
That said, if this works for you then fair enough. I can’t immediately think of any downside, other than it being a bit unconventional. Trying to think of a suitable analogy… perhaps a bit like booking a table in a restaurant because you need somewhere to sit for a while
I agree with the Link to Screen → This Item method. It’s just a new screen for the same row you are viewing, so it keeps you on the same row, but you can design it independently from the previous screen and doesn’t require any CSS manipulation or additional tabs or tables. I only use a form if I intend to actually submit data. One of my apps is mostly based off a single row and all navigation is controlled with that same row by using visibility or Link to Screen → This Item to go to other screens. The entire time it’s still linked to a single user profile row as the main driver.
But, like what was mentioned, it works either way, so if you are happy with it, then it shouldn’t be a problem. I tend to get leery about hiding buttons like that. It may not be an issue with the submit button, but I feel like doing something like hiding a back button could still be averted because at least android still has it’s own back button that could override a hidden back button, but I haven’t ever tested to see if that’s actually the case.
I just discovered how to hide the ‘cancel’ button as well, now I just have another floating button with a back arrow to go back. Works pretty sweet, really happy with it.
The content that is going in these pages is data that I don’t really need in a database so having a tab to link to for the info is not necessary. Also I can’t understate the utility of the up-motion for the UI flow of the app.
I’m actually using it in a form as well too ha, ‘form-ception’.
It’s about as close as I can get to it feeling like a modal.
Glad that you found what you need, and I agree the up-motion is pretty slick, one client of mine said the same a while ago.
Regarding this, if you follow the Link to this item way, you’re just linking to the current row and if your components are all containing custom info then you don’t actually need to have anything more in your database.
Like the idea. Rather cool. Replace the cancel with some CSS close
Buenas Noches como puedo ocultar los enlaces en Glide en funcion de la @media query
//HTML
<a class="whatsappLink mobile" href="whatsapp://send?text=Tu mensaje&phone=+34123456789&abid=+34123456789"></a><a class="whatsappLink desktop" href="http://web.whatsapp.com/send?text=Tu mensaje&phone=+34123456789&abid=+34123456789"></a>
//CSS
.whatsappLink.mobile{
display: none;
}
@only screen and (max-width:1024px){
.whatsappLink.desktop {
display: none;
}
.whatsappLink.mobile{
display: inline;
}
}