custom-cards / stack-in-card

🛠 group multiple cards into one card without the borders
MIT License
262 stars 24 forks source link

Unable to hide border between two stacked vertical cards #59

Closed mkanet closed 11 months ago

mkanet commented 11 months ago

Checklist:

I am using stack-in-card to combine 2 cards vertically: (Entities card & Bar-card) . However, it's not completely seamless. There’s a divider between the 2 cards.

Note: bar-card entities in the below screenshot are currently hidden. I configured bar-card to hide entities that are 0.0 in value (see my card code below).

Screenshot: image

Below is the card code I'm using. I need help with card-mod to hide the border shown above.

type: custom:stack-in-card
mode: vertical
cards:
  - type: entities
    title: iGPU
    entities:
      - entity: sensor.cpu_gt_core_temperature
        name: Core Temperature
      - entity: sensor.gpu_d3d_memory_dynamic_memory
        name: Dynamic RAM
  - type: custom:bar-card
    severity:
      - from: '0'
        to: '0'
        hide: true
      - from: '1'
        to: '40'
        color: '#007A00'
      - from: '41'
        to: '90'
        color: '#EA9000'
      - from: '91'
        to: '100'
        color: '#C41400'
    entities:
      - entity: sensor.gpu_d3d_usage
        name: iGPU Usage
      - entity: sensor.gpu_video_decode_0_usage
        name: Video Decoder 0
      - entity: sensor.gpu_video_decode_1_usage
        name: Video Decoder 1
      - entity: sensor.gpu_video_processing_0_usage
        name: Video Encoder 0
      - entity: sensor.gpu_video_processing_1_usage
        name: Video Encoder 1
ildar170975 commented 11 months ago

Re-test with a DEFAULT LIGHT theme & post a screenshot.

mkanet commented 11 months ago

Re-test with a DEFAULT LIGHT theme & post a screenshot. image

I just want to remove the separator between the 2 cards that are stacked vertically.

ildar170975 commented 11 months ago

Is it possible that you are still using old version of the card? This line is a BORDER, it appeared after 2022.11. A quick PR was made to rectify the problem - https://github.com/custom-cards/stack-in-card/pull/47 But there were no new releases for this card - i.e. changes from this PR were not merged. Some person compiled a js-file (https://github.com/custom-cards/stack-in-card/pull/47#issuecomment-1303068818) - users can download it and replace the original one (delete gz-file first). But I am afraid that this PR was updated after that js-file was posted - i.e. that js-file (which I am using too) may be outdated )))).

In y observations, my "patched" card still have issues with margin & borders (you may check corr. issues in this repo). Have to use card-mod sometimes.

So, I suggest you: -- download & replace js-file (if it is not done yet); -- in case of issues - use card-mod.

mkanet commented 11 months ago

Is it possible that you are still using old version of the card? This line is a BORDER, it appeared after 2022.11. A quick PR was made to rectify the problem - #47 But there were no new releases for this card - i.e. changes from this PR were not merged. Some person compiled a js-file (#47 (comment)) - users can download it and replace the original one (delete gz-file first). But I am afraid that this PR was updated after that js-file was posted - i.e. that js-file (which I am using too) may be outdated )))).

In y observations, my "patched" card still have issues with margin & borders (you may check corr. issues in this repo). Have to use card-mod sometimes.

So, I suggest you: -- download & replace js-file (if it is not done yet); -- in case of issues - use card-mod.

Thank you! I added the below to my stack-in-card code; which successfully hides the horizontal bar. I didn't want to completely replace the entire addon since I still want to see separators in my other cards that uses stack-in-card.

card_mod:
  style: |
    ha-card {
      --ha-card-border-width: 0;
    }

However... there's still an extra empty space at the bottom of the card; which I'm not sure how to remove (when bar-graph entities are hidden in the bottom card)

It looks like this: Screenshot 08-05-2023 at 03 48 27 PM

NOTE: I asked this question in the card-mod forum since I knew there's also a chance a card-mod would have to be added for the extra empty space (above). However, I'd really appreciate your help here since you already replied to in my post in the forums too.

ildar170975 commented 11 months ago

I didn't want to completely replace the entire addon since I still want to see separators in my other cards that uses stack-in-card.

Imho this is rather controversial issue. The stack-in-card is supposed to HIDE all "separators" between cards by default (unless you intentionally show it). The separator you have is displayed due to a glitch - the card was not ready for changes in 2022.11. The "patched" card is more-or-less removing these "separators" (but still there are some issues I mentioned above).


I added the below to my stack-in-card code; which successfully hides the horizontal bar

Not the perfect solution. You hid the outer border too. Compare:

image

image

May be in your personal custom theme it looks better.


an extra empty space at the bottom of the card; which I'm not sure how to remove

This is not about stack-in-card & I would not suggest to discuss it here. Better to go here: https://github.com/custom-cards/bar-card/issues Possibly we may find a solution for this issue too. Update: check this card-mod solution & this new FR for bar-card.