Почему появляется вертикальный скролл при overflow-x: auto?
Всем доброго времени суток, в общем у меня есть table в котором есть поле с мультиселектом, и есть контейнер над этим table который я хочу сделать overflow-x: auto; собственно я так и сделал, но, когда открывается выпадающий список моего multiselect появляется вертикальный скролл хотя я не задавал overflow-y:auto; Вот код:
Код структуры
<div class="table_container"> <UTable :headers="headers" :data="data"> </template> <template #column5="{ entity }"> <multiselect v-model="entity.type" :options="options" :searchable="false" :close-on-select="true" :show-labels="false" :allow-empty="false" placeholder="Pick a value" ></multiselect> </template> </UTable> </div> |
<div class="table_container"> <UTable :headers="headers" :data="data"> </template> <template #column5="{ entity }"> <multiselect v-model="entity.type" :options="options" :searchable="false" :close-on-select="true" :show-labels="false" :allow-empty="false" placeholder="Pick a value" ></multiselect> </template> </UTable> </div>
Основные стили
/* UTable */ .table_container { width: 1125px; margin: 0px auto; overflow-x: auto; } .table_container::-webkit-scrollbar { width: 10px; height: 10px; /* width of the entire scrollbar */ } .table_container::-webkit-scrollbar-track { background: transparent; /* color of the tracking area */ } .table_container::-webkit-scrollbar-thumb { background-color: var(--main_color_scroll); /* color of the scroll thumb */ border-radius: 3px; /* roundness of the scroll thumb */ border: 1px solid transparent; /* creates padding around scroll thumb */ } table { border-collapse: collapse; width: 100%; /* padding-left: 150px; padding-right: 150px; */ border-radius: 10px; table-layout: auto !important; word-wrap: break-word; } td { padding: 24px; text-align: left; border-bottom: 1px solid rgb(224, 242, 237); } th { width: 20%; text-align: left; } .header-item { padding: 30px 20px; font-size: 12px; background-color: rgba(19, 97, 162, 0.08); text-transform: uppercase; } .table-rows:nth-child(odd) { background-color: rgb(250, 250, 250); } .table-rows:nth-child(n):hover { background-color: rgba(19, 162, 68, 0.04); } /* UTabel_end */ |
/* UTable */ .table_container { width: 1125px; margin: 0px auto; overflow-x: auto; } .table_container::-webkit-scrollbar { width: 10px; height: 10px; /* width of the entire scrollbar */ } .table_container::-webkit-scrollbar-track { background: transparent; /* color of the tracking area */ } .table_container::-webkit-scrollbar-thumb { background-color: var(--main_color_scroll); /* color of the scroll thumb */ border-radius: 3px; /* roundness of the scroll thumb */ border: 1px solid transparent; /* creates padding around scroll thumb */ } table { border-collapse: collapse; width: 100%; /* padding-left: 150px; padding-right: 150px; */ border-radius: 10px; table-layout: auto !important; word-wrap: break-word; } td { padding: 24px; text-align: left; border-bottom: 1px solid rgb(224, 242, 237); } th { width: 20%; text-align: left; } .header-item { padding: 30px 20px; font-size: 12px; background-color: rgba(19, 97, 162, 0.08); text-transform: uppercase; } .table-rows:nth-child(odd) { background-color: rgb(250, 250, 250); } .table-rows:nth-child(n):hover { background-color: rgba(19, 162, 68, 0.04); } /* UTabel_end */
Стили multiselect
fieldset[disabled] .multiselect { pointer-events: none; } .multiselect__spinner { position: absolute; right: 1px; top: 1px; width: 40px; height: 38px; background: #fff; display: block; } .multiselect__spinner::before, .multiselect__spinner::after { position: absolute; content: ""; top: 50%; left: 50%; margin: -8px 0 0 -8px; width: 16px; height: 16px; padding: 20px; border-radius: 100%; border-color: #41b883 transparent transparent; border-style: solid; border-width: 2px; box-shadow: 0 0 0 1px transparent; } .multiselect__spinner::before { animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62); animation-iteration-count: infinite; } .multiselect__spinner::after { animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8); animation-iteration-count: infinite; } .multiselect__loading-enter-active, .multiselect__loading-leave-active { transition: opacity 0.4s ease-in-out; opacity: 1; } .multiselect__loading-enter, .multiselect__loading-leave-active { opacity: 0; } .multiselect, .multiselect__input, .multiselect__single { font-family: inherit; font-size: 16px; touch-action: manipulation; } .multiselect { box-sizing: content-box; display: block; position: relative; width: 100%; min-height: 40px; text-align: left; color: #35495e; } .wide-multiselect .multiselect { width: 100% !important; } /* Стили для узкого мультиселекта */ .narrow-multiselect .multiselect { width: 320px !important; } .multiselect * { box-sizing: border-box; } .multiselect:focus { outline: none; } .multiselect--disabled { background: #ededed; pointer-events: none; opacity: 0.6; } .multiselect--active { z-index: 50; } .multiselect--active:not(.multiselect--above) .multiselect__current, .multiselect--active:not(.multiselect--above) .multiselect__input, .multiselect--active:not(.multiselect--above) .multiselect__tags { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .multiselect--active .multiselect__select { transform: rotateZ(180deg); } .multiselect--above.multiselect--active .multiselect__current, .multiselect--above.multiselect--active .multiselect__input, .multiselect--above.multiselect--active .multiselect__tags { border-top-left-radius: 0; border-top-right-radius: 0; } .multiselect__input, .multiselect__single { position: relative; display: inline-block; min-height: 20px; line-height: 20px; border: none; border-radius: 5px; background: #fff; padding: 0 0 0 5px; width: calc(100%); transition: border 0.1s ease; box-sizing: border-box; margin-bottom: 8px; vertical-align: top; } .multiselect__input::-moz-placeholder { color: #35495e; } .multiselect__input::placeholder { color: #35495e; } .multiselect__tag~.multiselect__input, .multiselect__tag~.multiselect__single { width: auto; } .multiselect__input:hover, .multiselect__single:hover { border-color: #cfcfcf; } .multiselect__input:focus, .multiselect__single:focus { border-color: #a8a8a8; outline: none; } .multiselect__single { padding-left: 5px; margin-bottom: 8px; } .multiselect__tags-wrap { display: inline; } .multiselect__tags { min-height: 40px; display: block; padding: 8px 40px 0 8px; border-radius: 5px; border: 1px solid #e8e8e8; background: #fff; font-size: 14px; } .multiselect__tag { position: relative; display: inline-block; padding: 10px 28px 10px 12px; border-radius: 5px; margin-right: 10px; color: #fff; line-height: 1; background: var(--main_color_green); margin-bottom: 5px; white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: ellipsis; } .multiselect__tag-icon { cursor: pointer; margin-left: 7px; position: absolute; right: 0; transform: translateY(-50%); top: 45%; bottom: 0; font-weight: 700; font-style: initial; width: 22px; text-align: center; line-height: 22px; transition: all 0.2s ease; border-radius: 5px; } .multiselect__tag-icon::after { content: "×"; color: #266d4d; font-size: 14px; } /* // Remove these lines to avoid green closing button //.multiselect__tag-icon:focus, //.multiselect__tag-icon:hover { // background: #369a6e; //} */ .multiselect__tag-icon:focus::after, .multiselect__tag-icon:hover::after { color: white; } .multiselect__current { line-height: 16px; min-height: 40px; box-sizing: border-box; display: block; overflow: hidden; padding: 8px 12px 0; padding-right: 30px; white-space: nowrap; margin: 0; text-decoration: none; border-radius: 5px; border: 1px solid #e8e8e8; cursor: pointer; } .multiselect__select { line-height: 16px; display: block; position: absolute; box-sizing: border-box; width: 40px; height: 38px; right: 1px; top: 4px; padding: 4px 8px; margin: 0; text-decoration: none; text-align: center; cursor: pointer; transition: transform 0.2s ease; } .multiselect__select::before { position: relative; right: 0; top: 65%; color: #999; margin-top: 4px; border-style: solid; border-width: 5px 5px 0 5px; border-color: #999 transparent transparent transparent; content: ""; } .multiselect__placeholder { color: #adadad; display: inline-block; margin-bottom: 10px; padding-top: 2px; } .multiselect--active .multiselect__placeholder { display: none; } .multiselect__content-wrapper { position: absolute; display: block; background: #fff; width: 100%; height: fit-content !important; top: 100%; overflow: auto; border: 1px solid #e8e8e8; border-top: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; z-index: 50; -webkit-overflow-scrolling: touch; } .multiselect__content { list-style: none; display: inline-block; padding: 0; margin: 0; min-width: 100%; vertical-align: top; } .multiselect--above .multiselect__content-wrapper { bottom: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: none; border-top: 1px solid #e8e8e8; } .multiselect__content::-webkit-scrollbar { display: none; } .multiselect__element { display: block; } .multiselect__option { display: block; padding: 12px; min-height: 40px; line-height: 16px; text-decoration: none; text-transform: none; vertical-align: middle; position: relative; cursor: pointer; white-space: nowrap; } .multiselect__option::after { top: 0; right: 0; position: absolute; line-height: 40px; padding-right: 12px; padding-left: 20px; font-size: 13px; } .multiselect__option--highlight { background: #41b883; outline: none; color: white; } |
fieldset[disabled] .multiselect { pointer-events: none; } .multiselect__spinner { position: absolute; right: 1px; top: 1px; width: 40px; height: 38px; background: #fff; display: block; } .multiselect__spinner::before, .multiselect__spinner::after { position: absolute; content: ""; top: 50%; left: 50%; margin: -8px 0 0 -8px; width: 16px; height: 16px; padding: 20px; border-radius: 100%; border-color: #41b883 transparent transparent; border-style: solid; border-width: 2px; box-shadow: 0 0 0 1px transparent; } .multiselect__spinner::before { animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62); animation-iteration-count: infinite; } .multiselect__spinner::after { animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8); animation-iteration-count: infinite; } .multiselect__loading-enter-active, .multiselect__loading-leave-active { transition: opacity 0.4s ease-in-out; opacity: 1; } .multiselect__loading-enter, .multiselect__loading-leave-active { opacity: 0; } .multiselect, .multiselect__input, .multiselect__single { font-family: inherit; font-size: 16px; touch-action: manipulation; } .multiselect { box-sizing: content-box; display: block; position: relative; width: 100%; min-height: 40px; text-align: left; color: #35495e; } .wide-multiselect .multiselect { width: 100% !important; } /* Стили для узкого мультиселекта */ .narrow-multiselect .multiselect { width: 320px !important; } .multiselect * { box-sizing: border-box; } .multiselect:focus { outline: none; } .multiselect--disabled { background: #ededed; pointer-events: none; opacity: 0.6; } .multiselect--active { z-index: 50; } .multiselect--active:not(.multiselect--above) .multiselect__current, .multiselect--active:not(.multiselect--above) .multiselect__input, .multiselect--active:not(.multiselect--above) .multiselect__tags { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .multiselect--active .multiselect__select { transform: rotateZ(180deg); } .multiselect--above.multiselect--active .multiselect__current, .multiselect--above.multiselect--active .multiselect__input, .multiselect--above.multiselect--active .multiselect__tags { border-top-left-radius: 0; border-top-right-radius: 0; } .multiselect__input, .multiselect__single { position: relative; display: inline-block; min-height: 20px; line-height: 20px; border: none; border-radius: 5px; background: #fff; padding: 0 0 0 5px; width: calc(100%); transition: border 0.1s ease; box-sizing: border-box; margin-bottom: 8px; vertical-align: top; } .multiselect__input::-moz-placeholder { color: #35495e; } .multiselect__input::placeholder { color: #35495e; } .multiselect__tag~.multiselect__input, .multiselect__tag~.multiselect__single { width: auto; } .multiselect__input:hover, .multiselect__single:hover { border-color: #cfcfcf; } .multiselect__input:focus, .multiselect__single:focus { border-color: #a8a8a8; outline: none; } .multiselect__single { padding-left: 5px; margin-bottom: 8px; } .multiselect__tags-wrap { display: inline; } .multiselect__tags { min-height: 40px; display: block; padding: 8px 40px 0 8px; border-radius: 5px; border: 1px solid #e8e8e8; background: #fff; font-size: 14px; } .multiselect__tag { position: relative; display: inline-block; padding: 10px 28px 10px 12px; border-radius: 5px; margin-right: 10px; color: #fff; line-height: 1; background: var(--main_color_green); margin-bottom: 5px; white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: ellipsis; } .multiselect__tag-icon { cursor: pointer; margin-left: 7px; position: absolute; right: 0; transform: translateY(-50%); top: 45%; bottom: 0; font-weight: 700; font-style: initial; width: 22px; text-align: center; line-height: 22px; transition: all 0.2s ease; border-radius: 5px; } .multiselect__tag-icon::after { content: "×"; color: #266d4d; font-size: 14px; } /* // Remove these lines to avoid green closing button //.multiselect__tag-icon:focus, //.multiselect__tag-icon:hover { // background: #369a6e; //} */ .multiselect__tag-icon:focus::after, .multiselect__tag-icon:hover::after { color: white; } .multiselect__current { line-height: 16px; min-height: 40px; box-sizing: border-box; display: block; overflow: hidden; padding: 8px 12px 0; padding-right: 30px; white-space: nowrap; margin: 0; text-decoration: none; border-radius: 5px; border: 1px solid #e8e8e8; cursor: pointer; } .multiselect__select { line-height: 16px; display: block; position: absolute; box-sizing: border-box; width: 40px; height: 38px; right: 1px; top: 4px; padding: 4px 8px; margin: 0; text-decoration: none; text-align: center; cursor: pointer; transition: transform 0.2s ease; } .multiselect__select::before { position: relative; right: 0; top: 65%; color: #999; margin-top: 4px; border-style: solid; border-width: 5px 5px 0 5px; border-color: #999 transparent transparent transparent; content: ""; } .multiselect__placeholder { color: #adadad; display: inline-block; margin-bottom: 10px; padding-top: 2px; } .multiselect--active .multiselect__placeholder { display: none; } .multiselect__content-wrapper { position: absolute; display: block; background: #fff; width: 100%; height: fit-content !important; top: 100%; overflow: auto; border: 1px solid #e8e8e8; border-top: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; z-index: 50; -webkit-overflow-scrolling: touch; } .multiselect__content { list-style: none; display: inline-block; padding: 0; margin: 0; min-width: 100%; vertical-align: top; } .multiselect--above .multiselect__content-wrapper { bottom: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: none; border-top: 1px solid #e8e8e8; } .multiselect__content::-webkit-scrollbar { display: none; } .multiselect__element { display: block; } .multiselect__option { display: block; padding: 12px; min-height: 40px; line-height: 16px; text-decoration: none; text-transform: none; vertical-align: middle; position: relative; cursor: pointer; white-space: nowrap; } .multiselect__option::after { top: 0; right: 0; position: absolute; line-height: 40px; padding-right: 12px; padding-left: 20px; font-size: 13px; } .multiselect__option--highlight { background: #41b883; outline: none; color: white; }
Дополнительно:
Ответы:
он автоматически задается. Нельзя сделать auto/hidden/scroll по одной стороне и visible по другой.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Появление вертикального скролла при использовании свойства overflow-x: auto может быть вызвано несколькими причинами. Одной из основных причин может быть наличие внутреннего содержимого элемента, которое шире, чем ширина самого элемента.
Для того чтобы избежать появления вертикального скролла, необходимо установить свойство overflow-y: hidden для родительского элемента. Таким образом, вертикальный скролл не будет отображаться, даже если содержимое элемента превышает его ширину.
Пример:
.parent { width: 200px; overflow-x: auto; overflow-y: hidden; } .child { width: 300px; }
В данном примере, если содержимое элемента с классом "child" превышает ширину элемента с классом "parent", то появится горизонтальный скролл, но вертикальный скролл не будет отображаться из-за свойства overflow-y: hidden.
Также следует убедиться, что другие стили не переопределяют указанные свойства, и что ширина родительского элемента достаточна для отображения всего содержимого внутри него без появления скроллов.
Если проблема сохраняется, можно также проверить содержимое элемента на наличие лишних отступов, паддингов или маргинов, которые могут влиять на его ширину и вызывать появление скроллов.
Надеюсь, это поможет вам решить проблему с вертикальным скроллом при использовании свойства overflow-x: auto. Если у вас остались дополнительные вопросы, не стесняйтесь задавать их.