Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[2.0.6 Dropdown] Dropdown not rendering inside Segment/Label #2711

Closed
Airforce111 opened this issue Jul 23, 2015 · 2 comments
Closed

[2.0.6 Dropdown] Dropdown not rendering inside Segment/Label #2711

Airforce111 opened this issue Jul 23, 2015 · 2 comments
Milestone

Comments

@Airforce111
Copy link

Hellos again~

While dynamically creating elements via JS, which in my case, included a dropdown inside a segment/label, the dropdown fails to render properly, even after refreshing the dropdown js via $(...).dropdown(...);

When adding on: 'click' to .dropdown(...), it fails to process the click event. However, it seems to work with on: 'hover click', although not 100%.

However, while creating the fiddle, I realized that the issue also occurs on statically created elements, as such, the static version is posted here to simplify the code example.
Fiddle: http://jsfiddle.net/Airforce111/40khyfL6/

For reference...

<div id="test">
    <!-- Default Test Case -->
    <div id="record-index-1" class="ui segment">
        <div class="ui top attached label">
            <span>Label Test</span>
            <div class="options ui dropdown top right pointing transparent icon button" style="position: absolute; right: 0em; top: 0.3em;">
                <i class="setting icon"></i> Click Me! Not Working!?
                <div class="menu">
                    <div class="header">Options</div>
                    <a class="item">
                        <i class="edit green icon"></i> Option 1
                    </a>
                    <a class="item">
                        <i class="warning red icon"></i> Option 2
                    </a>
                </div>
            </div>
        </div>        
        <div class="ui items">
            <div class="item">
                <div class="content">
                    <div class="ui header">Test Header</div>
                    <div class="description">Some Random Text Here. Nothing to See.</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Click Fails -->
    <div id="record-index-1" class="ui segment">
        <div class="ui top attached label">
            <span>Label Test</span>
            <div class="options2 ui dropdown top right pointing transparent icon button" style="position: absolute; right: 0em; top: 0.3em;">
                <i class="setting icon"></i> Click Me! Click Event Fails =(
                <div class="menu">
                    <div class="header">Options</div>
                    <a class="item">
                        <i class="edit green icon"></i> Option 1
                    </a>
                    <a class="item">
                        <i class="warning red icon"></i> Option 2
                    </a>
                </div>
            </div>
        </div>        
        <div class="ui items">
            <div class="item">
                <div class="content">
                    <div class="ui header">Test Header</div>
                    <div class="description">Some Random Text Here. Nothing to See.</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Hover/Click Working Somewhat -->
    <div id="record-index-1" class="ui segment">
        <div class="ui top attached label">
            <span>Label Test</span>
            <div class="options3 ui dropdown top right pointing transparent icon button" style="position: absolute; right: 0em; top: 0.3em;">
                <i class="setting icon"></i> Click Me! Hover Event Override Works Somewhat...
                <div class="menu">
                    <div class="header">Options</div>
                    <a class="item">
                        <i class="edit green icon"></i> Option 1
                    </a>
                    <a class="item">
                        <i class="warning red icon"></i> Option 2
                    </a>
                </div>
            </div>
        </div>        
        <div class="ui items">
            <div class="item">
                <div class="content">
                    <div class="ui header">Test Header</div>
                    <div class="description">Some Random Text Here. Nothing to See.</div>
                </div>
            </div>
        </div>
    </div>
</div>
#test {
    padding: 2em;
}
.ui.dropdown {
    font-size: 0.75em;
}
$('.options.ui.dropdown').dropdown({
    direction: 'downward',
    transition: 'slide down'
});

$('.options2.ui.dropdown').dropdown({
    on: 'click',
    direction: 'downward',
    transition: 'slide down'
});

$('.options3.ui.dropdown').dropdown({
    on: 'hover click',
    direction: 'downward',
    transition: 'slide down'
});
@jlukic
Copy link
Member

jlukic commented Jul 23, 2015

This is part of next 2.0.7 release bug fixes. 37ad56b

Dropdown will not render inside a label
https://github.com/Semantic-Org/Semantic-UI/blob/next/RELEASE-NOTES.md#version-207---july-22-2015

Was bad logic used to determine if a click occurred in a multi-select label (which shouldnt open dropdown)

@jlukic jlukic added this to the 2.1 milestone Jul 23, 2015
@jlukic jlukic closed this as completed Jul 23, 2015
@Airforce111
Copy link
Author

Awesome. =D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants