|
Subject:
|
overlapping Parent div Scroll bar
|
|
Posted By:
|
anantdev
|
Post Date:
|
7/25/2008 8:07:00 AM
|
Hi All,
i've nested HTML Div, parent Div is having horizontal Scroll bar,
child Div contains TextArea with some larger size than parent. BUT the textArea is going behind the scroll bar. i want to textArea on the top of parent scroll bar.
For better understanding look at the bellow HTML Code snippet.
<script language="JavaScript">
function showExpandedTextArea(){
var expandedTextAreaDivVar = document.getElementById('expendedtextarea_div');
var id_parentVar = document.getElementById('id_parent');
expandedTextAreaDivVar.style.display="";
var divTextarea = document.getElementById('expandedTextArea_0');
}
</script>
<style type="text/css">
div.scrollable
{ font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #FF00FF;height:150;border:1px solid;width :350; scrollbar-3dlight-color:black;position:absolute; scrollbar-arrow-color:black; overflow : hidden; overflow: scroll; overflow-y:hidden;}
</style>
<div class="scrollable" id="id_parent" >
<table id="expendedtextarea_div" style="position:relative;display:none; left:30; top:80" border="0">
<tr nowrap bgcolor="white">
<td colspan="2" valign="top">
textarea<TEXTAREA NAME="expandedTextArea_0" ROWS="5" COLS="15"></TEXTAREA></td></tr></table>
<div id="div_2" style="position:absolute;left:0; top:34">
<table> <tr><td nowrap>
PH<TEXTAREA name="minValText_0" rows="1" cols = "22" ></TEXTAREA> <INPUT TYPE="image" SRC="\arrow.gif" onclick=showExpandedTextArea();></td></tr></table>
</div>
</div>
anant
|
|
Reply By:
|
ssteward54
|
Reply Date:
|
7/28/2008 9:14:50 AM
|
Try adding the px to height and width styles.
height: 150px; width: 350px;
Shawn Steward
Web Developer
www.shawnsteward.com
|
|
Reply By:
|
anantdev
|
Reply Date:
|
7/28/2008 10:20:35 PM
|
Hi,
i guess you didn't get my problem exactly. i want textArea should prompt on the top of horizontal scroll bar. is there anyway we can overlap scrollbar with textArea(we are using nested DIV respectively). situation is like that we cant increase width or we can't use vertical scrollbar.
anyway we have to overlap textArea on the top of scrollbar..?
please help me out.
i would be highly greatful if you try to resolve this.
anant
|
|
Reply By:
|
ssteward54
|
Reply Date:
|
7/29/2008 9:17:13 AM
|
I'm really not sure exactly what you're trying to accomplish... If I understand you right, here is how you can use absolute positioning to put the small textarea (PH) on top of the horizontal scrollbar of the id_parent div. Trying to figure out what you're trying to do with the javascript but not quite following it...
<script language="JavaScript">
function showExpandedTextArea(){
var expandedTextAreaDivVar = document.getElementById('expendedtextarea_div');
var id_parentVar = document.getElementById('id_parent');
expandedTextAreaDivVar.style.display="";
var divTextarea = document.getElementById('expandedTextArea_0');
}
</script>
<style type="text/css">
div.scrollable{
height:150px;
border:1px solid;
width :350px;
position:absolute;
overflow-x: scroll;
}
</style>
<div class="scrollable" id="id_parent">
textarea<TEXTAREA NAME="expandedTextArea_0" ROWS="5" COLS="15"></TEXTAREA>
</div>
<div id="div_2" style="position:absolute;left:40px; top: 134px;">
PH<TEXTAREA name="minValText_0" rows="1" cols = "22" ></TEXTAREA><INPUT TYPE="image" SRC="\arrow.gif" onclick="showExpandedTextArea();">
</div>
Shawn Steward
Web Developer
www.shawnsteward.com
|
|
Reply By:
|
derrick
|
Reply Date:
|
8/11/2008 6:21:58 AM
|
In my opinion Try adding the px to height and width styles.
height: 150px; width: 350px;
|
