Yup, just tested it on v2.0.4, and it’s working totally fine. Seems to be an issue introduced in beta1.
Also, I’m noticing the secondary information font being enlarged when text doesn’t fit. It sometimes works as normal, but other times font size increases randomly.
Normal:
Enlarged (bug):
Hi, I didn’t style the bubble-cards, just my theme. Just paste these codes inside your ‘theme.yaml’ after making a backup:
primary-color: rgb(26, 115, 232)
primary-background-color: rgb(239, 239, 239)
secondary-background-color: rgb(245, 245, 245)
app-header-background-color: var(--primary-background-color)
divider-color: var(--primary-background-color)
Hey Cloos,
the dropdown menu you’ve introduced with the latest beta is awesome, thanks a lot!
However I’ve noticed that cards from the “swipe card” addon are placed above the dropdown (see below screenshot). Is there any way on your side to fix this behaviour?
Thanks!
Hi, very much like the new select-drop-down menu at the sub buttons. Great work!
Just one question, How do I change the background-color of the select drop down menu? Wanted to look in Github but the select card is not yet present… or at least I didn‘t see it.
Sharing my code for anyone else that wants the climate card to change based on the state of the climate entity. You can change the colours of the card with each state, I also added a different icon based on the state:
type: custom:bubble-card
card_type: button
entity: climate.home_air_conditioner
show_icon: true
scrolling_effect: false
force_icon: false
show_state: false
show_last_changed: true
show_attribute: false
attribute: friendly_name
card_layout: large
name: Climate
show_name: true
hide:
play_pause_button: false
volume_button: false
next_button: true
previous_button: true
sub_button:
- show_attribute: false
show_icon: true
icon: ''
name: Mode
show_background: false
show_state: true
show_last_changed: false
show_name: false
entity: climate.home_air_conditioner
- entity: climate.home_air_conditioner
name: Current Temperature
show_icon: true
show_background: false
show_name: false
show_state: false
show_attribute: true
attribute: current_temperature
icon: mdi:home-thermometer-outline
tap_action:
action: none
- entity: climate.home_air_conditioner
icon: fas:temperature-half
show_background: false
show_name: false
show_attribute: true
attribute: temperature
button_type: state
styles: >
.bubble-button-background {
background-color: ${hass.states['climate.home_air_conditioner'].attributes.hvac_mode === 'heat' ? '#d11141' : hass.states['climate.home_air_conditioner'].attributes.hvac_mode === 'cool' ? '#00aedb' : hass.states['climate.home_air_conditioner'].attributes.hvac_mode === 'fan_only' ? '#cccccc' : hass.states['climate.home_air_conditioner'].attributes.hvac_mode === 'dry' ? '#00b159' : hass.states['climate.home_air_conditioner'].attributes.hvac_mode === 'heat_cool' ? '#ffc425' : 'cccccc'} !important;
}
.bubble-icon {
color: ${hass.states['climate.home_air_conditioner'].attributes.hvac_mode === 'heat' ? '#d11141' : hass.states['climate.home_air_conditioner'].attributes.hvac_mode === 'cool' ? '#00aedb' : hass.states['climate.home_air_conditioner'].attributes.hvac_mode === 'fan_only' ? '#cccccc' : hass.states['climate.home_air_conditioner'].attributes.hvac_mode === 'dry' ? '#00b159' : hass.states['climate.home_air_conditioner'].attributes.hvac_mode === 'heat_cool' ? '#ffc425' : 'cccccc'} !important;
}
${icon.setAttribute("icon",
hass.states['climate.home_air_conditioner'].attributes.hvac_mode === 'heat' ?
'mdi:weather-sunny' :
hass.states['climate.home_air_conditioner'].attributes.hvac_mode === 'cool' ?
'mdi:snowflake' :
hass.states['climate.home_air_conditioner'].attributes.hvac_mode === 'dry' ?
'mdi:water-percent' :
hass.states['climate.home_air_conditioner'].attributes.hvac_mode ===
'fan_only' ? 'mdi:fan' :
hass.states['climate.home_air_conditioner'].attributes.hvac_mode ===
'heat_cool' ? 'mdi:sun-snowflake-variant' : 'mdi:air-conditioner')}
I’m on it! This will be fixed in the next release.
It is available, but I haven’t fully tried the custom styles on it, it’s possible that everything is not customizable (yet).
Keep me informed!
Haven’t managed to change the background color of the dropdown-menu yet… but noticed that when using the sub-buttons the “original arrow” is still visible and on top of the sub-button. See screenshot
Did you changed something with the custom styles? I’ve never had this issue.
Just made a new select card without any custom styles and I have the same “problem”
… ah, and just noticed that it seems that the z-index of the drop-down-menus of the sub-buttons is not correct… menu is alway “under” adjecent buttons…
Nice!
You can also use theme variables for colors to keep it a little bit cleaner:
.bubble-button-background {
background-color: var(--state-climate-${state}-color, var(--bubble-button-background-color)) !important;
}
.bubble-icon {
color: var(--state-climate-${state}-color, var(--primary-text-color)) !important;
}
These are defined by default in HA:
--state-climate-auto-color: var(--green-color);
--state-climate-cool-color: var(--blue-color);
--state-climate-dry-color: var(--orange-color);
--state-climate-fan_only-color: var(--cyan-color);
--state-climate-heat-color: var(--deep-orange-color);
--state-climate-heat-cool-color: var(--amber-color);
Might be because of your theme then, have you tried with an other one?
If it looks normal I might know how to fix this.
Here some photos with the bubble theme:
Issue with arrow remains. You also see, when the menue goes up it is on top, when it goes down it is underneath the below card
That’s a great improvement and I didn’t know you could use it like that, thanks!
Just for anyone that wanted to see the solution to this, I’ve implemented a JS function to round the number and it works great!
${card.querySelector('.bubble-state').innerText =
parseFloat(hass.states['sensor.solarnet_power_grid'].state) < 0
? "Generating " + parseFloat(hass.states['sensor.solarnet_power_grid_export'].state).toFixed(2) + " kW of Excess Solar"
: "Using Grid Power"}
Oh I didn’t realized that you added these select sub-buttons directly in a select card, I will need to try that case.
But for now you shouldn’t have that issue when you add these sub-buttons for example in a button card.
ah, understood. Thanks!
… now it works perfectly!
Edit: Still there seems to be a problem with the stack-order. First time when opening the select menu it is fine. Second time menu appears underneath adjecent cards.
I’m already aware of this and it will be fixed in the next beta.
Would be nice to see larger rectangle/square cards, any plans for this?
Totally in my plans, I’ve already made some tests.