For example: if you display Options you can see that the text of the Production Areas and Processes option goes over the arrow, that means that the widthmenu does not adapt to the internal texts. But I don't know how to solve it, I tried with width: autoand it didn't work, I know very little about css.
var todoMenus = {
"menu": [
{
"id": 1,
"id_padre": 0,
"icono": "fa fa-dashboard fa-fw",
"link": "/",
"titulo": "Tablero"
},
{
"id": 2,
"id_padre": 0,
"icono": "fa fa-tasks fa-fw",
"link": "#",
"titulo": "Procesos"
},
{
"id": 3,
"id_padre": 2,
"icono": "fa fa-list-ol fa-fw",
"link": "/lotes",
"titulo": "Lotes"
},
{
"id": 4,
"id_padre": 2,
"icono": "fa fa-eraser fa-fw",
"link": "/limpieza",
"titulo": "Limpieza"
},
{
"id": 5,
"id_padre": 2,
"icono": "fa fa-stop fa-fw",
"link": "#",
"titulo": "Paradas"
},
{
"id": 6,
"id_padre": 2,
"icono": "fa fa-wrench fa-fw",
"link": "#",
"titulo": "Mantenimiento"
},
{
"id": 7,
"id_padre": 6,
"icono": "fa",
"link": "/planes",
"titulo": "Planes"
},
{
"id": 8,
"id_padre": 6,
"icono": "fa",
"link": "/calendario",
"titulo": "Calendario"
},
{
"id": 9,
"id_padre": 0,
"icono": "fa fa-file-text-o fa-fw",
"link": "#",
"titulo": "Reportes"
},
{
"id": 10,
"id_padre": 9,
"icono": "fa fa-bar-chart-o fa-fw",
"link": "/estadisticos",
"titulo": "Estadisticos"
},
{
"id": 11,
"id_padre": 9,
"icono": "fa fa-building-o fa-fw",
"link": "/estaticos",
"titulo": "Estaticos"
},
{
"id": 12,
"id_padre": 9,
"icono": "fa fa-file fa-fw",
"link": "/parametrizados",
"titulo": "Parametrizados"
},
{
"id": 13,
"id_padre": 0,
"icono": "fa fa-wrench fa-fw",
"link": "#",
"titulo": "Opciones"
},
{
"id": 22,
"id_padre": 13,
"icono": "fa fa-industry fa-fw",
"link": "#",
"titulo": "Marcas de Equipos"
},
{
"id": 23,
"id_padre": 22,
"icono": "fa",
"link": "/marcas",
"titulo": "Marcas"
},
{
"id": 24,
"id_padre": 22,
"icono": "fa",
"link": "/modelos",
"titulo": "Modelos"
},
{
"id": 32,
"id_padre": 13,
"icono": "fa fa-clock-o fa-fw",
"link": "/turnos",
"titulo": "Turnos"
},
{
"id": 14,
"id_padre": 13,
"icono": "fa fa-flask fa-fw",
"link": "#",
"titulo": "Productos de Elaboración"
},
{
"id": 25,
"id_padre": 14,
"icono": "fa",
"link": "/productos",
"titulo": "Productos"
},
{
"id": 26,
"id_padre": 14,
"icono": "fa",
"link": "/unidadesdemedicion",
"titulo": "Unidades de Medición"
},
{
"id": 15,
"id_padre": 13,
"icono": "fa fa-arrows-alt fa-fw",
"link": "#",
"titulo": "Areas y Procesos de Producción"
},
{
"id": 30,
"id_padre": 15,
"icono": "fa",
"link": "/areas",
"titulo": "Areas"
},
{
"id": 31,
"id_padre": 15,
"icono": "fa",
"link": "/procesos",
"titulo": "Procesos "
},
{
"id": 16,
"id_padre": 13,
"icono": "fa fa-steam fa-fw",
"link": "/equipos",
"titulo": "Equipos"
},
{
"id": 17,
"id_padre": 13,
"icono": "fa fa-user fa-fw",
"link": "/personas",
"titulo": "Personas"
},
{
"id": 18,
"id_padre": 0,
"icono": "fa fa-gears fa-fw",
"link": "#",
"titulo": "Configuración"
},
{
"id": 19,
"id_padre": 18,
"icono": "fa fa-users fa-fw",
"link": "/usuarios",
"titulo": "Usuarios"
},
{
"id": 20,
"id_padre": 18,
"icono": "fa fa-suitcase fa-fw",
"link": "/perfiles",
"titulo": "Perfiles"
},
{
"id": 21,
"id_padre": 18,
"icono": "fa fa-database fa-fw",
"link": "/respaldo",
"titulo": "Respaldo"
},
{
"id": 33,
"id_padre": 13,
"icono": "fa",
"link": "/tiposmtto",
"titulo": "Tipos de Mantenimiento"
},
{
"id": 34,
"id_padre": 5,
"icono": "fa",
"link": "#",
"titulo": "De Mantenimiento"
},
{
"id": 36,
"id_padre": 34,
"icono": "fa",
"link": "/paradas_mtto_graphic",
"titulo": "Estadísticas"
},
{
"id": 35,
"id_padre": 34,
"icono": "fa",
"link": "/paradas_mtto",
"titulo": "Listado"
}
]
};
let menu_generado = GenerarTodo();
$("#main-nav").append(menu_generado);
function GenerarTodo(){
var result = "";
let menujson = { "menu": todoMenus.menu };
function ordenar_menu(j) {
menu = { menu: [] };
for (n in j.menu) {
insertar_menu(j.menu[n], 0, menu.menu);
}
return menu;
}
function insertar_menu(j, l, menu) {
for(n in menu){
if(menu[n].id == j.id_padre){
if (menu[n].menu == undefined)
menu[n].menu = [];
return menu[n].menu.push(j);
}else{
if (menu[n].menu){
if (insertar_menu(j, l+1, menu[n].menu)){
return true;
}
}
}
}
if(l){
return false;
}
menu.push(j);
}
menu = ordenar_menu(menujson);
result=menuList(menu.menu);
function menuList(menu, l) {
if ( l == undefined){
l=0;
}
result = '<ul ' + (l?'class="treeview-menu"':'class="sidebar-menu" data-widget="tree"') + '>\n';
for(n in menu){
result += '<li '+ ( (!menu[n].menu) ? '' : 'class="treeview"') +'><a href="' + menu[n].link + '"><i class="' + menu[n].icono + '"></i> <span>' + menu[n].titulo + '</span>'+ ( (menu[n].menu) ? '<span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>' : '') +'</a>';
if (menu[n].menu) {
result += '\n'+menuList(menu[n].menu, l+1, result)+' ';
};
result += '</li>\n';
}
result += '</ul>\n'
return result;
}
return result;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.11/css/AdminLTE.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.11/css/skins/_all-skins.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.11/js/app.min.js"></script>
<aside class="main-sidebar" style="height: auto;">
<section class="sidebar" id='main-nav'></section>
</aside>EYE: you must open it in full screen to see the menu
One way to fix this is to use
.treeviewthewhite-space:normal;. This will cause the text to line break when it exceeds the size of the element.Example:
Recorriendo el objeto json puedes sacar la longitud de los títulos, almacenar la mayor longitud y multiplicarlos por un tamaño de píxeles dados y ese tamaño en pixeles ponérselo a un objeto html, por ejemplo el de tu menú. Un saludo ;-)