PDA

View Full Version : Scroll Bar is Moving Up And Down



ravimaroju
8 Jan 2013, 3:01 AM
Hi

I Have design a form with ExtJs.

My Form contains more than 15 fields, but i have restricted the form
height by specified value.(in Pixel).

The problem is:
when i fill the data in the text area which is located at bottom of the form, the scroll bar is jumps to Up And Down,

Any Help would be appreciated..
Thank in Adv...

friend
8 Jan 2013, 7:47 AM
This sounds like a simple layout issue. Can you please post a code sample which shows the complete layout of your form and its parent container?

ravimaroju
8 Jan 2013, 8:48 PM
Thank You friend,

Here am sending code snippet ....

jsp:
<td width="86%">
<div id="mcs4_container" style="width: 99%;">
<div>
<div class="container" >
<div id="MainForm">

</div>
</div>
<div class="dragger_container">
<div class="dragger"></div>
</div>
</div>
<a href="#" class="scrollUpBtn"></a> <a href="#" class="scrollDownBtn"></a>
</div>
&nbsp;
</td>


css container defination:

@charset "utf-8";

#mcs4_container{ border: 0px solid red; height:450px; padding:0 0px; }
#mcs4_container .customScrollBox{height:100%; overflow:hidden;border: 0px solid green;}
#mcs4_container .customScrollBox .container{position:relative;width:99%; top:0; float:left;border: 0px solid green; }
#mcs4_container .customScrollBox .content{clear:both;border: 0px solid orange; }
#mcs4_container .customScrollBox .content p{padding:0px 0px; margin:5px 0; border: 2px solid green; }
#mcs4_container .dragger_container{position:relative; width:2px; height:430px; float:left; margin:0px 4px 0 3px; cursor:pointer;background:transparent;}
#mcs4_container .dragger{
position:absolute;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
margin-left:-5px;
border-top: 10px solid #127adb;
overflow:hidden; cursor:pointer;
}
#mcs4_container .dragger_pressed{
position:absolute;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
margin-left:-5px;
border-top: 10px solid #127adb;
overflow:hidden; cursor:s-resize;}


Extjs code:

xtype: 'form',
bodyPadding: '5 5 5',
width: 945,
height: 430
//autoHeight:true,
//autoScroll:true,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
.............
...........

this form is render to MainForm div id