Where can I style a "Text Box" item added from the RoboHelp 2020 menu bar?

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?

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.

By the way: is there any command to place a div box in a topic in Editor's view? Or furthermore, add a specific class to that HTML Elements menu?
We're coworking with relatively newbies in HTML/CSS, so switching to the code sheet and adding a div box by typing it into the right place is somewhat intimidating for some of them. We have a lot of predefined div styles, and of course, everyone can add a specific style from the right panel. But it would be great to add the often used divs to a menu for more convenience and faster editing.

Also remember @Stefan Gentz suggestion to create your own style (div.textbox) and that way you don't run in to the problem with inheriting the RH text-box style.

Nice!

Thanks a lot - where did you find it? I was searching in the default.css from the skin we use but found nothing like that.

This is the css for the text-box style.

.text-box {
    float: left;
    background-color: #ffffff;
    width: 200px;
    height: 200px;
    border: solid 1px #000000;
    padding: 5px;
}

If you replicate that for your style it should work exactly the same way. I don't think it needs any javascript for the wrapping - that's just what float: left (or right) does.

Thanks, Stefan.

But if I make my own div.textbox class - how can it work like the one that comes with the RH tools? The JavaScript surely aims only to the div.text-box and will not be applied to any other div class.

And what exactly are the features for that predefined text box? Why are there no margins defined so surrounding elements will flow smoothly around it?

The User Guide doesn't tell anything about that element other than its name and where to find it in the tool bar.

Now that I found it somewhat accidently I'm keen to understand the concept behind it. Perhaps we could use it in some places... 😉

Thanks for testing and contributing your findings here!

No, I don't think that it is a bug - this class is used by JavaScript, and shows those attributes in the editor which are explicitly defined in a place other than the default.css file (like other classes that are used for special JavaScript functions, e.g. the drop-down text).

By adding styles in the Editor (which end up ín a userstyles.css file in HTML output), the original styles are overruled, als always in CSS. So the output shows your styling, and also opening the topic in a code editor with HTML preview (such as Visual Studio Code with a plug-in) should show the styles defined in the userstyles.css file.

But in the RoboHelp Editor, only the styles that aren't predefined are the ones you see as defined in the userstyles.css file. Those defined by RoboHelp are not overruled in the Editor's preview.

Of course you may think of it as a bug -  RoboHelp should just give the user some handles to style these functions in the Editor.

You can request features and report issues here: https://tracker.adobe.com/

On the plus side the styling isn't hard-coded inline any more. 😛

What's particularly bizarre (and a bit troubling) is that if styling elements are added to a CSS, the output applies those elements, but the RH authoring editor does not. 

Here I applied the following in my stylesheet (manually added in the source editor mode)—once you do this, it becomes visible and editable in the RH style manager.

div.text-box {
  border: dashed 4px #CF7575;
  border-radius: 12px;
  color: #CF7575;
}

But check this out: in the RH editor, some of the styling gets applied (border radius, text color) and some doesn't (border color, border width). But when you produce an output (or view the source file in a browser), the styling does get applied in it's entirety. (See below, left to right: RH editor, CHM output, Frameless output).

So much for WYSIWYG. Smells like a bug to me. But at least you can style the border, you just have to depend on other tools to help you see the result before publishing.