Skip to content

Add width property to light card to fix #3964#3972

Merged
bramkragten merged 3 commits into
home-assistant:devfrom
shbatm:patch-light-card-title
Oct 18, 2019
Merged

Add width property to light card to fix #3964#3972
bramkragten merged 3 commits into
home-assistant:devfrom
shbatm:patch-light-card-title

Conversation

@shbatm
Copy link
Copy Markdown
Contributor

@shbatm shbatm commented Oct 9, 2019

Add a width property to the CSS for a light card's name/title box. Without a width set, it is wrapping the text on long names too soon with plenty of room to spare in the card.

This is to fix issue #3964.

@bramkragten
Copy link
Copy Markdown
Member

I suggest to use:

    bottom: 16px;
    box-sizing: border-box;
    text-align: center;
    width: 100%;
    padding: 0 16px;

@bramkragten
Copy link
Copy Markdown
Member

And remove:

          left: 50%;
          transform: translate(-50%);

@shbatm
Copy link
Copy Markdown
Contributor Author

shbatm commented Oct 10, 2019

@bramkragten -- Works for me in DevTools, will push the change here shortly.

@@ -213,9 +213,12 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
.name {
position: absolute;
top: 160px;
Copy link
Copy Markdown
Member

@bramkragten bramkragten Oct 10, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be deleted as we now have a bottom instead of a top

@@ -213,9 +213,12 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
.name {
position: absolute;
top: 160px;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
top: 160px;

@shbatm
Copy link
Copy Markdown
Contributor Author

shbatm commented Oct 18, 2019

Updated. Sorry, missed the last comment

@bramkragten bramkragten merged commit 5a957c3 into home-assistant:dev Oct 18, 2019
@bramkragten bramkragten mentioned this pull request Oct 23, 2019
@github-actions github-actions Bot locked and limited conversation to collaborators Jul 6, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants