Bullet list & grid first item bullet missing or misaligned.

[Francis Mercier]

Hi, there seems to have an issue when using a grid in a bullet list.
The first item bullet does not appears.
Is there something I can do to address this issue ?
I am welcoming any ideas.
Thank you.


Scenario #1
Accordion containing a bullet list.
Each item of the bullet list is a two column grid.
All bullets are showing but first item bullet is not aligned:
Fiddle: https://jsfiddle.net/20Lnm0m8/

Code

<div class="ui styled fluid accordion">
    <div class="title active"> <i class="dropdown icon"></i>
Header <a id="lnkTest" class="stoppropagation" style="float:right" href="http://www.google.ca">Open</a>
    </div>
    <div class="content active">
        <div class="ui bulleted list">
            <div class="item">
                <div class="ui grid">
                    <div class="six wide column header">Sub header #1</div>
                    <div class="six wide column">Value one</div>
                </div>
            </div>
            <div class="item">
                <div class="ui grid">
                    <div class="six wide column header">Sub header #2</div>
                    <div class="six wide column">Value number two</div>
                </div>
            </div>
            <div class="item">
                <div class="ui grid">
                    <div class="six wide column header">Sub header #3</div>
                    <div class="six wide column">Value number 3</div>
                </div>
            </div>
        </div>
    </div>
</div>

Scenario #2
I got rid of the Accordion to see if the problem persists with a more simple use.
First bullet is not misaligned. It is simply missing.
Fiddle: https://jsfiddle.net/bgy0bn4p/

Code

<div class="ui bulleted list">
    <div class="item">
        <div class="ui grid">
            <div class="six wide column header">Sub header #1</div>
            <div class="six wide column">A value</div>
        </div>
    </div>
    <div class="item">
        <div class="ui grid">
            <div class="six wide column header">Sub header #2</div>
            <div class="six wide column">Another value</div>
        </div>
    </div>
    <div class="item">
        <div class="ui grid">
            <div class="six wide column header">Sub header #3</div>
            <div class="six wide column">Last value</div>
        </div>
    </div>
</div>

[Francis Mercier]

I found a workaround, which is to add a hidden first item like this: 

Code 

<div class="item" style="display: none"/>

This works well but in Scenario #1, where the bullet list is in an Accordion, this create an empty space.

To remove the empty space, I used opacity and margin-top with a negative margin instead.

(I could have kept display:none and added the negative margin-top to the second element but I felt compelled to have my fix all in the first item.)

Code

<div class="item" style="opacity:0;margin-top:-20px;" ></div>

If anybody have a better solution, I am still interested.

Thank you.