screenshot?
and peace of your yaml file?
you can fix it with this code above your chips
- type: custom:button-card
template: spacer
variables:
height: 50px
1 Like
play a little with the 50px
I saw this also in my own install.
The thing is, it its very hard to fix.
Also in the other themes it doesnāt do this.
Seems my implementation of the tabbar breaks a few things.
Its not an spacing issue, there is some whit the sizing of the tabbar thatās interfering whit an stock Home-assistant gui.
Weird, I tried dmatikās version and that does not jump like yours but I do see now that dmatiskās version does have a pretty big gap at the top.
Even with @LRvdLinden fix the bar moves a couple of pixels as you can see in my gif above
Hey guys,
Great work one more time 
i just made the integration by hacs but i do not understand with this happens ?
Do any of you have the same problem ?
Thanks
That true but his theme does not have an rounded shape behind an active tab and thatās one of the things that breaks the theme.
The goal was to get this design to work : https://github.com/UI-Lovelace-Minimalist/UI/issues/346
1 Like
Itās a issue with Chrome browser, in all other browsers and companion apps it shows just fine.
Thanks for that fast reply but Here i am on Android Ha app. Cache is still empty but seems still Not working.
OK i think you have another problem, i donāt have Android here so i canāt check for it. Can you check if it works in Firefox?
It looks damn beautiful itās a shame it bugs. Read the issue and they might be right that it could be an iOS or iOS HA app issue.
no problem on iOS with this theme. I modified it a little
---
minimalist-mobile-tapbar:
# Journal
state-icon-color: "rgb(var(--color-theme))"
border-radius: "20px"
error-color: "var(--google-red)"
warning-color: "var(--google-yellow)"
success-color: "var(--google-green)"
info-color: "var(--google-blue)"
divider-color: "rgba(var(--color-theme),.12)"
accent-color: "var(--google-yellow)"
card-mod-theme: "minimalist-mobile-tapbar"
header-height: "56px"
card-mod-view-yaml: |
"*:first-child$": |
#columns .column > * {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
}
# Move navbar
card-mod-root-yaml: |
ha-tabs$: |
#tabsContent {
width: 97%;
}
.: |
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
display: none !important;
}
app-toolbar {
padding-right: 0px;
padding-left: 0px;
}
}
ha-app-layout{
transform: initial;
padding: 0 !important;
margin: 0 !important;
width: 100%;
}
app-header {
top: auto;
bottom: 0;
box-shadow: var(--footer-shadow);
position: fixed;
}
app-toolbar {
transform: none;
padding-top:10px !important;
padding-bottom: calc(env(safe-area-inset-bottom) + 2px);
height: 100px !important;
}
#view {
margin-top: calc(-71px + env(safe-area-inset-top)) !important;
width: 100%;
min-height: 100%;
height: auto;
padding-bottom: calc(env(safe-area-inset-bottom) + 50px);
}
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;
}
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: 35px;
height:50px;
/*width: calc(100% / 4);*/
padding-left: 20px;
padding-right: 20px;
}
# Color themes
modes:
light:
# Header / Footer
header-active-tab-color: "rgba(61, 90, 254, 1)"
header-active-tab-bg-color: "rgba(61, 90, 254, .3)"
header-all-tabs-color: "var(--paper-item-icon-color)"
header-tab-indicator-color: "rgba(0, 0, 0, 0)"
app-header-text-color: "var(--primary-text-color)"
app-header-background-color: "var( --ha-card-background, var(--card-background-color, white) )"
paper-tabs-selection-bar-color: "var(--primary-text-color)"
footer-shadow: "0px -1px 3px 0px rgba(0,0,0,0.12)"
# background and sidebar
card-background-color: "#FAFAFA"
primary-background-color: "#EFEFEF"
secondary-background-color: "#EFEFEF"
# text
primary-text-color: "#212121"
# main interface colors
primary-color: "#434343"
google-red: "#F54436"
google-green: "#01C852"
google-yellow: "#FF9101"
google-blue: "#3D5AFE"
google-violet: "#661FFF"
google-grey: "#BBBBBB"
color-red: "245, 68, 54"
color-green: "1, 200, 82"
color-yellow: "255, 145, 1"
color-blue: "61, 90, 254"
color-purple: "102, 31, 255"
color-grey: "187, 187, 187"
color-pink: "233, 30, 99"
color-theme: "51,51,51"
color-background-yellow: "250, 250, 250"
color-background-blue: "250, 250, 250"
color-background-green: "250, 250, 250"
color-background-red: "250, 250, 250"
color-background-pink: "250, 250, 250"
color-background-purple: "250, 250, 250"
color-yellow-text: "var(--primary-text-color)"
color-blue-text: "var(--primary-text-color)"
color-green-text: "var(--primary-text-color)"
color-red-text: "var(--primary-text-color)"
color-pink-text: "var(--primary-text-color)"
color-purple-text: "var(--primary-text-color)"
opacity-bg: "1"
# slider
slider-color: "rgb(var(--color-blue))"
slider-bar-color: "rgba(var(--color-blue),0.38)"
# cards
box-shadow: "0px 2px 4px 0px rgba(0,0,0,0.16)"
ha-card-box-shadow: "var(--box-shadow)"
# sidebar
sidebar-selected-text-color: "var(--google-red)"
sidebar-selected-icon-color: "var(--google-red)"
sidebar-text-color: "#80868b"
# switch
switch-checked-color: "var(--google-blue)"
# media player
mini-media-player-accent-color: "var(--google-red)"
dark:
# Header / Footer
header-active-tab-color: "rgba(255, 145, 1, 1)"
header-active-tab-bg-color: "rgba(255, 145, 1, .3)"
header-all-tabs-color: "var(--paper-item-icon-color)"
header-tab-indicator-color: "rgba(0, 0, 0, 0)"
app-header-text-color: "var(--primary-text-color)"
app-header-background-color: "var( --ha-card-background, var(--card-background-color, rgb(29, 29, 29)) )"
paper-tabs-selection-bar-color: "var(--primary-text-color)"
footer-shadow: "0px -1px 3px 0px rgba(0,0,0,0.12)"
# background and sidebar
card-background-color: "#1D1D1D"
primary-background-color: "#121212"
secondary-background-color: "#121212"
# text
primary-text-color: "#DDDDDD"
# main interface colors
primary-color: "#89B3F8"
google-red: "#F18B82"
google-green: "#80C994"
google-yellow: "#FCD663"
google-blue: "#89B3F8"
google-violet: "#BB86FC"
google-grey: "#BBBBBB"
color-red: "241, 139, 130"
color-green: "128, 201, 148"
color-yellow: "252, 214, 99"
color-blue: "137, 179, 248"
color-theme: "221,221,221"
color-purple: "102, 31, 255"
color-grey: "187, 187, 187"
color-pink: "233, 30, 99"
color-background-yellow: "var(--color-yellow)"
color-background-blue: "var(--color-blue)"
color-background-green: "var(--color-green)"
color-background-red: "var(--color-red)"
color-background-pink: "var(--color-pink)"
color-background-purple: "var(--color-purple)"
color-yellow-text: "var(--color-yellow)"
color-blue-text: "var(--color-blue)"
color-green-text: "var(--color-green)"
color-red-text: "var(--color-red)"
color-pink-text: "var(--color-pink)"
color-purple-text: "var(--color-purple)"
opacity-bg: "0.1"
# floating button text color
mdc-theme-on-secondary: "var(--card-background-color)"
# Sidebar
sidebar-selected-text-color: "rgb(var(--color-blue))"
sidebar-selected-icon-color: "rgb(var(--color-blue))"
# Slider
slider-color: "rgb(var(--color-blue))"
slider-bar-color: "rgba(var(--color-blue),0.38)"
# card
box-shadow: "none"
# media player
mini-media-player-accent-color: "var(--google-blue)"
# Journal
state-icon-color: "rgb(var(--color-theme))"
Do you use that spacer at the top then or do it just work out of the box like that?
Did somebody already create an input_select card for UI? Keen to set-up a couple of actions with selection helpers as inputs (e.g. where do I play a certain TTS, where do I flash certain lights). Open to suggestions!
Thanks
It works in Firefox 
Iām a newby here and feel a little bit stupid. Can somebody please tell me which template to use for a simple on/off button with state (switch)?