How to set sidebar-width in AdminLTE 3 for Yii2 Framework

user_2573487 0
Viewed 1228

Is there a faster way to set the sidebar width on AdminLTE 3 for Yii2 PHP Framework?

I have these sub-menus on my sidebar and they're taking so much space:

enter image description here

I tried doing this in my css file:

.main-sidebar {
    width: 400px!important;
}

.sidebar {
    width: 400px!important;
}

It just does this: enter image description here

What's the best workaround to get the sidebar and the brand-link wider?

UPDATE: I edit the my custom css as the following:

.nav-sidebar>.nav-item .nav-icon {
    margin-left: 0rem!important;
    font-size: 1.2rem;
    margin-right: 0rem!important;
    text-align: center;
    width: 1.6rem!important;
}

.sidebar-mini .main-sidebar .nav-link,
.sidebar-mini-md .main-sidebar .nav-link,
.sidebar-mini-xs .main-sidebar .nav-link {
    width: calc(300px - .5rem * 2)!important;
}

.sidebar-collapse.sidebar-mini .main-sidebar .sidebar {
    width: calc(300px - .5rem * 2)!important;
}

aside {
    width: 300px!important;
}

body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper,
body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-header {
    transition: margin-left .3s ease-in-out;
    margin-left: 300px!important;
}

.layout-navbar-fixed .wrapper .brand-link {
    width: 300px!important;
}

.navbar-nav>.navbar-item>.navbar-link {
    display: none!important;
}

The sidebar gets wider but now it won't collapse, like this: Sidebar Not Collapsing.

What could be causing the problem here?

adminlte yii2 css php
2 Answers

This happened because you use !important; when defining width. Class .sidebar-collapse can't change the width which is defined as important.

user_24817660

Thank you very much friend, in my case I wanted to reduce the size, for this I have taken your code and I have changed 300px to 230px, since its default size is 250px, when it is folded or clicked on the responsive button, the wide, I leave my code in case it works for someone else:

Size width sidebar: 230px

/*sidebar width*/
aside {width: 230px!important;}
.sidebar-collapse aside{width:73px !important;}
/*content margin-left*/
.sidebar-mini-md .content-wrapper, .sidebar-mini-md .main-footer, .sidebar-mini-md .main-header{margin-left: 230px !important;}
.nav-sidebar>.nav-item .nav-icon {
    margin-left: 0rem!important;
    font-size: 1.2rem;
    margin-right: 0rem!important;
    text-align: center;
    width: 0.6rem!important;
}

.sidebar-mini .main-sidebar .nav-link,
.sidebar-mini-md .main-sidebar .nav-link,
.sidebar-mini-xs .main-sidebar .nav-link {
    width: calc(230px - .5rem * 2)!important;
}

.sidebar-collapse.sidebar-mini .main-sidebar .sidebar {
    width: calc(230px - .5rem * 2)!important;
}

body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper,
body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-header {
    transition: margin-left .3s ease-in-out;
    margin-left: 230px!important;
}

.layout-navbar-fixed .wrapper .brand-link {
    width: 230px!important;
}

.layout-fixed .brand-link{
    width:230px !important;
}
.navbar-nav>.navbar-item>.navbar-link {
    display: none!important;
}
user_39194350
Related