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.
Related
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>
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 building a menu with css from a nested ordered list. What I am trying to achieve - without success yet - is that each nesting level is placed in a seperate row. I created a test case on codepen and I would appreciate any help solving this issue. Here's the pen: http://codepen.io/peterschmidler/pen/CkzpF
Thanks a lot in advance!
Peter
Edit: Thanks for the hint to the correct nesting of the list. But I still could't solve the main issue: How to render the list in seperate rows for each active level. I updated the code to clarify the issue: http://codepen.io/anon/pen/lzHda
I would highly appreciate any help, that solves the problem with pure CSS.
Thanks.
You did not nest your lists properly. <ol> can only contain <li>. You should put your nested <ol> inside an <li>. Something like this:
<ol>
<li>main1</li>
<li>main2
<ol>
<li>sub1</li>
<li>sub2
<ol>
<li>subsub1</li>
</ol>
</li> <!-- closing sub 2 -->
<li>sub3</li>
</ol>
</li> <!-- closing main 2 -->
<li>main3</li>
</ol>
This shouild put you back on track...
Each new <ol> in a nested list should be put under <li>.
In your case, try to nest this part of your code:
<ol>
<li>
Team
</li>
<ol>
<li>
Peter
</li>
<li>
Schmidler
</li>
</ol>
</ol>
in an <li>. Like this:
<li>
Team
<ol>
<li>Peter</li>
<li>Schmidler</li>
</ol>
</li>
What would be prefered semantic and accessible markup for this divider list?
I'm using jQuery mobile for a project and it uses this mark-up
<ul data-role="listview" data-dividertheme="d" data-inset="true">
<li data-role="list-divider">A</li>
<li>Adam Kinkaid</li>
<li>Alex Wickerham</li>
<li>Avery Johnson</li>
<li data-role="list-divider">B</li>
<li>Bob Cabot</li>
<li data-role="list-divider">C</li>
<li>Caleb Booth</li>
<li>Christopher Adams</li>
</ul>
I think for dividers (A,B,C...) HTML Heading tags should be used.
Definately not ul since it is aplhabetical it should be either ol with list-style-type:upper-alpha; with nested list.
I would go with a html something like:
<ol>
<li>
<ul>
<li>Adam</li>
<li>Alan</li>
</ul>
</li>
</ol>
Sample: http://jsfiddle.net/easwee/8UUbh/5/
I would use a definition list
<dl data-role="listview" data-dividertheme="d" data-inset="true">
<dt data-role="list-divider">A</dt>
<dd>blblblaba</dd>
</dl>
I know that the titles are not definition titles, but its clear what elements are the dividers and what elements are the contents.
edit i think #easwee's solution is much better in a semantic point of view.