Develop Reference

Framework7 Stepper buttons not working

I inserted a stepper into a mobile webapp based on Framework7:
<div class="stepper stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
However, the two plus/minus buttons for in/decreasing the value do not work...do they need to be initialized? Or am I supposed to write the onclick handlers for these buttons myself?
(Of course, I looked into the Framework7 kitchen sink examples - there I found no indication for manual onclick handling; and the stepper is placed inside a form, and the app is properly initialized and works well, otherwise;-)

I think I worked it out: experimenting with a multipage app, I had my <div class="page"> wrapped inside a <div class="pages"> element - and this seems to have interfered with the stepper initialization.
As soon as I removed the <div class="pages"> (leaving only a single page inside a <div class="page">), the stepper buttons worked.

Checkbox next to collapsable details summary in ng-repeat

I want to place a checkbox next to the expandable summary of a details element which is inside a ng-repeat.
It all looks fine initially, but when I click on the expand arrow, the checkbox gets places inside the summary instead of next to the arrow. The checkbox must be inside the ng-repeat because I need the $index in my checkbox ng-click function:
<div ng-repeat="n in ctrl.array track by $index">
<input type="checkbox" style="display: inline-block"
ng-model="ctrl.checked[$index]" ng-click="ctrl.setSelected($index)">
<details style="display: inline-block">
<summary>Display something (element {{$index + 1}})</summary>
<iframe></iframe>
</details>
</div>

I found a solution. I just have to use
style="float: left"
for the input element. That's it. No further styling of the details element needed.

UI Dropdown Performance Issue with large Select Dropdown

I'm working with Semantic UI dropdowns, and I need to create a dropdown with around 3000 options in it. The dropdown works very well, except for one case. If the user clears out the search text, the dropdown completely locks up. I believe it's because it's trying to reload all the elements.
I've looked through the settings (http://semantic-ui.com/modules/dropdown.html#/settings) that are available for the dropdown, but nothing stands out in change the way it handles reloading all the elements.
Any advice would be greatly appreciated.
HTML:
<div class="ui fluid search selection dropdown">
<input type="hidden" name="security_group"></input>
<i class="dropdown icon"></i>
<div class="default text">Select Security Group</div>
<div class="menu">
<j:while test="${reference.next()}">
<div class="item" data-value="${reference.sys_id}">${reference.u_name}</div>
</j:while>
</div>
</div>
Javascript:
$(document).ready(function(){
$(".ui.fluid.search.selection.dropdown").dropdown();
$(".ui.fluid.search.selection.dropdown").width("100%");
});

Show and hide different contents with angularjs ng-show / ng-hide

I am new with angularjs and struggling to make some logic for Showing and hiding different Div's using ng-show and ng-hide based on different click.
PLUNKER
View 1:
<div ng-hide="section1">
<select>
<option>Select List 1</option>
<option>Select List 2</option>
</select>
</div>
<div ng-hide="section1">
<ul>
<li ng-repeat="name in names">{{name.item}}</li>
</ul>
<button type="button" ng-click="section1=!section1">Edit</button>
</div>
Initially it shows a Dropdown, some list Item and Edit button
Clicking on Edit button Everything hides and shows View 2
View 2:
<div ng-show="section1">
<button type="button" ng-click="section2=!section2">+ Create New Item</button>
</div>
<div ng-show="section1">
<ul>
<li ng-repeat="name in names">
<input type="text" ng-model="name.item">
</li>
</ul>
<button type="button" ng-click="section1=!section1">Save</button>
</div>
On view 2 There is a button "Create New item" , List of Input fields with same value of view 1's list items and a save button.
This view 2 is basically edit mode of view 1.
Upto now works fine.
Problem: If I click "+Create new item", "View 2" Should Hide and "View 3" should Open.
View 3 Contains some blank input list and "Save button".Clicking on "save button" Hide "View 3" and again open "View 1".
View 3
<div ng-show="section2">
<ul>
<li ng-repeat="name in names">
<input type="text">
</li>
</ul>
<button type="button" ng-click="section2=!section2">Save New List</button>
</div>
I am struggling to manage 3 different view based on different button click with ng-show and Hide. It's not showing and hiding properly from clicking "+create new button".
Is this possible to make it work perfectly with ng-show & ng-hide only ?
Is there any better way to handle ?
Any help will be appreciated.

A better way to handle what you're trying to do is to have a variable that holds the index of the current section. Then, you could use something like ng-show="currentSection === 1" which I think would be a little more straight forward.
Then your click action could look more like ng-click="currentSection = 1". That will show all elements with ng-show="currentSection === 1".
Does that help any?

I have modified your plunker to fix your issue. You need to use both variable in ng-show
ng-show="section1 && !section2"
http://plnkr.co/edit/rdKIT4leGM9U7BNoE01B?p=preview
There are better ways to achieve what you are trying to achieve.
Try ng-switch for example
https://docs.angularjs.org/api/ng/directive/ngSwitch

What could make text on dojo input/select on top of everything?

I have a css rendered menu (ul li...etc), what beneath is a stack of dijit component rendered by dojo. The problem is showing in the image below, which only happens on IE7, but works fine on IE8/9, firefox and chrome.
The layout of the dijit components(border, style) are all under the menu, but only user entered text is on TOP OF EVERYTHING.
I heard about window object is always on top of every windowless components, that would may sense that the is on top of ui..li menu, however, for testing purpose I create a plain object and its text is under the menu! I am very confused now.
Here are the codes for dijitTextInput and plain text input:
Dijit text input:
<div id="widget__personName_id" class="dijit dijitReset dijitInlineTable dijitLeft dijitTextBox dijitValidationTextBox" role="presentation" widgetid="_personName_id">
<div class="dijitReset dijitValidationContainer">
<input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" type="text" role="presentation" readonly="readonly" tabindex="-1" value="Χ">
</div>
<div class="dijitReset dijitInputField dijitInputContainer">
<input id="_personName_id" class="dijitReset dijitInputInner" type="text" name="personName" autocomplete="off" dojoattachpoint="textbox,focusNode" maxlength="255" tabindex="0" aria-required="false" aria-invalid="false" value="">
</div>
</div>
Here is the plain input
<input name="personName" size="50">
So could anyone give a hint, about where can I start to find a clue to make text on dijit input box under the menu?

Here is the hint as requested:
This is the matter of z-index in css codes.
Higher the z-index means that it is above those who have lower z-index value.
Z-index must exist with 'position' value (position absolute or relative)