PDA

View Full Version : htmleditor toolbar buttons are blank



abram.darnutzer
28 Jun 2013, 8:27 AM
I'm using the standard 'htmleditor' object. But, the toolbar buttons are appearing blank. They still work, but they look wrong.

Here is my code:
{
xtype: 'htmleditor',
flex: 1,
itemId: 'text-body',
margin: '5 0 0 0',
width: 621,
fieldLabel: '',
enableColors: false
}

and here is what is showing up:
44615
Any ideas as to why this is happening?

slemmon
1 Jul 2013, 2:35 PM
Are you getting any errors in the network tab of your browser's developer tools? Anything saying resources failed to load? The CSS is loading or you wouldn't even see the styling you're seeing. Are you running the app / example from your filesystem or from a webserver?

abram.darnutzer
2 Jul 2013, 4:33 AM
There are no errors in the Chrome console. No messages about resources not being able to load.

When I look at the html of one of the buttons (the Bold button), here is what it looks like:
<span id="button-1299-btnEl" class="x-btn-button">
<span id="button-1299-btnInnerEl" class="x-btn-inner x-btn-inner-center" unselectable="on">&nbsp;</span>
<span role="img" id="button-1299-btnIconEl" class="x-btn-icon-el x-edit-bold "unselectable="on" style="">&nbsp;</span>
</span>

My CSS could be overwriting the image, but I'm not sure how the image is loaded into the button in the first place. Is it done through the Font, or is the a Background-Image property?

slemmon
2 Jul 2013, 1:13 PM
If the resources are not showing up in your app, but you see them on the examples in the API doc:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.HtmlEditor

you might inspect the elements / css in the API example to see what CSS rules are applied in the example -vs- what you're seeing in your application.

abram.darnutzer
2 Jul 2013, 1:25 PM
Ok, I've found the issue.

Thanks for the help.

forst2094
23 Jun 2014, 10:13 AM
try build app and reload page