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

Getting real card parameters and using them in Javascript Templates #860

Open
il77781 opened this issue Jul 28, 2024 · 2 comments
Open

Getting real card parameters and using them in Javascript Templates #860

il77781 opened this issue Jul 28, 2024 · 2 comments
Labels
FR Feature Request

Comments

@il77781
Copy link

il77781 commented Jul 28, 2024

Hello.
In the case when some card parameters are set as a percentage (for example, the width or height of the card), the actual parameters will vary depending on the device parameters (in particular, the display resolution) and the browser used.
For example, there may be a situation in which the card will have a larger width (in pixels) on one device, and a smaller one on the other. But the width of a text box containing, for example, the name of an entity will be the same in both cases.
Let's say the width of this text box is less than the width of the card on the first device, but it is larger than the width of the card on the second device.
Respectively, on the first device the entity name will be displayed in full, but not on the second.
I would like to be able (in the case described above) to get the real width of the card on the device and the real width of the text box containing the name of the entity, be able to compare them, and also use the comparison result in Javascript Templates.
For example, for the second case, it would be possible to assign word wrapping to a new line, reduce the font size, or arrange automatic horizontal scrolling of the text. But the most important thing is that all these additional activities should only take place when the width of the text box is larger than the width of the card. That is, for example, I do not need automatic horizontal scrolling of the text or font size reduction in the event that it already fits completely on the card.
To organize what I described above, I apparently need to get the real width values inside Javascript Templates.
More generally, access to more card parameters (as well as its composite and nested elements) inside Javascript Templates is desirable.
Is there even such a possibility? Or maybe it can be provided in future versions?

@il77781 il77781 added the FR Feature Request label Jul 28, 2024
@Mariusthvdb
Copy link
Contributor

you seem to be looking for relative sizing options, which are part of available css options.
Not sure you really need them, as you still are very new to this card, and dont yet grasp all of its possibilities in combination with all that css has to offer.

why don't you try getting acquainted with the css and button-card options first. Please don't create FR's for anything you dont yet really understand.
Again, go to the community for help first.

Please close this FR, there is no need for it

@il77781
Copy link
Author

il77781 commented Jul 30, 2024

@Mariusthvdb, first of all, I would like to say that I have great respect for all developers, as well as those people who help ordinary users here in solving their problems... Accordingly, I do not want to create any additional problems by my actions in any way.
If by contacting the community you mean this page: https://github.com/custom-cards/button-card/discussions then, of course, I visited this page... You can probably also notice what percentage of the messages there have at least some answers, not to mention the answers that have a solution... If you have something else in mind, please provide the appropriate link...
Yes, of course, I'm a beginner, but this does not mean at all that I immediately started writing here without trying to study the issue in more depth. Of course, I tried to solve my questions on my own (and solved most of them).
Or do you think that I, as the most ordinary ordinary user, should learn css on my own at the developer level?
Yes, I have studied the information about em, rem, ex, vw, vh, but it seems to me that this is not exactly what I need - all these units determine the dimensions relative to the parent objects, but I want to understand the size of the text block relative to the size of the card... It seems to me that this is not suitable for solving my problem. If there is anything else, please tell me.
Perhaps the problem is that I did not explain very well what I want to achieve. Probably, I need to try a specific example:
Sample text
The width of the left card is such that the entire text is fully displayed on the card. The width of the right card (and this is the same card) is not enough to place the entire text (this is possible, for example, on another device with a different physical screen resolution) - and in this case I need the text to automatically (without user intervention) "scroll" left and right - this also allows you to see the entire text.
Thus, as I suppose, in the java script of the card it should be possible to obtain the real size of the width of the card and the real size of the width of the text box, then a comparison of these values is required, and then the application of the necessary display option. That is, if the width of the card is sufficient, the text should not "scroll"... That's why I'm asking about the possibility of obtaining the described parameters using a Java script... Of course, if there is some other way to implement my idea (for example, using "clean" css), please tell me... I will be very grateful to you!
I suppose that getting some other actual parameters of the card using java script can be useful for solving some other interesting tasks. That is why I have raised this issue here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
FR Feature Request
Projects
None yet
Development

No branches or pull requests

2 participants