Code Block widget does not look good

[stpaultim]

The code block widget in comments WYSIWYG is getting cut off. It looks bad and is a little confusing, because I can't see all the text.

[wesruv]

This is an issue with CKEditor issue, I've fixed it by targeting the div that is responsible for the dropdown and making it wider, but it might be worth making a fix for CKEditor.

[jenlampton]

@wesruv where did you make your fix? Can we have the codez for the forum site? :) And yes - good idea about submitting an upstream fix to the folks at CKE.

[wesruv]

Here's my CSS hack, many brain cells died trying to keep the styles pane open long enough to get the CSS selector.

The [class] thing is a little hack to give it a specificity bump without making a more complex selector.

.cke_combopanel_styles[class] {
  width: 20em;
}

I think the real fix would be figuring out how wide you can make it without making it go off the screen, which would involve JS.

[jenlampton]

@wesruv I'm having a few issues:

1) which module/theme do I put this in? Since the editor appears in both the seven (admin) theme and the Forum (front-end) theme, do I need to add it to both? I tried to add it into editor.js, but since that loads the stylesheet in the iFrame that wasn't working to target the buttons outside it.

2) I'm not seeing any selector named .cke_combopanel_styles, and I'm not seeing any changes in the width of the drop-down. If I change the selector to .cke_combo__styles[class] then I can see the Style button getting wider, but not the panel of options. How did you get a selector for the panel of options? It's possible it's changed since you wrote this snippet.

[wesruv]

@jenlampton for number 2, I spent at least 15 minutes finding the right place to put a JS breakpoint, it hurt my soul. Then when the DOM was paused I could inspect the dropdown. It could change, but I kinda doubt it? Sounds like maybe just a specificity issue?

Per 1, dumb answer, BOTH! Better answer... probably in a module that tags along with long text fields. I can take a look at this tomorrow and see if I can suss out something that feels right.

[wesruv]

So the class is definitely .cke_combopanel__styles to target the one dropdown. Messing around with it further I think we'll need theme specific CSS, because we'll have to take into account the specific layout.

The combopanel div is right before the end body tag, so there isn't a way to position in relation to CKEditor without JS, and I don't know if we can hook in to theirs without hacking the files.

There are currently the default styles, so if you want to override anything in the element style, make sure you use important.

I'm low on time through BADCamp, but if this hasn't been solved by then I could borrow your local and hack on that?

Also, I'd like to say, I am not a fan of how this thing is built. It is a hot mess if you need to fix issues like this :(

[wesruv]

I just reread that and it's unclear, by "I am not a fan of how this thing is built. It is a hot mess", I mean CKEditor.

It's literally had me thinking about how hard it'd be to make a completely new HTML/CSS UI for the functional JS API.

sobad #hotmess #wtfmate

[stpaultim]

Confirmed that this is still an issue.

[stpaultim]

https://github.com/backdrop-ops/forum.backdropcms.org/issues/76 Might be a solution to this problem.

[ghost]

Made a PR to fix this: https://github.com/backdrop-ops/forum.backdropcms.org/pull/118