Menu Items in Navigation Menu get truncated

[gfo2007]

Hi,
One of my menus have about 30 items. Serenity surprisingly doesn't show all the menu items and does not allow you to scroll down to see the ones that are not showing. How can I correct this?

Please see image below.

[heleopless50]

may be you have set the css property overflow to hidden turn it to auto

[gfo2007]

@heleopless50 can you show me where? I haven't touched any css.

[heleopless50]

i can enter anydesk with you and figure it together

[gfo2007]

@VictorTomaili sorry for bothering you knowing you are very busy. But could you please guide me on how to fix this bug?

[arunkumar12712]

add to site.less

.slimScrollBar {
background: none repeat scroll 0 0 #ca195a !important;
border-radius: 2px!important;
display: none;
height: 40vh!important;
position: absolute;
right: 1px;
top: 5px;
width: 10px!important;
z-index: 100;
opacity:0.7!important;
}

[heleopless50]

i can enter with you using anydesk and figure it out
send me your anydesk number

[gfo2007]

@heleopless50 let me first post the 2 css code here for you to view and then we can take it up from there please.

site.css

.s-Administration-LanguageDialog > .size {
  width: 450px;
}
.s-Administration-LanguageDialog .caption {
  width: 120px;
}
.s-Administration-RoleDialog > .size {
  width: 450px;
}
.s-Administration-RoleDialog .caption {
  width: 120px;
}
.s-Administration-UserDialog > .size {
  width: 650px;
}
.s-Administration-UserDialog .caption {
  width: 150px;
}
.s-Administration-UserDialog .s-PropertyGrid .categories {
  height: 450px;
}
.s-TranslationGrid input.custom-text {
  width: 100%;
  height: 23px;
  padding: 0 3px;
}
.s-UserPermissionDialog > .size,
.s-RolePermissionDialog > .size,
.s-UserRoleDialog > .size {
  min-width: 670px;
  width: 670px;
  min-height: 450px;
  height: 450px;
}
.s-UserPermissionDialog .s-DataGrid,
.s-RolePermissionDialog .s-DataGrid,
.s-UserRoleDialog .s-DataGrid {
  height: 100%;
}
.s-UserPermissionDialog .ui-dialog-content,
.s-RolePermissionDialog .ui-dialog-content,
.s-UserRoleDialog .ui-dialog-content {
  padding: 8px;
}
.s-PermissionCheckEditor .check-box {
  background-image: url(../serenity/images/tick-empty.png);
  background-position: center center;
  width: 22px;
  height: 22px;
  margin: 0;
}
.s-PermissionCheckEditor .check-box.checked {
  background-image: url(../serenity/images/tick-green.png);
  background-position: center center;
}
.s-PermissionCheckEditor .check-box.checked.revoke {
  background-image: url(../serenity/images/tick-red.png);
  background-position: center center;
}
.s-PermissionCheckEditor .check-box.partial {
  opacity: 0.8;
}
.s-PermissionCheckEditor .check-box.checked.partial {
  background-image: url(images/tick-green-partial.png);
}
.s-PermissionCheckEditor .check-box.checked.revoke.partial {
  background-image: url(images/tick-red-partial.png);
}
.s-PermissionCheckEditor .effective-permission {
  cursor: default;
  padding-left: 22px;
  background-image: url(../serenity/images/check2.png);
  background-repeat: no-repeat;
  background-position: left center;
}
.s-PermissionCheckEditor .effective-permission.partial {
  background-image: url(../serenity/images/checkbox-null.png);
}
.s-PermissionCheckEditor .effective-permission.deny {
  background-image: url(../serenity/images/slash.png);
}

common-theme.css

:root {
    --bs-body-bg-rgb: 244, 244, 244;
    --bs-body-bg: #f4f4f4;
    --bs-body-font-size: 13px;
    --s-sidebar-band-bg: var(--bs-primary);
}

html {
    font-size: var(--bs-body-font-size);
}

