#Move navbar to bottom on ios?

1 messages · Page 1 of 1 (latest)

radiant ice
#

Hi, is there no way to relocate the navbar to the bottom in the iOS app? It's a bit awkward to access on mobile.

hallow locust
#

Is there a button to click to do it for you? Nope. Can it be done? Sure.
You could set up some card_mod code and implement it in a theme. MinimalistUI does it but it is a whole thing by itself.
You might take a look at the header-position-card. I haven't used it, but it looks to be pretty new and based off the no longer maintained ha-navbar-position. Here's a Reddit post if you wanna check it out there: LINK

#

If you're feeling adventurous, here's the code to add to a theme (from the theme minimalist-mobile-tapbar): ```yaml

Move navbar

card-mod-root-yaml: |
ha-tabs$: |
#tabsContent {
width: 97%;
}
.: |
.header {
top: auto !important;
bottom: 0px !important;
box-shadow: var(--footer-shadow);
height: var(--header-height) !important;
}
.toolbar {
height: var(--header-base-height) !important;
padding-bottom: env(safe-area-inset-bottom) !important;
}
#view {
transform: initial;
padding: 0 !important;
margin: 0 !important;
width: 100%;
padding-top: calc(-1 * var(--header-height)) !important;
padding-bottom: var(--header-height) !important;
}
ha-tabs {
--paper-tabs-selection-bar-color: var(--header-tab-indicator-color);
--mdc-icon-size: 26px;
display: flex;
justify-content: space-between;
padding: 0 10px;
height:50px !important;
}
paper-tab[aria-selected=true] {
color: var(--header-active-tab-color);
background-color: var(--header-active-tab-bg-color);
}
paper-tab {
color: var(--header-all-tabs-color);
border-radius: 25px;
height:50px;
/width: calc(100% / 4);
padding: 0;/
padding-left: 20px;
padding-right: 20px;
}

radiant ice
#

Or does your suggestion represent a different option?

hallow locust
#

one of my dashboards use the type panel, so I can only add one card.
Panel allows you to specify a single card to be the "main" card. Nothing says you can't use a layout-type card as the main card and then have other cards inside of it. I prefer the panel layout, but I set the layout-card to be the first card (because it gives greater control over the layout configuration) and then the rest of the dashboard is inside that. The downside is you might have to deal with more YAML and the preview doesn't necessarily cooperate. Not really an issue if you have a YAML-based dashboard.

#

For you, I would suggest adding in a vertical-stack card, for example. The easiest way to do it would be through the Raw configuration Editor. (Edit the dashboard, click the three dots in the upper right, select Raw Configuration Editor.) A word of caution, be careful when editing in here because you can really mess things up. A single space in the wrong spot can wreck everything. With that said, just for good measure, copy the entire code into Notepad or something for safe keeping.

#

In the views: section, you will find the view that you want to amend. It will look something like this: ```yaml
title: My Dashboard
views:

  • title: My Panel View
    type: panel
    background: black
    theme: dark-mode
    cards:
    • type: whatever-card-you-have-set
      <<all the stuff for that card>>
      Add in the vertical-stack under `cards:`. Then highlight the lines for the *whatever-card-you-have-set* section ensuring you don't venture into the next view.. Press Tab twice. Click Save and then Exit the editor. You should end up with something like this. yaml
      title: My Dashboard
      views:
  • title: My Panel View
    type: panel
    background: black
    theme: dark-mode
    cards:
    • type: vertical-stack
      cards:
      • type: whatever-card-you-have-set
        <<all the stuff for that card>>
  • title: THIS IS THE NEXT VIEW.```