CSS: Dynamic width based on text content

Xander · Post by **Xander** » Tue Jun 22, 2021 6:02 pm

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.

Post by **Radu** » Wed Jun 23, 2021 7:20 am

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

Xander · Post by **Xander** » Wed Jun 23, 2021 5:16 pm

Hi Radu,

Thanks for the quick and informative reply.

And just for further clarification, "min-width" is also not supported is it?

Thanks

Post by **Radu** » Thu Jun 24, 2021 7:40 am

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

Xander · Post by **Xander** » Thu Jun 24, 2021 10:19 am

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 .

Post by **Radu** » Thu Jun 24, 2021 12:48 pm

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

Xander · Post by **Xander** » Thu Jun 24, 2021 2:16 pm

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

CSS: Dynamic width based on text content

CSS: Dynamic width based on text content

Re: CSS: Dynamic width based on text content

Re: CSS: Dynamic width based on text content

Re: CSS: Dynamic width based on text content

Re: CSS: Dynamic width based on text content

Re: CSS: Dynamic width based on text content

Re: CSS: Dynamic width based on text content