.s-container-tight,
.s-container-narrow {
    width: 100%;
    padding-right: var(--bs-gutter-x, 1.5rem);
    padding-left: var(--bs-gutter-x, 1.5rem);
    margin-right: auto;
    margin-left: auto;
}

.s-container-tight {
    max-width: 32rem;
}

.s-container-narrow {
    max-width: 48rem;
}

.s-full-page {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 80vh;
}

.s-sidebar {
    position: fixed;
    top: 48px;
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
    z-index: 11;
    display: flex;
    width: 300px;
}

.s-sidebar-expanded .s-sidebar {
    transform: translateX(0);
}

.s-sidebar-menu,
.s-sidebar-header-actions {
    list-style: none;
    margin: 0;
    padding: 0;
}

.s-sidebar a:hover {
    text-decoration: none;
}

.s-sidebar-header-link {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #fff;
}

.s-sidebar-header-link {
    margin-right: 1.5rem;
    font-size: 21px;
}

.s-sidebar-pane {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    bottom: 0;
    background: #fff;
    border-right: 1px solid #e8e9ea;
    font-size: 14px;
    display: flex;
    flex-direction: column;
}

.s-sidebar-icon {
    line-height: 1;
    text-align: center;
    margin-right: 8px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex: 0 0 1em;
    vertical-align: middle;
    color: #0c6190;
}

.s-sidebar-link {
    vertical-align: middle;
    display: flex;
    position: relative;
    align-items: center;
    text-decoration: none;
    padding: 0.2rem 12px 0.2rem 18px;
    color: #2d3542;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
}

.s-sidebar-link:hover,
.s-sidebar-pane .active > .s-sidebar-link {
    color: #007eff;
}

.s-sidebar-link:hover .s-sidebar-icon,
.active > .s-sidebar-link > .s-sidebar-icon {
    color: #007eff;
}

.s-sidebar-menu .s-sidebar-menu {
    margin-left: 1em;
}

.s-sidebar-menu .s-sidebar-menu .s-sidebar-link {
    font-weight: 400;
}

.s-sidebar-link-text {
    flex-grow: 1;
}

.s-sidebar-menu-toggle {
    flex: 0 0 1em;
    text-align: center;
    transform-origin: 0.5em 50%;
}

.s-sidebar-header {
    background-color: #3c8dbc;
    border-bottom: 1px solid #e8e9ea;
    border: none;
    height: 48px !important;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
}

.s-sidebar-header-actions {
    margin-left: auto;
    display: flex;
    justify-content: center;
}

.s-sidebar-toggler {
    font-size: 32px;
    line-height: 32px;
    text-align: center;
    color: white;
    border: none;
    background: none;
}

.s-sidebar-toggler:focus,
.s-sidebar-toggler:focus-visible {
    outline: none;
    box-shadow: none;
}

.s-sidebar-header-logo {
    width: 30px;
    height: 30px;
}

.s-sidebar-header-title {
    margin-left: 8px;
    color: #007eff;
}

[aria-expanded=true] > .s-sidebar-menu-toggle {
    transform: rotate(90deg);
}

.s-sidebar-search {
    position: relative;
}

.s-sidebar-search-icon {
    position: absolute;
    left: 0.4em;
    top: 0.4em;
    font-size: 15px;
}

.s-sidebar-search-input {
    padding-left: 2.3rem;
    border: 1px solid #ddd;
    line-height: 23px;
}

.s-sidebar-search-input:active,
.s-sidebar-search-input:focus {
    outline: none;
}

.is-match > .s-sidebar-menu.collapse {
    display: block;
}

.is-match.s-sidebar-group {
    display: block;
    margin-bottom: 1.5rem;
}

.s-sidebar-item.non-match,
.s-sidebar-group.non-match {
    display: none !important;
}

.s-sidebar-item.is-match.has-children > a {
    pointer-events: none;
}

