Hide kendoUI text editor button

Question

I’m using the kendoUI text editor

I need to remove the last button of the editor (insert image).

The rendered tag is the last, which has inside the image button.

I tried something like:

kendo-toolbar-renderer:last-of-type{
    display: none!important;
}

I also tried to:

kendo-toolbar-renderer:last-child{
    display: none!important;
}

But still appears the button in the editor, some alternative?

Answer 1

The CSS rule that’s actually there is this, but notice that they put a display:inline-block right in the tag overwriting what’s in the CSS. What I point out to you is to make a stronger rule like

.kendo-toolbar.k-toolbar .kendo-toolbar-renderer:last-of-type{
    display: none !important;
}

If this does not work a trick is to put the CSS after the JS is loaded for that you will have to put there at the end of the document as the last tag before the closing of the </body> a tag <style> to test if so this CSS will overwrite what was rendered before.

It would look something like this...

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
    </script>

    <style>
        .kendo-toolbar.k-toolbar .kendo-toolbar-renderer:last-of-type {
            display: none !important;
        }
    </style>
</body>
</html>

But there is a side effect of putting the CSS at the end of the document that you can read in this other question It’s good practice to insert CSS tags at the end of the body of Body?