2

I was trying to make a slider, everything was going alright until i put a input inside of it.

If i click inside the input and then drag to the right, all my content will move with the scroll, even if he is set overflow as hidden.

i made a demo with the problem.

here is the source:

<div class="modal-content">
<div class="modal-content-slide">
    <div class="center-slide-content">               
        <div class="right-content">
            <div class="inside-content">
                <p>
                    Click inside the input and drag to the right
                </p>
                <p class="morrow-url-input-wrapper">
                    <input type="text" />
                </p>
            </div>  
        </div>
    </div>
</div>

and css:

.modal-content {
  background-color: #ccc;
  position: relative;
  width: 550px;
  border-radius: 5px;
  margin: 20px;
  height: 240px;
  overflow: hidden;
}

.modal-content-slide {
  position: absolute;
  width: 2100px;
}

.right-content {
  background-color: #515151;
  width: 220px;
  height: 180px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: #285b76 0 1px 1px;  
}

what i'm missing, how can i prevent this ?

Ricardo Binns
  • 3,228
  • 6
  • 44
  • 71
  • I can't reproduce your problem on Chromium. But maybe I didn't understand it. – Denys Séguret Feb 05 '13 at 18:23
  • try clicking inside of input, then hold and drag all to the right. – Ricardo Binns Feb 05 '13 at 18:24
  • I can't reproduce it on Firefox 18.0.1. Clicking in box and dragging to right; nothing happens. Fiddle I went to: http://jsfiddle.net/CqUtA/ – JoshDM Feb 05 '13 at 18:24
  • Are you sure the fiddle you link to is the right one ? – Denys Séguret Feb 05 '13 at 18:25
  • Which browser are you testing it on? – JoshDM Feb 05 '13 at 18:26
  • @JoshDM i'm using the same FF, if i click inside the input and drag all to the right, will hide the square – Ricardo Binns Feb 05 '13 at 18:26
  • I see it now, the inner frame scrolls rightward, correct? – JoshDM Feb 05 '13 at 18:27
  • @JoshDM Chrome, FF , all up to date. – Ricardo Binns Feb 05 '13 at 18:27
  • It only scrolls rightward when the entire light gray box isn't covered by the jsFiddle website inner frame; otherwise there is no scrolling, so as long as the browser window (or frame) you are viewing it in is as wide or wider than the external light gray box, there should be no scrolling. Please confirm this. – JoshDM Feb 05 '13 at 18:29
  • @JoshDM The problem is that this content will be in a modal , in the middle of screen. – Ricardo Binns Feb 05 '13 at 18:31
  • Similar issues? http://stackoverflow.com/questions/10036044/issue-with-click-drag-select-in-text-input-field-also-scrolls-parent-element-we || http://stackoverflow.com/questions/10900210/overflow-hidden-and-input-text-scrolling-in-google-chrome/13897395#13897395 – JoshDM Feb 05 '13 at 18:37
  • @JoshDM look's like the problem is only in webkit, another demo: http://jsbin.com/ujozum/1 – Ricardo Binns Feb 05 '13 at 19:01
  • As others have said, it's just scrolling inside the div: http://jsfiddle.net/CqUtA/3/ – Mooseman Feb 05 '13 at 19:24
  • @RicardoArruda - please confirm; I was correct in my assessment that this is only an issue when it is captured inside a jsfiddle frame that is smaller than the content shown? – JoshDM Feb 05 '13 at 19:55
  • 1
    @JoshDM no it is not just an issue with jsfiddle, it is an issue in webkit. If you have disabled scrolling (by going `overflow: hidden`) you can still drag the page over to see hidden content by clicking and dragging the mouse. – Ryan Feb 05 '13 at 20:06
  • @JoshDM its a webkit issue, already found in the chrome issue list. – Ricardo Binns Feb 06 '13 at 11:12
  • http://code.google.com/p/chromium/issues/detail?id=116655&q=overflow%20hidden%20drag&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20OS%20Area%20Feature%20Status%20Owner%20Summary – Ricardo Binns Feb 06 '13 at 11:13

0 Answers0