card disordered

[tempo3]

Hello, the style of the card looks disordered (see attachment). The installation was done via HACS. The functionality is given as described, only the look is not as expected. This problem occurs in the browser, in the app, on iphone, ipad, on Mac as well as on windows ...

[Kedryn]

For me too, but in a different way

[niemyjski]

What do you mean by disordered? I think we sort them by the last motion.

[Kedryn]

I think he meant that the active camera streaming is too low on the right, leaving a lot of space on the top.
For me, both camera list and camera streaming are too right, starting in the middle, wasting half screen of space and putting scroll bars on bottom

[niemyjski]

Ahh I can’t say I’ve seen this, any chance you could dig into this and submit a pr?

…

Sent from my iPhone

On Oct 22, 2020, at 2:40 AM, Kedryn ***@***.***> wrote:  I think he meant that the active camera streaming is too low on the right, leaving a lot of space on the top. For me, both camera list and camera streaming are too right, starting in the middle, wasting half screen of space and putting scroll bars on bottom — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[tempo3]

hi, same here. When I pull the browser window wider, the camera picture is somewhere in the middle. In other words, the cam picture is not where it should be according to the description. sorry - what does pr mean?

[niemyjski]

Thanks for the additional information. It means Pull request.

[fefris]

assume this has been abandoned as a project? Given this is issue is still open and not resolved. Just installed this via hacs and have the same distortion.

[niemyjski]

Feel free to submit a pr with a fix and we'll merge it. I haven't ran into this issue....

[niemyjski]

Has anyone seen this issue in the latest releases? Have you been able to fix it if so?

[Cagiva-Raptor]

For me too, but in a different way

I experience the same, for me it is because the style for the class column has a max-width of 500px.

can be fixed by altering this:
.column {
flex: 1 0 0px;
max-width: 2000px; /* instead of 500px */
min-width: 0px;
}

or

#columns {
display: flex;
flex-direction: column-reverse; /* instead of row */
justify-content: center;
margin-left: 4px;
margin-right: 4px;
}

[niemyjski]

I think the flexbox change makes the most sense, any chance for a pr for this? Thanks again for following up with solutions / more info.

[Iceman248]

Where does the below code go?

`can be fixed by altering this:
.column {
flex: 1 0 0px;
max-width: 2000px; /* instead of 500px */
min-width: 0px;
}

or

#columns {
display: flex;
flex-direction: column-reverse; /* instead of row */
justify-content: center;
margin-left: 4px;
margin-right: 4px;
}`

[Cagiva-Raptor]

Where does the below code go?

`can be fixed by altering this: .column { flex: 1 0 0px; max-width: 2000px; /* instead of 500px */ min-width: 0px; }

or

#columns { display: flex; flex-direction: column-reverse; /* instead of row */ justify-content: center; margin-left: 4px; margin-right: 4px; }`

In a custom css file

[niemyjski]

Can one of you please test this out and create a pr for this.

[Iceman248]

.column {
flex: 1 0 0px;
max-width: 2000px; /* instead of 500px */
min-width: 0px;
}

How do you put it in there? What goes after this?

card_mod:

I put it in like this, didn't do anything.

card_mod:
style: |
ha-card {
display: flex;
flex-direction: column-reverse;
justify-content: center;
margin-left: 4px;
margin-right: 4px;
}

[niemyjski]

@Iceman248 I don't think they were putting this in card_mod but directly in the components source.