TinyEditor Toolbar hidden

Hi Alex,

In addition to my colleague’s answer, a proper fix is added to the extensions repository.

You can check out the Code from GitHub and compile the Wisej.Web.Ext.TinyEditor project and add it to your projects as an Assembly reference while you wait for the official NuGet release!

HTH,
Alaa

In order to change the toolbar, you will need to edit it via css.
In the toolbox, search for “StyleSheet”. Drag and drop the stylesheet on to the TinyEditor in the designer.
Because the stylesheet is an invisible control, you’ll have to look in the component tray (right below the designer) to see it. (See attached picture).
Clicking on the stylesheet will bring up the properties in the Properties window. Click on “Styles” and a code editor will pop up. Here you can type css. (see attached picture).

A quick way to do it is to simply make the overflow visible:


.tinyeditor-header
{
overflow: visible!important;
}


However, then the background of the toolbar won’t show up for the overflowing icons.

A better solution is to increase the height of the toolbar and set the background to repeat. The initial height was 31px, so I just doubled it to 62px.

.tinyeditor-header
{
height: 62px!important;
background-repeat: repeat!important;
}


Additional notes: If you press F12 to open the developer tools in the browser, you can see the names of the css classes that make up the TinyEditor. I used .tinyeditor-header Depending on what other settings you need to change, .tinyeditor .tinyeditor-control .tinyeditor-divider and .tinyeditor-footer may be relevant.
Also, make sure to include !important to make sure that the css you write overrides the default css.

Hi Alex,

We’re currently looking at your issue and we’ll report back ASAP!

Best,
Alaa

//