Fabric UI component not showing in IE, help!

%3CLINGO-SUB%20id%3D%22lingo-sub-332880%22%20slang%3D%22en-US%22%3EFabric%20UI%20component%20not%20showing%20in%20IE%2C%20help!%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-332880%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3EI%20have%20created%20a%20bottom%20placeholder%20which%20contains%20a%20Callout%20component.%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20components%20looks%20and%20works%20right%20in%20chrome%20and%20FF%20but%20it%20doesn't%20even%20renders%20in%20IE%20nor%20Edge%3A%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20is%20how%20looks%20in%20chrome%20and%20ff%3A%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22ff.PNG%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F72320i389E5518A8F80108%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22ff.PNG%22%20alt%3D%22ff.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAnd%20this%20is%20what%20IE%20shows%20(both%20edge%20and%20ie%2011)%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22ie.PNG%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F72321iF50E4AA71232FD5F%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22ie.PNG%22%20alt%3D%22ie.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EIn%20the%20console%20I%20can%20see%20that%20the%20component%20is%20not%20even%20rendered%20to%20the%20html.%20The%20div%20ms-textAlignCenter%20should%20contains%20the%20component%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22console.PNG%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F72322i2B74E8C57B40DB8F%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22console.PNG%22%20alt%3D%22console.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhat%20is%20happening%3F%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20code%20is%20this%3A%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CPRE%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Ediv%3C%2FSPAN%3E%20%3CSPAN%3EclassName%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22ms-Grid-col%20ms-sm12%20ms-md4%20ms-lg3%22%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Ediv%3C%2FSPAN%3E%20%3CSPAN%3EclassName%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22ms-textAlignCenter%22%3C%2FSPAN%3E%20%3CSPAN%3Eref%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7Bthis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3E_menuButtonElement%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7Bthis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Estate%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Ecurrent%3C%2FSPAN%3E%3CSPAN%3E%20!%3D%20%3C%2FSPAN%3E%3CSPAN%3Enull%3C%2FSPAN%3E%3CSPAN%3E%20%3F%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Espan%3C%2FSPAN%3E%20%3CSPAN%3Eid%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22toggleCallout%22%3C%2FSPAN%3E%20%3CSPAN%3EclassName%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3CSPAN%3Estyles%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EbuttonCallout%3C%2FSPAN%3E%3CSPAN%3E%7D%20%3C%2FSPAN%3E%3CSPAN%3EonClick%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7Bthis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3E_onShowMenuClicked%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Eimg%3C%2FSPAN%3E%20%3CSPAN%3Esrc%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7Bthis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Estate%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Ecurrent%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eicon%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3CSPAN%3Eimg%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%20%3CSPAN%3E%7Bthis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Estate%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Ecurrent%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Ename%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Espan%3C%2FSPAN%3E%20%3CSPAN%3EclassName%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22ms-Icon%20ms-Icon--ChevronDownMed%20verChevronIcon%22%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3CSPAN%3Espan%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3CSPAN%3Espan%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3A%20%3C%2FSPAN%3E%3CSPAN%3Enull%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%3CSPAN%3Ediv%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%3CSPAN%3Ediv%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FPRE%3E%3C%2FDIV%3E%3CP%3EAny%20ideas%20why%20this%20is%20happening%3F%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EUPDATE%3A%20I%20debugged%20the%20code%20and%20found%20that%20in%20%7Bthis.state.current.name%7D%20current%20is%20empty%20and%20IE%20doesn't%20render%20the%20component.%20The%20strange%20is%20that%20chrome%20and%20ff%20does.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBest%20regards%3C%2FP%3E%3CP%3EAmerico%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-332880%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Highlighted
Regular Contributor

Hi,

I have created a bottom placeholder which contains a Callout component. 

The components looks and works right in chrome and FF but it doesn't even renders in IE nor Edge: 

This is how looks in chrome and ff: 

ff.PNG

 

And this is what IE shows (both edge and ie 11):

ie.PNG

In the console I can see that the component is not even rendered to the html. The div ms-textAlignCenter should contains the component:

console.PNG

 

What is happening? 

The code is this: 

<div className="ms-Grid-col ms-sm12 ms-md4 ms-lg3">
<div className="ms-textAlignCenter" ref={this._menuButtonElement}>
{this.state.current != null ?
<span id="toggleCallout" className={styles.buttonCallout} onClick={this._onShowMenuClicked}>
<img src={this.state.current.icon}></img> {this.state.current.name}
<span className="ms-Icon ms-Icon--ChevronDownMed verChevronIcon"></span></span>
: null}
</div>
</div>

Any ideas why this is happening? 

 

UPDATE: I debugged the code and found that in {this.state.current.name} current is empty and IE doesn't render the component. The strange is that chrome and ff does.

 

Best regards

Americo

 

0 Replies