Nested Link is not routing it as forwarding to parent one always, here is sample code as.. seems like angular 2/4 don't support this approach or might be something wrong with my tag, with href is it working.
<ul>
<li> <a [routerLink]=['about']> </a>
<ul>
<li <a [routerLink]=['about/test']> </a> </li>
</ul>
</li>
</ul>
To use anchor tags in angular 2 you need to use fragment.
Like this.
<a [routerLink]=['about'] fragment='test'> </a>
Related
I am migrating to bootstrap4 from bootstrap 3.
To work well, I must markup the menus with HTML like this:
<ul class="dropdown-menu">
<li><a class="nav-item nav-link" href="foo">Foo</a></li>
<li><a class="nav-item nav-link" href="bar">Bar</a></li>
.
.
.
</ul>
where each element gets the same classes.
This is a part of a jinja2 template in Django.
It seems tedious to "decorate" each tag with class="nav-item nav-link"
I didn't need to do this with the bootstrap3 code (which I inherited and I know little about this)
Is there a different way of doing this?
If you are using VSCode you can use shortcut ctrl+alt+DownArrow to duplicate coursor to bottom lines and edit multiple in the same time.
Vue 3 removes the white-space between inline-block elements. This means I'll have to go back through quite a few of my sites and update the CSS before I can safely upgrade from version 2. Is there a way to turn this off?
See the following for an example:
<ol>
<li style="display: inline-block">A » </li>
<li style="display: inline-block">B</li>
</ol>
https://jsfiddle.net/27vwLn6u/
Here's the same example in Vue 2:
https://jsfiddle.net/3d0jcnmf/
This is now supported since Vue 3.1.0. See https://github.com/vuejs/vue-next/pull/1600 for more information.
Basically now you need to add the following when creating the app:
app.config.compilerOptions.whitespace = 'preserve';
Here's the updated example:
https://jsfiddle.net/bscz2306/
Looks like you already found the answer at
https://github.com/vuejs/vue-next/issues/2431#issuecomment-712451346
V3 automatically condenses the white space.
You can get around it by using a single line.
<div id="app">
<ol>
<li style="display: inline">A » </li>
<li style="display: inline">B</li>
</ol>
<ol>
<li style="display: inline-block">A » </li> <li style="display: inline-block">B</li>
</ol>
{{foo}}
</div>
I was looking into the code, and looks like pre tags are handled differently, but I haven't found a way to pass isPreTag to the component.
I'm trying to wrap a standard list item format in an Angular directive, and then use it with ng-repeat inside various list types. The problem is, the directive seems to lose the class of the parent, so the list doesn't render the way it should. Here's an example:
<ul class="nav nav-pills nav-stacked affix">
<div ng-repeat="item in items">
<my-list-item item="item"></my-list-item>
</div>
</ul>
Renders exactly like:
<ul class="nav navbar-nav navbar-right">
<div ng-repeat="item in items">
<my-list-item item="item"></my-list-item>
</div>
</ul>
So, both of these renders exactly the same, neither the way I want them to. How do I make my list item directive aware of its parent's class?
Edit:
<ul class="nav nav-pills nav-stacked affix">
<li ng-repeat="item in items">
<my-list-item item="item"></my-list-item>
</li>
</ul>
The my-list-item directive looks something like this:
<a class="myClass" href="{{item.target}}"><span ng-bind-html="item.text"></span></a>
<div> isn't a valid child of <ul> in the first place. Really the only valid child is <li>
The bootstrap css won't expect it either. Use markup that matches bootstrap suggested markup and apply any appropriate classes that are used in the docs.
As for what gets rendered in <my-list-item> you would need to show what that html looks like if it is also problematic
Reference W3C <UL> Specs
Permitted contents
zero or more li elements
The code:
<nav class='secondary-nav container'>
<ul>
<li>Customer Care</li>
<li class='dropdown'>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Home
<b class='caret'></b>
</a>
<ul class='dropdown-menu'>
<li>
Google
</li>
</ul>
</li>
<li>Sign Out</li>
</ul>
</nav>
I have jQuery, bootstrap-dropdown.js, and bootstrap.css incuded. jQuery is included before everything.
The dropdown menu is appearing by default before a mouse click or hover on the list element.
screenshot - http://cl.ly/image/41122D2Z3R38
Anyone know why?
Thanks!
Try This :
$('.dropdown-toggle').dropdown();
The thing without your css code we can not understand your problem.
But as I can see, you data attribute is correctly used, but are you linking you javascript files correctly?
"bootsrtap.js" and "Your jquery File"
The second thing look out on your javascript applying code.
The applying code of the nav menu of bootsrtap is :
$('.dropdown-toggle').dropdown();
try to revise your file codes and I think this will help you ^_^
I am currently using the horizontal nav-bar created by Superfish (http://users.tpg.com.au/j_birch/plugins/superfish/#sample4) on my website www.bonusrunner.net (Under construction :)
The .css and .js files can be downloaded here: http://users.tpg.com.au/j_birch/plugins/superfish/#download
I am struggling with some css adjustments. I want my menu to be rather identical to the one on http://www.oddsportal.com - Can anybody help me? First of all, how do I make my submenu visible permanently, and secondly I want the submenu background to have a width of 100%.
Best, Slynge
First, add the correct code from the example (#4) to your page:
$(document).ready(function(){
$("ul.sf-menu").superfish({
pathClass: 'current'
});
});
(You forgot the pathClass on your page).
Then the included superfish-navbar.css will take care of the rest.
UPDATE
<ul class="sf-menu sf-navbar sf-js-enabled sf-shadow">
<li class="current">
Bonusrunner<span class="sf-sub-indicator"> »</span>
<ul>
<li>
Anvend Bonusrunner
</li>
<li>Om Bonusrunner</li>
<li>Ludomani Test</li>
<li>Ansvarligt Spil</li>
</ul>
</li>
<li>
Casino<span class="sf-sub-indicator"> »</span>
<ul>
<li>
Casino Bonus
</li>
<li>Casino Guide</li>
<li>Casino Nyheder</li>
<li>No Deposit Casino</li>
</ul>
</li>
<li>
Betting<span class="sf-sub-indicator"> »</span>
<ul>
<li>
Betting Nyheder
</li>
<li>Betting Guide</li>
<li>Betting Ekspertråd</li>
</ul>
</li>
Note the class="current" on the menu that is supposed to be open on the load. Tried it on downloaded code from your site and works like a charm.