It is possible to set the with of d sidenav
elements.sidenav.sidenavWidth = 150;
But how to set the collapsed width and left margin
1 Like
Hi,
Based on my knowledge and exploration, there is no built-in property or style class in Servoy to handle sidenav collapse width. However, the left margin can be adjusted by applying a custom style class to the component.
elements.sidenav_2.addStyleClass(ācustom-marginā);
.custom-margin {
margin-left: 20px !important;
}
Thanks
Aijaz Ali
Hi,
the width of the collapsed sidenav is indeed set with style. The default style in TiNG is the following ( see below ). So you can override that with your desired with value in your solutionās stylesheet
.nav-collapse-menu.svy-slide-out:not(.svy-hover) {
width: 50px !important; /* use important to override inline width */
}
/* end width when closing */
.nav-collapse-menu.svy-slide-out.svy-slide-out-add,
.nav-collapse-menu.svy-slide-out.svy-hover-remove {
width: 50px !important;
}
/* start width when opening (hover) */
.nav-collapse-menu.svy-slide-out.svy-hover-add {
width: 50px !important;
}
/* start width when opening (open) */
.nav-collapse-menu.svy-slide-out.svy-slide-out-remove {
width: 50px;
}
Full css sample sidenav fixed wide
As icons from symbols font, as text in Affinity Designer. Select Layer and text to curves.
Select all curves, save as png. Drop png in media folder.
function initNavigationForm() {
// init the sidenav menu
var menuItems = loadMenuItems();
elements.sidenav.setRootMenuItems(menuItems);
elements.sidenav.sidenavWidth = 70;
}
function loadMenuItems() {
/** @typetypetypetype {CustomType<servoyextra-sidenav.MenuItem>} /
var menuItem;
var menuIte@types = [@type*;*@type*/** @type {CustomType<servoyextra-sidenav.MenuItem>} */
var menuSubItem;
var menuSubItems = ;
menuItem = new Object();
menuItem.id = "agenda_main";
menuItem.text = 'Agenda T'
menuItem.iconStyleClass = 'hocu-snav-agenda-icon';
menuItem.styleClass = 'hocu-snav-bg'
menuItems.push(menuItem);
menuItem = new Object();
menuItem.id = "d_demoCalendar";
menuItem.text = 'Agenda D';
menuItem.iconStyleClass = 'hocu-snav-agenda-icon';
menuItem.styleClass = 'hocu-snav-bg'
menuItem.tooltip = 'Agenda d'
menuItems.push(menuItem);
return menuItems;
}
part ng2.less
.nav-collapse-menu.svy-slide-out:not(.svy-hover) {
width: 70px !important; /* use important to override inline width */
}
/* end width when closing */
.nav-collapse-menu.svy-slide-out.svy-slide-out-add,
.nav-collapse-menu.svy-slide-out.svy-hover-remove {
width: 70px !important;
}
/* start width when opening (hover) */
.nav-collapse-menu.svy-slide-out.svy-hover-add {
width: 70px !important;
}
/* start width when opening (open) */
.nav-collapse-menu.svy-slide-out.svy-slide-out-remove {
width: 70px;
}
.hocu-snav-bg{
max-width: 100px;
background: #e7e7e7;
font-weight: 500;
font-size: 10px;
color: #555555;
line-height: 12px;
padding-left: 0px;
height: 64px;
text-align: center;
padding-right: 0px
}
.hocu-snav-sub-bg{
max-width: 100px;
background: #e7e7e7;
font-weight: 500;
font-size: 10px;
color: #555555;
line-height: 12px;
padding-left: 0px;
height: 42px;
text-align: left;
padding-right: 0px
}
.hocu-snav-agenda-icon{
content: url(ā./iortho_agenda_wit.pngā);
background: #00A0DB;
max-width: 42px;
border: 0px;
border-style: solid;
border-radius: 4px
}
Thanks Aijaz Ali and Paolo Aronne
1 Like