We have a website running Plone 4.3 and Diazo to theme it. One of our content editors reported this weird issue. He was editing a page on our website involving nested lists: an ordered list with indented bulleted lists on certain items.
The code is formatted correctly on the unthemed version (sans Diazo) of our website, and looks correct when you look at the HTML view in TinyMCE (while editing). When it outputs through Diazo, though, the list tags get jumbled. Here's the code:
The "correct" version (from in TinyMCE and unthemed version) —
<ol>
<li></li>
<li></li>
<ol>
<ul>
<li></li>
</ul>
</ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<ol>
<ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</ul>
</ol>
The weird version (through Diazo) —
<ol>
<li></li>
<li></li>
<ol>
</ol>
</ol>
<ul>
<li></li>
</ul>
<li></li>
<li></li>
<li></li>
<li></li>
<ol>
</ol>
<ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</ul>
Actually I just saw that TinyMCE fixes this in version 3.4.4 (it outputs the real correct code, with the nested list within the <li></li>) — but is there a reason Diazo is doing this? The XML rules pulling this code through aren't targeting the lists at all, just the parent container (.main .content).
Related
In the Laravel Backpack docs they show an image that appears to have dropdown menus for the sidebar navigation menu, but I can't find anywhere that says how to use them. Is there a built in way or do I have to write my own styles?
In resources/views/vendor/backpack/base/inc/sidebar.blade.php you can add your own menu-items. Using .treeview and .treeview-menu you can make those items expandable:
See also the source code of that image.
<li class="treeview">
<i class="fa fa-key"></i> <span>Roles & Permissions</span> <i class="fa fa-angle-left pull-right"></i>
<ul class="treeview-menu">
<li>
<span>Roles</span>
</li>
<li>
<span>Permissions</span>
</li>
</ul>
</li>
As Oscar Torres pointed out, the new demo source for a nested menu lives here.
Backpack now uses Bootstrap's nav-dropdown class(es) to achieve these results:
<li class="nav-item nav-dropdown">
<a class="nav-link nav-dropdown-toggle" href="#"><i class="nav-icon la la-group"></i> Authentication</a>
<ul class="nav-dropdown-items">
<li class="nav-item"><a class="nav-link" href="{{ backpack_url('user') }}"><i class="nav-icon la la-user"></i> <span>Users</span></a></li>
<li class="nav-item"><a class="nav-link" href="{{ backpack_url('role') }}"><i class="nav-icon la la-group"></i> <span>Roles</span></a></li>
<li class="nav-item"><a class="nav-link" href="{{ backpack_url('permission') }}"><i class="nav-icon la la-key"></i> <span>Permissions</span></a></li>
</ul>
</li>
I've slowly been trying to make a top-left quarter-circle menu using CSS transforms, here is my HTML:
<header>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</header>
Seems that there are at least three or more things that have to be simultaneously done and I've only got the rough of it. My goal is to make the menus match the area of the black header element as closely as possible.
https://jsfiddle.net/8axqpen4/
I have formated code in netbeans:
<ul>
<li>
Menu
</li>
<li>
Menu
</li>
</ul>
Question:
How to remove tabulator spaces from code (any JS, PHP, CSS) to get this output in IDE?
(possibly in NetBeans, but it can be any program.)
<ul>
<li>
Menu
</li>
<li>
Menu
</li>
</ul>
There are plenty of tools for that over the internet.
Try this one: http://www.odditysoftware.com/page-webtools16.htm
It has some HTML specific settings and more.
I'm wanting to put a background image from a class as a list item:
<ul>
<li> Stuff </li>
<li> More Stuff </li>
<li class= "horizdotted" </li>
</ul>
Here's the CSS
.horizdotted {
background-image: url("images/horizdotted.png");
background-repeat:no-repeat;}
This doesn't work in any browser...it appears I have to have at least some info (other than a background image) in the LI. So, I made a png of a white pixel and tried another way:
<ul>
<li> Stuff </li>
<li> More Stuff </li>
<li class= "horizdotted"><img src="images/pixel.png" alt="teeny pixel" /> </li>
</ul>
Same CSS. This worked in Chrome and Firefox, but not in IE. I can't, for the LIFE of me, get it to work in IE. Please help if you can!! Here's an image in Chrome of the second way (with the teeny pixel).
[Stuff, more stuff, dotted line in unordered list] http://www.flickr.com/photos/77703125#N07/8321020892/in/photostream/
set width and height in css
.horizdotted {
background-image: url("images/horizdotted.png");
background-repeat:no-repeat;
width:50px;
height:50px;
}
set this property according to your image size, that you want.
jsFiddle for IE
You need to add content into your li so that it has something to show. Also, you have a syntax error for li in your Question. It is missing a closing bracket > symbol. You also have a blank space after the equal sign for class name too.
HTML:
<ul>
<li> Stuff </li>
<li> More Stuff </li>
<li class="horizdotted">Some stuff to view background.</li>
</ul>
CSS:
.horizdotted {
background-image:url(http://placehold.it/500x17/00ff00);
background-repeat: no-repeat;
}
jsFiddle for IE: No CSS
Also, since it's just a dashed line you want to show, then no CSS is necessary:
HTML:
<ul>
<li> Stuff </li>
<li> More Stuff </li>
<li>-----------------</li>
</ul>
I am having a problem with JSTree. I am using very basic examples but the <ins class="jstree-icon"> </ins> are floated all the way over to the right hand side of the tree area.
Here is the JS that fires it off:
$('#adminMenuArea').jstree({
"plugins" : ["html_data","ui","themes"]
});
Here is the HTML that I am using:
<div id="adminMenuArea">
<ul>
<li><a id='menu-4' href='menu-4'>About Us</a></li>
<li>
<a id='menu-6' href='menu-6'>Services</a><!-- in -->
<ul>
<li><a id='menu-7' href='menu-7'>Service 1</a></li>
<li><a id='menu-8' href='menu-8'>Service 2</a></li>
<li>
<a id='menu-9' href='menu-9'>Service 3</a><!-- in -->
<ul>
<li><a id='menu-18' href='menu-18'>Sub Services1</a></li>
<li><a id='menu-17' href='menu-17'>Sub Services 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a id='menu-13' href='menu-13'>Employment</a></li>
<li><a id='menu-14' href='menu-14'>Contact Us</a></li>
</ul>
</div>
Any help is much appreciated.
The problem was that all of the anchor tags <a> were floating left due to some other CSS in my system.