This is my menu template - using the DDRMenu template style
<ul class="nav" id="side-menu">
[*>NODE]
</ul>
[>NODE]
<li class="[?SELECTED]active[/?]">
[?NODE]
[=TEXT]
[?ELSE]
</span>
[/?]
[?NODE]
<ul class="nav nav-****second****-level">
[*>NODE]
</ul>
[/?]
[/>]
How do I replace the ****second**** with the correct ordinal depending on how many levels down the menu goes
I'm using below logic to show multi level menu in one project.
<ul>
[*>NODE]
</ul>
[>NODE]
<li id="languages-box-holder">
[?ENABLED]
[=TEXT]
[?ELSE]
<span>[=TEXT]</span>
[/?]
[?NODE]
<ul class="languages-box popup-box cream-bg">
<li class="arrow-top"><span class="shadow cream-bg"></span></li>
<li class="focusor-top"></li>
[*>NODE]
</ul>
[/?]
</li>
[/>]
Related
I am trying to choose an element("Classic") from a dynamic dropdown list. Problem is that word Classic contains 2 elements.
Html page is:
<ul id="dynamic-14" class="results" role="list">
<li class="results-dept result">
<div dynamic-102" class="results" role="option">
<span class="match"/>
</div>
</li>
<li class="results-dept result">
<div dynamic-12" class="results" role="option">
<span class="match"/>
Classic
</div>
</li>
<li class="results-dept result">
<div dynamic-1022" class="results" role="option">
<span class="match"/>
Classic numbers
</div>
</li>
I tried to do it with xpath using:
//ul[#class="results"] //div[contains(.,'Classic')]
but it gives me back 2 values so robot framework can't choose one I need.
user normalize-space() function to get rid of the leading and trailing whitespace.
//ul[#class="results"] //div[ normalize-space(.)='Classic']
I'm using Bootstrap with an Ember project, and following markup produces navigation tabs that work on the desktop, but fail in Chrome & Safari the iPhone 6.
Here is the markup produced:
<nav>
<ul class="nav nav-tabs">
<li id="ember611" class="ember-view active">
<a>Tab 1</a>
</li>
<li id="ember612" class="ember-view">
<a>Tab 2</a>
</li>
</ul>
</nav>
Tapping on Tab 2 doesn't work. Any suggestions?
Here is the HtmlBars that produces this HTML:
<nav>
<ul class="nav nav-tabs">
{{#link-to "foo.bar.tab1" tagName="li" role="presentation"}}
<a href={{view.href}}>Matches</a>
{{/link-to}}
{{#link-to "foo.bar.tab2" tagName="li" role="presentation"}}
<a href={{view.href}}>Standings</a>
{{/link-to}}
</ul>
</nav>
I'm using Bootstrap 3.3.4, and Ember 1.3
You're using your li elements as links when they really shouldn't be. That will work in some browsers but it's non-standard. I usually do something like this:
{{#link-to 'foo.bar.tab1' tagName='li' href='false'}}
{{link-to 'Matches' 'foo.bar.tab1' role='presentation'}}
{{/link-to}}
This will make the a tag the actual link (which will work across browsers), but will still add the active class to the li elements.
I do not know how to set even spacing in my navbar:
there is a bigger gap between Articles and User Profil than User Profil and Admin.
There is a bigger gap between Admin and DB than User Profil and Admin.
My code is:
<li class="blog-nav-item">
<a class="blog-nav-item" href="#" class="blog-nav-item active" data-toggle="dropdown" role="button" aria-expanded="false">Articles<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>All</li>
<li>Create New</li>
</ul>
</li>
<a class="blog-nav-item" href="/accounts/profil/">User Profil</a></li>
<a class="blog-nav-item" href="/admin/">Admin</a></li>
<li class="blog-nav-item">
DB<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>DB: JSON</li>
<li>DB: XML</li>
</ul>
</li>
That is because, by default, there is different margin spacing for a simple list element and a drop down menu.
Override the settings by:
.blog-nav-item > a{
margin-right:10px;
}
.blog-nav-item > .dropdown-menu{
margin-right:10px;
}
Adding these classes to the css will help
The example from Foundation 3 explains how to set up tabs using lists but how do you use the tabs with a div layout?
<dl class="tabs">
<dd class="active">Simple Tab 1</dd>
<dd>Simple Tab 2</dd>
<dd class="hide-for-small">Simple Tab 3</dd>
</dl>
<ul class="tabs-content">
<li class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
<li id="simple2Tab">This is simple tab 2s content. Now you see it!</li>
<li id="simple3Tab">This is simple tab 3s content.</li>
</ul>
<div class="tabs-content">
<div class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
<div id="simple2Tab">This is simple tab 2s content. Now you see it!</div>
<div id="simple3Tab">This is simple tab 3s content.</div>
</div>
Add the divs in the list item.
<ul class="tabs-content">
<li class="active" id="simple1Tab">
<div>This is simple tab 1s content. Pretty neat, huh?</div>
</li>
<li id="simple2Tab">
<div>This is simple tab 2s content.</div>
</li>
<li id="simple3Tab">
<div>This is simple tab 3s content.</div>
</li>
</ul>
I have an issue when rendering templated items within a ul with some pre-defined li elements, that i'd like the templating engine to respect:
This is what I'm trying to achieve:
<ul data-bind="{template: {name: itemTemplate, foreach: itemsToRender}}">
<li class="first">some pre-info</li>
//this is where I'd like knockout to render my templates
<li class="last">som-post info</li>
</ul>
This is what I actually get:
<ul data-bind="{template: {name: itemTemplate, foreach: itemsToRender}}">
//this is where all my templateItems get rendered
<li class="first">some pre-info</li>
<li class="last">som-post info</li>
</ul>
An obvious alternative is to use a template that rendered the entire ul, and looped over the child items, but this would render the entire template every time there was a change, and not just the updated items (li), which is the preferred way.
The best option is to use the containerless control-flow bindings available in KO 1.3 (in RC).
It would look like:
<ul>
<li class="first">some pre-info</li>
<!-- ko foreach: itemsToRender -->
<li class="item" data-bind="text: name"></li>
<!-- /ko -->
<li class="last">some post-info</li>
</ul>
or
<ul>
<li class="first">some pre-info</li>
<!-- ko template: { name: 'itemTemplate', foreach: itemsToRender } -->
<!-- /ko -->
<li class="last">some post-info</li>
</ul>
<script id="itemTemplate" type="text/html">
<li class="item" data-bind="text: name"></li>
</script>
Sample: http://jsfiddle.net/rniemeyer/tzJU3/