Page 1 of 1
CSS: Dynamic width based on text content
Posted: Tue Jun 22, 2021 6:02 pm
by Xander
Is it possible to create a box inside oXygenXML with a dynamic width, based on the text content?
Does
fit-content not work in oXygenXML?
I tried the following:
Code: Select all
conbody{
background-color: #f0f0f0;
padding: 10px;
width: fit-content;
However, the width is still extended to the full width of the page, as shown on the image.
I have also tried with other elements, this does not seem to change the result.
Re: CSS: Dynamic width based on text content
Posted: Wed Jun 23, 2021 7:20 am
by Radu
Hi,
I'm afraid Oxygen's CSS support for rendering XML content in the Author mode does not support the "fit-content" value for "width":
https://www.oxygenxml.com/doc/versions/ ... pport.html
I'm afraid I do not have a good workaround for what you want (showing the background color just under the text without having it span the entire page width).
Regards,
Radu
Re: CSS: Dynamic width based on text content
Posted: Wed Jun 23, 2021 5:16 pm
by Xander
Hi Radu,
Thanks for the quick and informative reply.
And just for further clarification, "min-width" is also not supported is it?
Thanks
Re: CSS: Dynamic width based on text content
Posted: Thu Jun 24, 2021 7:40 am
by Radu
Hi,
Looking at the supported properties table I linked above, both min-width and max-width seem to be supported. How are you using them?
Regards,
Radu
Re: CSS: Dynamic width based on text content
Posted: Thu Jun 24, 2021 10:19 am
by Xander
Hi Radu,
I apologize, I did not take a good look at the supported properties table you had linked.
In this particular case I tried using it with a percentage so that it is a bit more flexible.
Code: Select all
conbody{
background-color: #f0f0f0;
padding: 10px;
min-width: 50%;
}
I also tried using min-width with other selectors which have a colored background, however, that did not work.
Using
max-width in the same and
width work perfectly fine though on the same selectors .
Re: CSS: Dynamic width based on text content
Posted: Thu Jun 24, 2021 12:48 pm
by Radu
Hi,
The min-width works when you also specify a width, otherwise the width is the entire page,
Maybe we can try for example to work with HTML and see how Oxygen and a web browser displays it, in this way if there are differences it means our CSS based rendering engine needs to be fixed:
Code: Select all
<html>
<head>
<title>dsadsa</title>
<style type="text/css">
p{
background-color: #f0f0f0;
padding: 10px;
min-width: 50%;
}
</style>
</head>
<body>
<p>paaram</p>
</body>
</html>
both Oxygen and a web browser display the paragraph background on the entire page width. It's only after I set a " width:100px;" width that the min width starts to be taken into account.
Regards,
Radu
Re: CSS: Dynamic width based on text content
Posted: Thu Jun 24, 2021 2:16 pm
by Xander
Hi Radu,
Thank you for your quick and informative response.
Your HTML example works on my end, however, while testing I noticed that when there is a break (space) in a text (writing a new word), it tends to write it on the following line. This means that the background will not extend.
If a longer word is written, then the background color will extended (as predicted).
I think this really a matter where
fit-content would do what I am looking for, however, I understand that it is not supported yet.
Thank you