ownbee / bootstrap-grid-card Goto Github PK
View Code? Open in Web Editor NEWBootstrap grid in Lovelace UI
License: MIT License
bootstrap-grid-card's People
Contributors
Stargazers
Watchers
bootstrap-grid-card's Issues
Gauge Cards keep dropping to zero
Checklist:
- I updated to the latest version available
- I cleared the cache of my browser
- Version: 2023.4.6
- Last working release (if known): unknown
- Browser and Operating System: Brave, Windows
I first noticed this issue with the weather card which seems to flicker frequently, ignored the issue because its of minor importance.
However experimenting with new grid views I built a prototype with a grid of gauges showing temperature and humidity sensors.
The gauges will frequently drop to zero, then bounce back to the correct value. This happens with some regularity, typically 1 - 2 seconds, then a brief respite for 4 - 5 seconds then back to 1 - 2 seconds.
I assumed it was something to do with screen refresh when I saw the problem with weather card. But I cannot find any settings which may influence this behaviour.
Javascript errors shown in the web inspector (if applicable):
Additional information:
scrnli_4_24_2023_5-23-56.PM.mp4
100% heigh cols/rows
Is your feature request related to a problem? Please describe.
I'm trying to create this layout with bootstrap-grid-card.
I am trying to give a row or a column a d-flex align-items-stretch to give 100% height
Describe the solution you'd like.
Support for d-flex align-items-stretch.
Feature request: Make it possible to edit contained cards in UI
Describe the solution you'd like.
This is a really nice way of managing the grid.
But would it be possible to enable activation of UI editing of contained cards?
Simply not working
I installed the bootstrap-grid card per the instructions, but nothing seems to be working. Not sure I understand how your card works and what I should be doing. Sorry, your instructions are not noticeably clear. I am sure users with advanced knowledge or more experience will work right through this with no issue, but not everyone is as knowledgeable and will need some dumped down instructions with more clarification.
Yes, I did clear cache and reload the page.
Please advise and thank you
Since last version update(0.1.2) my nested layout is broken
Checklist:
- I updated to the latest version available
- I cleared the cache of my browser
- Version: v0.1.2
- Last working release (if known): v0.1.1
- Browser and Operating System: All browsers, All systems
Description of problem:
Since last version update, my nested layout broke
Old behavior from previous version:
New behaviour with the latest version:
To replicate the issue, that is my card, It can be tested in a card inside a PANEL VIEW, so it takes the whole width of the screen
type: custom:bootstrap-grid-card
global_row_class: justify-content-center
cards:
- type: row
cards:
- type: row
cards:
- type: row
cards:
- styles:
card:
- height: 70px
- width: 76px
name:
- color: null
icon:
- color: var(--paper-item-icon-color)
icon: mdi:shield
name: Aarlo
type: custom:button-card
- styles:
card:
- height: 70px
- width: 76px
name:
- color: null
icon:
- color: var(--paper-item-icon-color)
icon: mdi:cloud
name: Weather
type: custom:button-card
- type: row
cards:
- styles:
card:
- height: 70px
- width: 76px
name:
- color: null
icon:
- color: var(--paper-item-icon-color)
icon: mdi:warehouse
name: Garage
type: custom:button-card
- styles:
card:
- height: 70px
- width: 76px
name:
- color: null
icon:
- color: var(--paper-item-icon-color)
icon: mdi:account
name: Personal
type: custom:button-card
- type: row
cards:
- type: row
cards:
- styles:
card:
- height: 70px
- width: 76px
name:
- color: null
icon:
- color: var(--paper-item-icon-color)
icon: mdi:television
name: TV
type: custom:button-card
- styles:
card:
- height: 70px
- width: 76px
name:
- color: null
icon:
- color: var(--paper-item-icon-color)
icon: mdi:server
name: Stats
type: custom:button-card
- type: row
cards:
- styles:
card:
- height: 70px
- width: 76px
name:
- color: null
icon:
- color: var(--paper-item-icon-color)
icon: mdi:shape-square-plus
name: Lab
type: custom:button-card
- styles:
card:
- height: 70px
- width: 76px
name:
- color: var(--primary-color)
icon:
- color: var(--primary-color)
icon: mdi:home
name: Home
type: custom:button-card
- type: row
cards:
- type: row
cards:
- styles:
card:
- height: 70px
- width: 76px
name:
- color: null
icon:
- color: var(--paper-item-icon-color)
haptic: light
icon: mdi:biohazard
name: Covid
type: custom:button-card
- styles:
card:
- height: 70px
- width: 76px
name:
- color: null
icon:
- color: var(--paper-item-icon-color)
haptic: light
icon: mdi:webcam
name: Cameras
type: custom:button-card
- type: row
cards:
- styles:
card:
- height: 70px
- width: 76px
name:
- color: null
icon:
- color: var(--paper-item-icon-color)
haptic: light
icon: mdi:water-pump
name: Rachio
type: custom:button-card
- styles:
card:
- height: 70px
- width: 76px
name:
- color: null
icon:
- color: var(--paper-item-icon-color)
haptic: light
icon: hass:robot
name: Automations
type: custom:button-card
Javascript errors shown in the web inspector (if applicable):
Additional information:
Dashboard: Sometimes showing error "Custom element doesn't exist: hui-vertical-stack-card"
Checklist:
- I updated to the latest version available
- I cleared the cache of my browser
- Version: v0.1.3
- Last working release (if known): /
- Browser and Operating System: Multiple - Chrome, Windows & Mac, Android WebView
I believe the issue is not related to a specific browser.
Description of problem:
every now and then when loading my home assistant dashboard I get two stacks displayed which both display the error:
Custom element doesn't exist: hui-vertical-stack-card.
See the screenshot below. Reloading the page or switching to a different tab like settings and back resolves the issue. This error appears about every 10-20% of times when I open the dashboard and I can't reproduce it consistently. Recently the error is appearing more often.
I've installed bootstrap-grid-card via HACS and see it listed in the dashboard resources UI:
Full dashboard configuration:
title: ''
views:
- panel: true
badges: []
cards:
- type: custom:bootstrap-grid-card
cards:
- type: row
cards:
- type: vertical-stack
class: col-8
cards:
- type: weather-forecast
entity: weather.rutzheim_hourly
show_forecast: true
number_of_forecasts: '5'
theme: Animated Weather Card
name: ' '
- type: vertical-stack
cards:
- type: custom:homekit-card
entities:
- title: Lights
entities:
- entity: light.living_room
tap_action:
action: call-service
service: script.toggle_living_room_lights
- entity: light.hallway
- entity: light.bathroom
- entity: light.kitchen
- entity: light.bedroom
- title: Devices
entities:
- entity: switch.rutzheim_desktop
- entity: switch.living_room_tv
- entity: remote.xbox_series_x_remote
- entity: switch.bedroom_tv
- title: Motion sensors
entities:
- entity: input_boolean.motion_sensing_hallway
- entity: input_boolean.motion_sensing_bathroom
- entity: input_boolean.motion_sensing_kitchen
- entity: input_boolean.motion_sensing_bedroom
style: |
:host {
--tile-background: rgba(10, 10, 10, 0.22);
--tile-border-radius: 12px;
--tile-width: 100px;
--tile-height: 100px;
--tile-on-background: var(--card-background-color);
--tile-name-text-color: var(--disabled-text-color);
--tile-on-name-text-color: var(--primary-text-color);
--tile-state-text-color: var(--disabled-text-color);
--tile-on-state-text-color: var(--paper-item-icon-active-color);
--tile-state-changed-text-color: var(--primary-text-color);
--tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
--tile-value-text-color: var(--primary-text-color);
--tile-icon-color: var(--disabled-text-color);
--tile-on-icon-color: var(--paper-item-icon-active-color);
--tile-width-mobile: 90px;
--tile-height-mobile: 90px;
--tile-icon-size: 30px;
--tile-padding-top: 0
--tile-image-radius: 0;
}
- type: vertical-stack
class: col
cards:
- type: entity
entity: sensor.time_formatted
name: Rutzheim München
- type: conditional
conditions:
- entity: media_player.badezimmer_speaker
state_not: idle
- entity: media_player.badezimmer_speaker
state_not: unavailable
- entity: media_player.badezimmer_speaker
state_not: unknown
- entity: media_player.badezimmer_speaker
state_not: 'off'
card:
type: media-control
entity: media_player.badezimmer_speaker
- type: conditional
conditions:
- entity: media_player.kuche_speaker
state_not: 'off'
- entity: media_player.kuche_speaker
state_not: unavailable
- entity: media_player.kuche_speaker
state_not: unknown
- entity: media_player.kuche_speaker
state_not: idle
card:
type: media-control
entity: media_player.kuche_speaker
- type: conditional
conditions:
- entity: media_player.schlafzimmer_speaker
state_not: 'off'
- entity: media_player.schlafzimmer_speaker
state_not: unavailable
- entity: media_player.schlafzimmer_speaker
state_not: unknown
- entity: media_player.schlafzimmer_speaker
state_not: idle
card:
type: media-control
entity: media_player.schlafzimmer_speaker
- type: conditional
conditions:
- entity: media_player.wohnzimmer_speaker
state_not: 'off'
- entity: media_player.wohnzimmer_speaker
state_not: unavailable
- entity: media_player.wohnzimmer_speaker
state_not: unknown
- entity: media_player.wohnzimmer_speaker
state_not: idle
card:
type: media-control
entity: media_player.wohnzimmer_speaker
- type: conditional
conditions:
- entity: media_player.rutzcast_wohnzimmer
state_not: 'off'
- entity: media_player.rutzcast_wohnzimmer
state_not: unavailable
- entity: media_player.rutzcast_wohnzimmer
state_not: unknown
- entity: media_player.rutzcast_wohnzimmer
state_not: idle
card:
type: media-control
entity: media_player.rutzcast_wohnzimmer
- type: conditional
conditions:
- entity: media_player.rutzcast_schlafzimmer
state_not: 'off'
- entity: media_player.rutzcast_schlafzimmer
state_not: unavailable
- entity: media_player.rutzcast_schlafzimmer
state_not: unknown
- entity: media_player.rutzcast_schlafzimmer
state_not: idle
card:
type: media-control
entity: media_player.rutzcast_schlafzimmer
- type: plant-status
entity: plant.monstera
- type: entities
entities:
- entity: input_select.spotify_user_selection
show_header_toggle: false
- type: conditional
conditions:
- entity: input_select.spotify_user_selection
state: Peter
card:
type: custom:spotify-card
limit: 10
playlist_type: default
default_device: Wohnzimmer speaker
display_style: list
hide_top_header: true
hide_playback_controls: true
hide_currently_playing: true
hide_connect_devices: true
account: default
spotify_entity: media_player.spotify_peter_juras
- type: conditional
conditions:
- entity: input_select.spotify_user_selection
state: Sandra
card:
type: custom:spotify-card
playlist_type: default
default_device: Wohnzimmer speaker
display_style: list
hide_top_header: true
hide_playback_controls: true
hide_currently_playing: true
hide_connect_devices: true
limit: 10
account: sandra
spotify_entity: media_player.spotify_sandra_jurasWhy I can't get a responsive behavior?
Wonder what I am missing here because my dashboard does not get responsive if I am accessing it from my phone. See the following pic:
This is the YAML for such view:
- theme: Backend-selected
title: Office
path: office
icon: mdi:chair-rolling
badges: []
type: panel
cards:
- type: custom:bootstrap-grid-card
cards:
- type: row
class: d-flex flex-row-reverse
cards:
- type: custom:mushroom-light-card
class: col-xs-6 col-md-3 col-xxl-3
name: Office Light
entity: light.office
show_brightness_control: true
use_light_color: true
collapsible_controls: true
fill_container: true
secondary_info: last-changed
layout: horizontal
- type: custom:mushroom-fan-card
class: col-xs-6 col-md-3 col-xxl-3
name: Office Fan
entity: fan.office
icon_animation: true
show_percentage_control: true
collapsible_controls: true
fill_container: true
secondary_info: last-changed
layout: horizontalColumns behave like rows [Display: block instead of flex]
Checklist:
- I updated to the latest version available
- I cleared the cache of my browser
- Version: v0.1.1
- Browser and Operating System: Brave, Windows 11 (Browser and OS independent bug)
Description of problem:
I'm not being able to have cards behave like columns. Instead, all cards occupy a whole row, even if they have differing sizes that would fit in the 12-grid system.
This is something I can easily fix if I inspect the elements and add display: flex to the .container-fluid class.
This behavior is both OS and browser independent. I've tried on both Mac and Windows, with my default browser (Brave -> Chromium) as well as Safari
Current behavior:
Elements have the correct size, but they span a whole row.
Expected behavior:
Adding display: flex; to .container-fluid fixes the problem. Of course if I reload this is gone.
This is because .container-fluid inherits display: block; from the div default styles. This disables flex.
Additional information:
I installed this addon through HACS.
My dashboard configuration looks like this:
views:
- title: Home
panel: true
cards:
- type: custom:bootstrap-grid-card
cards:
- type: col
class: col-sm-hidden col-md-3
cards:
- type: custom:search-card
- type: col
class: col-sm-12 col-md-9
cards:
- type: custom:search-card
- type: entities
entities:
- light.07580048e868e757f421
- light.main_light
- light.table_lamp
- type: custom:slider-entity-row
entity: cover.motorized_blinds
title: Bedroom
show_header_toggle: false
state_color: trueAm I doing something wrong?
I'd be happy to help, although I have no experience with lovelace addons. I believe this should be a simple fix.
number of columns
reading the docs there should be 12 columns
I can only set out 11
if I set col-4 three times in a row it steps the last col-4 on to next row
if set col, col, col on a row I get the full-width page
I can set col-4, col-4, col-3 and get the three items on the same row and one bank column
I would expect the col , col, col and col-4, col-4, col-4 I would expect the col and col-4 to be the same width but the col-4 is a few pixels wider
views:
- title: cameras
path: cameras
badges: []
panel: true
cards:
- type: 'custom:bootstrap-grid-card'
cards:
- type: row
cards:
- type: picture-entity
class: col
entity: binary_sensor.shelly_shem_d3b509_over_power
show_state: false
hold_action:
action: more-info
show_name: true
name: Back
camera_image: camera.back
camera_view: live
- type: picture-entity
class: col
entity: sensor.nest_doorbell_chime_time
show_name: true
show_state: false
name: Doorbell
camera_image: camera.front_door
camera_view: live
- type: picture-entity
class: col
entity: sensor.nest_doorbell_chime_time
show_name: true
show_state: true
camera_image: camera.doorbell_chime_image
name: Doorbell Chime
- type: row
cards:
- type: picture-entity
class: col-4
entity: sensor.nest_doorbell_sound_time
show_name: true
show_state: true
camera_image: camera.doorbell_sound_image
name: Doorbell Sound
- type: picture-entity
class: col-4
entity: sensor.nest_doorbell_motion_time
show_name: true
show_state: true
camera_image: camera.doorbell_motion_image
name: Doorbell Motion
- type: picture-entity
class: col-4
entity: sensor.nest_doorbell_person_time
show_name: true
show_state: true
camera_image: camera.doorbell_person_image
name: Doorbell Person
- type: row
cards:
- type: picture-entity
class: col-6
entity: automation.car_presence
show_state: false
hold_action:
action: more-info
show_name: true
camera_image: camera.front_cam2
camera_view: live
name: Front
- type: picture-entity
class: col-5
entity: sensor.nest_doorbell_chime_time
show_name: true
show_state: false
name: Doorbell
camera_image: camera.nest_hello
camera_view: live
Update Bootstrap
Can the Bootstrap version be updated to the latest 5.3.x?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.