Copy link to clipboard
Copied
With RH 2020, the menu bar of a topic shows another item to add: "Text Box".
By adding it, the code sheet shows this:
<div class="text-box">
<p> containing the text in the box </p>
</div>
That's a nice feature. The square box contains my text, shows a solid 2 px border, and obviously is set up for the following content (headlines, paragraphs) to flow around it.
But I couldn't find a way to style that box, e.g. the height/width, margins or border width or colors. Seems that this div class is a RoboHelp thing (like the drop-down text box which is made of a <div class="droptext">) to be controlled by JavaScript.
But sure there must be some handles to style it?!
Yes, the default design of .text-box is defined in the output in /template/styles/topic.min.css with this definition:
.text-box {
float: left;
background-color: #ffffff;
width: 200px;
height: 200px;
border: solid 1px #000000;
padding: 5px
}
You can override it with your custom CSS, however removing attributes (e.g., height) makes the browser fall back to the definition coming from topic.min.css.
@gb92818477 wrote:
(…) Flexible height and width are done with no explicit definition. (…)
The default CSS value for width and height is auto
, not empty
.
Not declaring width and height in your custom CSS does not "remove" the existing definition. That's not how CSS works. Not declaring it, just keeps the original definition.
You need to declare both width and height in your custom CSS. So, if you want to make the text-box flexible you need to override the default values coming from the skin (20
...It seems to create a div when you place the cursor in an empty paragraph and click on the div style in the Styles panel. I couldn't figure out a way to apply it to an existing paragraph though.
Assuming you've created a div style in your stylesheet of course. Otherwise the Div Styles section will be blank.
Copy link to clipboard
Copied
I'm not sure why you're trying to next a div inside a p? Normally when you style text inside a paragraph you use a span.
Copy link to clipboard
Copied
Now that we got all the handles to style the Text Box ourselves the only question that's left from @AthensSlim is how we could get those styles show up in the RoboHelp editor view.
What about that, @Stefan Gentz: Should we open a bug at tracker.adobe.com?
Copy link to clipboard
Copied
Yes, makes sense to me.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
By the way, you do not need to wait for Adobe to change this.
In fact, you can simply customize how a text box looks like yourself by adding the corresponding definition in your CSS. Just "unset" the default definition defined by RoboHelp for the editor and preview and then add your own div.text-box {}
with your own definitions:
body.cke_editable .text-box,
.previewbody .text-box {
float: unset;
background-color: unset;
width: unset;
height: unset;
border: unset;
padding: unset;
}
div.text-box {
/* define what ever you want */
}
Cheers!