By default AEM add some class as below when I use the ordered list in the RTE.
<ul style="list-style-position: inside;">
<li>Item 1</li>
<li>Item 2</li>
</ul>
I want to change to
<ul class="some class">
<li><font style='some font'>Item 1 </font> </li>
<li><font style='some font'>Item 2 </font> </li>
</ul>
So, for this I looked at the existing implementation here :
/libs/clientlibs/granite/richtext/core/js/plugins/ListPlugin.js/
But I do not understand how AEM is applying default class and where I need to make change.
This happens if you're working on AEM 6.3.
Check on your AEM instance the following lib:
/libs/clientlibs/granite/richtext/core/js/ListUtils.js
check for the following code:
com.addInlineStyles(listDom, {'list-style-position': 'inside'});
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 have built a menu using the regular html in GWT as show below.
<g:HTMLPanel>
<div id="navigation">
<div id="menuLeft" class="menu">
<ul>
<li>
<g:Anchor ui:field="homeLink" styleName="active"><i class="fa fa-home"></i> Home</g:Anchor>
</li>
<li class="active">
<i class="fa fa-suitcase"></i> Businesses
<ul ui:field="businessesMenu">
<li>
<g:Anchor ui:field="enrollBusiness">Enroll Business </g:Anchor>
</li>
</ul>
</li>
</ul>
.....
as it is rendering the very nicely using css provided. All is well till this point, now comes the requirement; to this I have to add dynamic menu item based on some business logic, which means I have to add more s to the existing menu .
I'm able to build/add dynamic item but not able to add an event handler.
Any help appreciated.
IF you are using Dom to add the dynamic menu, you can refer this for adding click handlers.
you can refer this to add handlers.
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've seen some TinyMCE editor questions here before, so figured it was kosher.
Using Version 3.1.2
I have a "glossary" I am trying to use and on save, the code is getting repositioned so that portions of the glossary that need to be hidden are not.
It is taking a <UL> and placing it outside of a <span> tag I have.
The following code:
<p class="hide_def">
<span class="term_title">Investigational</span><br>
<span class="def">Definition Here
<ul>
<li>Definition Bullet Point</li>
</ul>
</span>
</p>
Is being changed to the snippet below. This throws all of the <UL> tags outside of the definition area.:
<p class="hide_def">
<span class="term_title">Investigational</span><br>
<span class="def">Definition Here</span></p>
<ul>
<li>Bullet Point</li>
</ul>
I have heard of turning off the "cleaning" config setting in TinyMCE, but also heard that is a bad idea.
What can I do here?
Since tinymce version 3.4 deactivation of the cleanup functionality is not apossible anymore.
With your version you can set the tinymce config param cleanup to false:
cleanup: false,
So I'm using the JsTree Plugin and I want all the tree to be initially closed. I don't know why I have it initially opened. By the way I'm creating the leaves dynamically through Jquery (append). Thanks in advance.
My code used to be like this :
<div id="demo2" class="demo">
<ul>
<li class="jstree-open">Root node 1
<ul>
<li id="One">Child node 1</li>
<li>Child node 2</li>
<li>ADV_SEARCH</li>
<li>Child node 4</li>
</ul>
</li>
<li>Root node 2</li>
</ul>
</div>
So I simply changed <li class="jstree-open"> to <li class="jstree-closed"> for the nodes who have children.
Well since I didn't really understand this plugin pretty well, I used class="jstree-open" in the li tag and I had no idea what it meant, so by curiosity I put closed instead of open and I got exactly what I wanted. Then I discovered by chance that the class really existed. Anyway as I said in different post JsTree really needs more Documentation because I find it to be a great plugin.