Modal psuje się przez scrollbar'a

Question

Witam,

Po kliknięciu kółka na myszce pokazuje się specjalny kursor, który umożliwia scrollowanie strony lub zawartości.

Na zdjęciu widać modal, który na pierwszy rzut oka działa i wszystko jest z nim w porządku jednak, po kliknięciu tego kółka na myszce cały modal się przesuwa w prawo.

<div class="visual-settings-bg">
            <div class="visual-settings-modal">
                <div class="close-section">
                    <span class="close-vsm">
                        <i class="icon-cancel"></i>
                    </span>
                    <span class="title">Visual Settings</span>
                </div>

                <div id="text-images-section" class="sections">
                    <div class="header">
                        <span class="header-ins">Text and images</span>
                    </div>
                    <div class="text-images-content">
                        
                        <input type="color" id="background" class="color-picker">
                        <input type="color" id="map-border" class="color-picker">
                        <input type="color" id="food" class="color-picker">
                        <input type="color" id="ejected-cells" class="color-picker">
                        <input type="color" id="name-outline" class="color-picker">
                        <input type="color" id="mass-outline" class="color-picker">
                        <input type="color" id="mass-text" class="color-picker">

                        <input type="file" id="test" class="custom-file-input">

                    </div>
                </div>

                <div id="name-text-section" class="sections">
                    <div class="header">
                        <span class="header-ins">Name text</span>
                    </div>
                    <div class="name-text-content">
                            <div class="name-section">
                                <span class="font-text">Font</span>
                            <input type="text" name="name-font" class="font" id="name-font" placeholder="Font name">

                            <div class="option-range-slider" id="normal-name-text">
                                <p class="content11">Normal name text</p>                                                    
                                <input class="slider11" id="my-range11" type="range" min="1" max="3" value="2" step="1"> 
                            </div>    

                            <div class="option-range-slider" id="thick-name-outline">
                                <p class="content12">Thick name outline</p>                                                    
                                <input class="slider12" id="my-range12" type="range" min="1" max="3" value="2" step="1"> 
                            </div>    

                            <div class="option-toggle" id="smooth-name-outline">
                                <input id="Smooth-name-outline" type="checkbox" class="form-check-input28" checked>
                                <label for="Smooth-name-outline" class="check-trail28">
                                    <span class="check-handler28"></span>
                                </label>   

                               <span class="smooth-name-outline">Smooth name outline</span>
                            </div>  

                            <div class="option-range-slider" id="long-name-threshold">
                                <span class="content13">Long name threshold</span>                                                                        
                                <input class="slider13" id="my-range13" type="range" min="5" max="2000" value="750" step="5"  onChange="myRange13(this.value)" onmousemove="myRange13(this.value)"> 
                                <p class="value13">Value: <span id="value13">750</span>px</p>
                            </div>

                        </div>
                    </div>
                </div>   
                
                <div id="mass-text-section" class="sections">
                    <div class="header">
                        <span class="header-ins">Mass text</span>
                    </div>
                        <div class="mass-text-content">

                                <p class="font-text-mass">Font</p>
                                <input type="text" name="mass-font" class="font-mass" id="mass-font" placeholder="Font mass">

                                    <p class="content14">Bold mass text</p>                                                                        
                                    <input class="slider14" id="my-range14" type="range" min="1" max="3" value="3" step="1"> 

                                    <p class="content15">Thick mass outline</p>                                                    
                                    <input class="slider15" id="my-range15" type="range" min="1" max="2" value="1" step="1">   
                        
                                    <p class="content16">Small mass text size</p>                                                    
                                    <input class="slider16" id="my-range16" type="range" min="1" max="3" value="1" step="1"> 

                                <div class="mass-text-toggles">

                                    <div class="option-toggle" id="smooth-mass-outline">
                                        <input id="Smooth-mass-outline" type="checkbox" class="form-check-input29" checked>
                                        <label for="Smooth-mass-outline" class="check-trail29">
                                            <span class="check-handler29"></span>
                                        </label>   

                                        <span class="smooth-mass-outline">Smooth mass outline</span>
                                    </div>  

                                    <div class="option-toggle" id="short-mass-format">
                                        <input id="Short-mass-format" type="checkbox" class="form-check-input30" checked>
                                        <label for="Short-mass-format" class="check-trail30">
                                            <span class="check-handler30"></span>
                                        </label>   

                                        <span class="short-mass-format">Short mass format</span>
                                    </div>  
                                </div>                                           
                        </div>
                </div>

                <div id="map-section" class="sections">
                    <div class="header">
                        <span class="header-ins">Map</span>
                    </div>
                    <div class="map-content">
                        
                        <div class="map-image">
                            <div class="option-toggle" id="show-map-image">
                                <input id="Show-map-image" type="checkbox" class="form-check-input31" checked>
                                <label for="Show-map-image" class="check-trail31">
                                    <span class="check-handler31"></span>
                                </label>   

                               <span class="short-mass-format">Show map image</span>
                            </div>  

                            <div class="option-toggle" id="repeat-map-image">
                                <input id="Repeat-map-image" type="checkbox" class="form-check-input32" checked>
                                <label for="Repeat-map-image" class="check-trail32">
                                    <span class="check-handler32"></span>
                                </label>   

                               <span class="repeat-map-image">Repeat map image</span>
                            </div>  

                            <div class="option-toggle" id="always-crop-map-image">
                                <input id="Always-crop-map-image" type="checkbox" class="form-check-input33" checked>
                                <label for="Always-crop-map-image" class="check-trail33">
                                    <span class="check-handler33"></span>
                                </label>   

                               <span class="always-crop-map-image">Always crop map image</span>
                            </div>  
                        </div>

                            <div class="map-opacity">
                                <p class="content17">Map image opacity</p>                                                                        
                                <input class="slider17" id="my-range17" type="range" min="5" max="100" value="60" step="5"  onChange="myRange17(this.value)" onmousemove="myRange17(this.value)"> 
                                <p class="value17">Value: <span id="value17">60</span>%</p>
                            </div>

                            <div class="option-toggle" id="use-food-color">
                                <input id="Use-food-color" type="checkbox" class="form-check-input34">
                                <label for="Use-food-color" class="check-trail34">
                                    <span class="check-handler34"></span>
                                </label>   

                               <span class="use-food-color">Use food color</span>
                            </div>  
                    </div>
                </div>
                                             
                <button class="vsm-btn-restart">
                    <i class="icon-cw"></i>Restart settings
                </button>

                <div class="vsm-bg-restart">
                    <div class="vsm-modal-restart">
                        <p class="are-you-sure-you-want-to-restart-settings">Are you sure you want to restart settings?<p>
                        <button class="yes-vsm">Yes</button>
                        <button class="no-vsm">No</button>
                    </div>
                </div>
            </div>                   

        </div>