@media (min-width: 1200px) {
    .s-sidebar {
        top: 48px;
        transform: translateX(0);
    }

    .s-main {
        padding-left: 300px;
    }

    .s-sidebar-toggler {
        visibility: hidden;
        width: 10px !important;
    }
}

.hidden,
:root .hidden {
    display: none !important;
}

.text-aqua {
    color: #51b6ff !important;
}

.text-blue {
    color: var(--bs-blue) !important;
}

.text-fuchsia {
    color: #f012be !important;
}

.text-gray {
    color: var(--bs-gray) !important;
}

.text-green {
    color: var(--bs-green) !important;
}

.text-light-blue {
    color: #3c8dbc !important;
}

.text-lime {
    color: #01ff70 !important;
}

.text-maroon {
    color: #d81b60 !important;
}

.text-navy {
    color: #0055ad !important;
}

.text-olive {
    color: #3d9970 !important;
}

.text-orange {
    color: var(--bs-orange) !important;
}

.text-purple {
    color: var(--bs-purple) !important;
}

.text-red {
    color: var(--bs-red) !important;
}

.text-teal {
    color: var(--bs-teal) !important;
}

.text-yellow {
    color: var(--bs-yellow) !important;
}

body.disable-css-transitions *,
body.disable-css-transitions *:after,
body.disable-css-transitions *:before {
    transition: none !important;
}

.card {
    background-color: #fff;
    border: 1px solid #e8e9ea;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(53, 65, 76, 0.03);
}

.card-header {
    border-bottom-color: #e8e9ea;
}

.card-header:first-child {
    border-radius: 4px 4px 0 0;
}

body {
    min-width: 320px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga" 0;
}

section.content {
    padding: 1.25rem;
    min-height: calc(100vh - 50px);
}

section.content-header {
    padding-bottom: 1rem;
}

.full-height-page section.content {
    display: flex;
    flex-direction: column;
}

section.content > .s-Panel,
section.content > .s-DataGrid {
    flex: 1 1 auto;
}

section.content-header > h1 {
    font-size: 1.75rem;
}

section.content > .s-DataGrid {
    background-color: #fff;
    border: 1px solid #e8e9ea;
    padding: 1rem;
}

.slick-row {
    line-height: 19px;
}

.slick-cell a, .category-anchor {
    text-decoration: none;
}

.slick-cell input[type=text] {
    padding-top: 0;
    padding-bottom: 0;
}

.slick-cell input[type=text], select {
    border-color: #ddd;
    border-style: solid;
    border-width: 1px;
}

.s-Toolbar .button-inner {
    line-height: 18px;
}

.s-Form input {
    padding: 1px 3px;
}

.ui-front {
    z-index: 1031;
}

.ui-dialog-titlebar-close {
    border: none;
    background: transparent;
    color: white;
}

.ui-dialog.mobile-layout .ui-dialog-titlebar-close {
  filter: invert(1);
}

.ui-dialog-buttonset button {
    border-width: 1px;
}

.ui-datepicker-trigger {
  border: none;
  background-color: transparent;
}

.fa-clipboard-check::before {
  content: "\f0c7";
}

[VictorTomaili]

Instead of writing full CSS, you can check the files directly from this link.
https://github.com/serenity-is/serene/tree/master/src/Serene.Web/wwwroot/Content/site

I did not test yet, but if there is a missing CSS about scrolling menu content, feel free to open a pull request to fix it.

[gfo2007]

@VictorTomaili @arunkumar12712 @heleopless50 I saw this code online and tried it out.

overflow-y: auto;

I added it to .s-sidebar in common-theme.css and it worked.

.s-sidebar {
  position: fixed;
  top: 48px;
  left: 0;
  bottom: 0;
  transform: translateX(-100%);
  z-index: 11;
  display: flex;
  width: 300px;
  overflow-y: auto;
}

[heleopless50]

Ok nice
it is as i expected , you was setting the overflow to hidden