#15296 new bug ()

Opened May 25, 2018 02:43PM UTC

Last modified May 25, 2018 02:48PM UTC

ui-icon doesn't show up when there is nothing in the span in Microsoft Edge or Internet Explorer

Reported by: rosskyl Owned by:
Priority: minor Milestone: none
Component: ui.accordion Version: 1.12.1
Keywords: Cc:
Blocked by: Blocking:
Description

The default ui-icon for the accordion doesn't show up unless there is something in the span it creates. Once I put something in the span, it shows up like it should without showing the content in the span. This is only for Microsoft Edge and Internet Explorer. It works as expected in Chrome and Firefox.

https://jsfiddle.net/teq6m1d8/

It doesn't show up right because it doesn't include bootstrap or some jquery ui.

Attachments (0)
Change History (1)

Changed May 25, 2018 02:48PM UTC by rosskyl comment:1

description: Below is a sample of my HTML and css. The default ui-icon for the accordion doesn't show up unless there is something in the span it creates. Once I put something in the span, it shows up like it should without showing the content in the span. This is only for Microsoft Edge and Internet Explorer. It works as expected in Chrome and Firefox. \ \ \ CSS: \ \ {{{ \ .mediumTextSize { \ font-size: medium; \ } \ .specificWidth { \ width: 10%; \ } \ .bold { \ font-weight: bold; \ } \ .unansweredQuestion, .questionRow { \ width: 100%; \ display: table-row !important; \ } \ .horizontalInput { \ display: inline; \ padding: 5px; \ } \ }}} \ \ \ \ HTML: \ \ {{{ \ <table class="table ui-accordion ui-widget ui-helper-reset" id="accordion" role="tablist"> \ <thead class="mediumTextSize"> \ <tr> \ <th class="specificWidth"></th> \ <th>Question Asked</th> \ <th>Timestamp</th> \ <th>Number of answers</th> \ </tr> \ </thead> \ \ <tbody> \ <tr tabindex="0" class="unansweredQuestion ui-accordion-header ui-corner-top ui-accordion-header-collapsed ui-corner-all ui-state-default ui-accordion-icons" id="ui-id-1" role="tab" aria-expanded="false" aria-selected="false" aria-controls="ui-id-2"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span> \ <td>asdfsadfsadf</td> \ <td class="DateTimeString">4/30/2018 3:16:43 PM</td> \ <td>0</td> \ </tr> \ <tr class="suggestedAnswers ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content" id="ui-id-2" role="tabpanel" aria-hidden="true" aria-labelledby="ui-id-1" style="display: none;"> \ <td colspan="4"> \ No answers were suggested. \ \ </td> \ </tr> \ <tr tabindex="-1" class="unansweredQuestion ui-accordion-header ui-corner-top ui-accordion-header-collapsed ui-corner-all ui-state-default ui-accordion-icons" id="ui-id-3" role="tab" aria-expanded="false" aria-selected="false" aria-controls="ui-id-4"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span> \ <td>how do I?</td> \ <td class="DateTimeString">4/30/2018 3:16:21 PM</td> \ <td>2</td> \ </tr> \ <tr class="suggestedAnswers ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content" id="ui-id-4" role="tabpanel" aria-hidden="true" aria-labelledby="ui-id-3" style="display: none;"> \ <td colspan="4"> \ <table class="maxWidth table"> \ <thead> \ <tr> \ <th>Suggested Answer</th> \ <th>Was Selected</th> \ <th>Was Helpful</th> \ <th></th> \ </tr> \ </thead> \ <tbody> \ <tr> \ <td>How do I re-order checks?</td> \ <td><input name="answer.WasSelected.Value" disabled="True" id="answer_WasSelected_Value" type="checkbox" value="true" data-val-required="The Value field is required." data-val="true"><input name="answer.WasSelected.Value" type="hidden" value="false"></td> \ <td></td> \ <td><a class="btn btn-default btn-xs" href="/Admin/QnaItem/Edit/4fed1c02-1f2c-4da6-b4f4-1c06ce496488?qnaId=20b9353b-8c0b-e811-811b-e0071b729401">Edit Question</a></td> \ </tr> \ <tr> \ <td>Can I use Quicken or Quickbooks with Online Banking?</td> \ <td><input name="answer.WasSelected.Value" disabled="True" id="answer_WasSelected_Value" type="checkbox" value="true"><input name="answer.WasSelected.Value" type="hidden" value="false"></td> \ <td></td> \ <td><a class="btn btn-default btn-xs" href="/Admin/QnaItem/Edit/4fed1c02-1f2c-4da6-b4f4-1c06ce496488?qnaId=8b934181-b40b-e811-811b-e0071b729401">Edit Question</a></td> \ </tr> \ </tbody> \ </table> \ \ </td> \ </tr> \ <tr tabindex="-1" class="unansweredQuestion ui-accordion-header ui-corner-top ui-accordion-header-collapsed ui-corner-all ui-state-default ui-accordion-icons" id="ui-id-5" role="tab" aria-expanded="false" aria-selected="false" aria-controls="ui-id-6"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span> \ <td>how do i?</td> \ <td class="DateTimeString">4/30/2018 2:55:23 PM</td> \ <td>2</td> \ </tr> \ <tr class="suggestedAnswers ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content" id="ui-id-6" role="tabpanel" aria-hidden="true" aria-labelledby="ui-id-5" style="display: none;"> \ <td colspan="4"> \ <table class="maxWidth table"> \ <thead> \ <tr> \ <th>Suggested Answer</th> \ <th>Was Selected</th> \ <th>Was Helpful</th> \ <th></th> \ </tr> \ </thead> \ <tbody> \ <tr> \ <td>How do I re-order checks?</td> \ <td><input name="answer.WasSelected.Value" disabled="True" id="answer_WasSelected_Value" type="checkbox" checked="checked" value="true" data-val-required="The Value field is required." data-val="true"><input name="answer.WasSelected.Value" type="hidden" value="false"></td> \ <td><input name="answer.IsHelpful.Value" disabled="True" id="answer_IsHelpful_Value" type="checkbox" value="true" data-val-required="The Value field is required." data-val="true"><input name="answer.IsHelpful.Value" type="hidden" value="false"></td> \ <td><a class="btn btn-default btn-xs" href="/Admin/QnaItem/Edit/4fed1c02-1f2c-4da6-b4f4-1c06ce496488?qnaId=20b9353b-8c0b-e811-811b-e0071b729401">Edit Question</a></td> \ </tr> \ <tr> \ <td>Can I use Quicken or Quickbooks with Online Banking?</td> \ <td><input name="answer.WasSelected.Value" disabled="True" id="answer_WasSelected_Value" type="checkbox" checked="checked" value="true"><input name="answer.WasSelected.Value" type="hidden" value="false"></td> \ <td><input name="answer.IsHelpful.Value" disabled="True" id="answer_IsHelpful_Value" type="checkbox" value="true"><input name="answer.IsHelpful.Value" type="hidden" value="false"></td> \ <td><a class="btn btn-default btn-xs" href="/Admin/QnaItem/Edit/4fed1c02-1f2c-4da6-b4f4-1c06ce496488?qnaId=8b934181-b40b-e811-811b-e0071b729401">Edit Question</a></td> \ </tr> \ </tbody> \ </table> \ \ </td> \ </tr> \ </tbody> \ </table> \ }}} \ → The default ui-icon for the accordion doesn't show up unless there is something in the span it creates. Once I put something in the span, it shows up like it should without showing the content in the span. This is only for Microsoft Edge and Internet Explorer. It works as expected in Chrome and Firefox. \ \ https://jsfiddle.net/teq6m1d8/ \ \ It doesn't show up right because it doesn't include bootstrap or some jquery ui. \