[2.0.6 Dropdown] Dropdown not rendering inside Segment/Label #2711
Description
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'
});