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.

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

Unable to hide border between two stacked vertical cards #59

Closed
2 tasks done
mkanet opened this issue Aug 5, 2023 · 5 comments
Closed
2 tasks done

Unable to hide border between two stacked vertical cards #59

mkanet opened this issue Aug 5, 2023 · 5 comments
Labels
bug Something isn't working

Comments

@mkanet
Copy link

mkanet commented Aug 5, 2023

Checklist:

  • I updated to the latest version available
  • I cleared the cache of my browser

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
@mkanet mkanet added the bug Something isn't working label Aug 5, 2023
@ildar170975
Copy link

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

@mkanet
Copy link
Author

mkanet commented Aug 5, 2023

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
Copy link

ildar170975 commented Aug 5, 2023

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.

@mkanet
Copy link
Author

mkanet commented Aug 5, 2023

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
Copy link

ildar170975 commented Aug 6, 2023

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.

@mkanet mkanet closed this as completed Aug 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants