Hi,
Normally if you click anywhere on drop down box, list will show up. in my case beside this, even if I click outside the box, the areas in red boxes, drop list will show up as well! could any one help me how to fix this.
my code is:
.d_flex { display: flex; align-items: center; } .d_flex img { width: 30px; height: 30px; object-fit: contain; border-radius: 100%; margin-right: 10px; } .select_wrapper { margin-bottom: 20px; } .select2-results ul:not(.list-unstyled) li:before { background-color: transparent; } .select2-results .select2-results__option { display: flex; align-items: center; padding: 5px 15px; } .select2-container .select2-selection--single { height: 40px !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 39px !important; } .select2-container--default .select2-selection--single { border-radius: 0px !important; } .select2-container--default .select2-selection--single .select2-selection__arrow b { top: 70% !important; } .select2-search--dropdown{ display: none !important; } .select_wrapper label { margin-left: 50px; } .select_wrapper label span { color: red; } .d_flex { display: flex; align-items: center; } .d_flex img { width: 30px; } .selector { width: 120%; position: relative; margin-bottom: 20px; } .selector_wrapper { display: flex; align-items: center; } .selector_wrapper label{ margin-left: 55px; } .selector_wrapper label span { color: red; } .selectField { width: 50%; padding: 0px 20px 0 8px; border: 1px solid #aaa; box-sizing: border-box; background-color: #fff; border-radius: 0px; margin-bottom: 0; height: 40px; cursor: pointer; position: relative; overflow: hidden; } .selectField::after{ position: absolute; content: ""; border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; right: 5px; margin-left: -4px; margin-top: -2px; top: 50%; width: 0; } p.selectText { margin: 0; line-height: 36px; } .selectField img { width: 15px; } .list { width: 50%; background-color: #ffffff; padding: 0; box-sizing: border-box; margin: 0; border-width: 0px 1px 1px; border-color: #aaa; border-style: solid; height: 200px; overflow-y: scroll; position: absolute; top: 40px; left: 0; z-index: 99; list-style-type: none; } .options { list-style-type: none; padding: 10px 0 10px 12px; cursor: pointer; position: relative; } ul:not(.list-unstyled) li.options:before{ background-color: transparent; } .options:hover { background-color: #5897fb; color: #fff; } .options_img { padding-left: 50px !important; } .options img { position: absolute; top: 6px; width: 30px; height: 30px; object-fit: contain; border-radius: 100%; left: 10px; } .hide { display: none; } .btn_disabled{ pointer-events: none !important; } .btn_disabled::after{ position: absolute; content: ""; width: 100%; height: 100%; background-color: #42bbec; opacity: 0.4; cursor: not-allowed; z-index: 999; }