Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS Class conflict with Lovelace Custom Weather Card #4

Open
rpitera opened this issue Aug 22, 2018 · 3 comments · May be fixed by #21
Open

CSS Class conflict with Lovelace Custom Weather Card #4

rpitera opened this issue Aug 22, 2018 · 3 comments · May be fixed by #21

Comments

@rpitera
Copy link

rpitera commented Aug 22, 2018

This was mentioned in the forum thread but I just thought I'd add it here as a reminder. Please change the CSS class "day" to "calendar_day" in your next update. Thanks!

Otherwise, this is the calendar I always wanted when HA first added Google Calendar support. Thanks for making it a reality!!
@gadgetchnnel
Copy link

Alternatively, it should use the Shadow DOM so that the CSS is encapsulated and won't conflict with other cards. Something like this:

if (!this.content) {
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.innerHTML = `
          <style>
          ... CSS here - cut for brevity ...
          </style>
      `;
      const card = document.createElement('ha-card');
      card.header = this.config.name;
      this.content = document.createElement('div');
      this.content.style.padding = '0 16px 16px';
      card.appendChild(this.content);
      this.shadowRoot.appendChild(card);
      moment.locale(hass.language);
    }

Then, in the updateHtmlIfNecessary method, exclude the this.content.innerHTML = code which sets the CSS.

@speke
Copy link

speke commented Oct 12, 2018

Hello
How you do that ?
change the CSS class "day" to "calendar_day"
thank's

@rpitera
Copy link
Author

rpitera commented Oct 12, 2018

Open the calendar-card.js file in the directory and edit it. The two lines you are looking for are line #74 and #158.

@Barma-lej Barma-lej mentioned this issue Nov 15, 2018
Open
@Designer023 Designer023 linked a pull request Nov 18, 2018 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Class name updated to remove conflicting name
3 participants
@gadgetchnnel @rpitera @speke