Overflow/Display error

[hvorragend]

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser
• And no other expand-fork loaded.

Release with the issue:

Last working release (if known):
Unknown

Browser and Operating System:
Safari/iOS

Description of problem:

There seem to be problems if the text in an entity card becomes too long.

Firstly, the HA-Card and the childrencard grow with it. With "display: block;" instead of "display: grid;" it seems to work.

Secondly, the font size is too large on a smartphone. But only if the friendly names are too long. Tested in Safari under iOS.

Additional information:

no console errors

[hvorragend]

By the way: Why is the title link in color blue?

Until a few days ago I have used this fork https://github.com/clarinetJWD/lovelace-yet-another-expander-card and there is the link colored in primary color

[FoxxMD]

I'm also experiencing this issue. If it helps I am using the card in the Sections view type rather than the default Masonry but I see the issue occur on both types.

[MelleD]

Thanks for reporting. I didn’t changed the font size or the color so this should be reproducible also on the original one.
Currently iam on vacation. So I can check it after (3 weeks) :-).
Currently my expander card title is white.

For your issue interesting I had the other way around with display blocks it didn’t work. I have to check if it really a issue with long friendly names

So closed looks like:

Open:

Could your share your yaml code. Makes it easier to reproduce for me.

[FoxxMD]

You can reproduce by creating any card that renders a very long name for the entity. For instance:

type: custom:expander-card
gap: 0.6em
padding: 1em
clear: false
title: Expander
overlay-margin: 2em
child-padding: 0.5em
button-background: transparent
cards:
  - type: entities
    entities:
      - entity: sun.sun
        name: This is an entity with a very long name that breaks things

The same entities card outside of the expander

I'm not using any custom themes or css

EDIT:

Removing the default CSS values almost fixes things.

Removing padding overlay-margin and child-padding gets closer to normal:

[MelleD]

Ok I will try it. I have good experience to start with 0 default values and then increase it, if needed.
Maybe we should change the default values with a major release.

The second issue with color. I saw I fixed it with card mod, because my PR was not merged in the original repo. I have to check my old PR and have to move it.

Third issue with font size, I have to look into deeper

[FoxxMD]

Overwriting the defaults or adding a note in the documentation about sane defaults sounds like a good idea. Though I think the overflow fix is more than just setting 0 over defaults since it doesn't quite fix things and the actual fix should have the element respecting outside container width.

But these are all small issues that can wait till you get back from vacation! Enjoy.

[MelleD]

Yes the width issue I have to look into.
In the other issue (the person example), I tried to fix this issue here:
https://community.simon42.com/t/accordion-card/24772/30

You can look into the last PR there I added a css style for the layouting.
Do you know if the original card have also this issue with long names? Or just try with 0.11 or 1.0.0 version.

[NeeeeB]

@MelleD I've just switched from the original card to yours, and I can confirm that the overflow bug with long names was already there in the original card.

[MelleD]

Hey @hvorragend

Firstly, the HA-Card and the childrencard grow with it. With "display: block;" instead of "display: grid;" it seems to work.

Where did you try it?
.expander-card did not work

EDIT:

I guess the issue is the second label, when this is too long (see #100). Additional problem is if you use padding.

AND on ios app it looks completely different and nothing is working :(

See here with a smaller label it works:

I think i can fix the case when the second label is not too long with "block grid".

@FoxxMD maybe you can test your cases, if this fix will work for you.

Question:
Who uses padding? I don't use it because it moves the whole heading

[MelleD]

Fixed in 1.2.2

[FoxxMD]

Thanks for the work on getting this fixed! It's almost there...the problem is resolved when when using title property but not when using title-card

EDIT: I see you referenced this in issue 88. 😅

[MelleD]

@FoxxMD yes here we go:
#107

[FoxxMD]

@MelleD that fixed it! Thanks for the continued work on this amazing card ❤️