.settings-btn {
  border: none;
  border-top-left-radius: 3px;
  background-color: #0f0f0f;
  width: 68.3px;
  height: 35px;
  outline: none;
  cursor: pointer;
  color: rgb(180, 180, 180);
}

.settings-btn:hover {
  background-color: #111111;
}

.settings-btn:active {
  background-color: #0e0e0e;
}

.settings-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.623);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.2s;
  transition: ease-out 0.2s;
}

.settings-bg-active {
  visibility: visible;
  opacity: 1;
}

.settings-modal {
  z-index: 2;
  position: absolute;
  background-color: rgb(20, 20, 20);
  width: 340px;
  height: 462px;
  min-height: 462px;
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: auto;
  word-spacing: normal;
}

.settings-close {
  position: absolute;
  top: 2px;
  right: 5px;
  font-weight: bold ;
  cursor: pointer;
  text-shadow: 0px 0px 2px #fff;
}

.close-section {
  width: 340px;
  height: 35px;
  background-color: #080808;
  box-shadow: 0px 1px 2px #080808;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  margin-bottom: -30px;
  z-index: 2;
}

 

Answer 1

Witaj,

Kod który wkleiłeś(css) to całość? Pytam ponieważ po wklejeniu w CodePen'a wyskakuje coś takiego i bardzo ciężko coś powiedzieć. Tak na szybko to podejrzewam, że to może być związane z tym kawałkiem kodu:

.settings-modal {
  z-index: 2;
  position: absolute;
  background-color: rgb(20, 20, 20);
  width: 340px;
  height: 462px;
  min-height: 462px;
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: auto;
  word-spacing: normal;
}

w szczególności overflow ustawiony na auto. Przy takim ustawieniu jeżeli zawartość niemieści się w widoku, to można "przeskrolować" te zawartość

Comments

Link do całego kodu: https://codepen.io/Nearr2020/pen/PoWejrr

Usunięcie overflow-x: auto; nic nie pomogło.

Przyciski do buttona otwierającego modal'a są na górze  na środkowym div'ie

Opisany błąd mają (od lewej) 3 buttony.

---

Spróbuj w css'ie do wszystkich tych modali np(settings-modal, visual-settings-modal itp) dodać  overflow-x: hidden; co powinno zablokować możliwość scrolowania na osi x

---

działa dziękuję :)