DIV Tag Scroll Bars
I have a AP Div box that I want to hold more text than the
vertical length has room for. I checked the box in the Positioning
category for the overflow to scroll. This is all good. But is there
any way to specify that I don't want the scroll bar bottom gray
box?
http://www.communicationssquared.com/C2newsite/services.html
I can deal with the right scroll bar, because it's useful,
but do I have to have that gray non-scroll bar on the bottom?
Thanks.
ethomasmcginnis wrote:
> I have a AP Div box that I want to hold more text than
the vertical length has
> room for. I checked the box in the Positioning category
for the overflow to
> scroll. This is all good. But is there any way to
specify that I don't want the
> scroll bar bottom gray box?
>
>
http://www.communicationssquared.com/C2newsite/services.html
>
> I can deal with the right scroll bar, because it's
useful, but do I have to
> have that gray non-scroll bar on the bottom?
> Thanks.
>
Or even better than Micha's suggestion, let the content flow
down the
page and use the scrollbar the browser gives you.
Bonnie
Similar Messages
-
Floating divs and scroll bar in div
I've been searching the postings and can't find an answer to
this. I'm trying to make #content a div that, when content is too
much for the div, scroll bar will appear and not expand the entire
design. I assigned a height to the div and added overflow:auto; but
it still doesn't work. Please advise! Thank you...again....
http://www.nsbcustomjewelry.com/DIVTEST.shtmlYou page is completely broken in Firefox and IE7.
You will need to go through your container widths because
they are not
correct. In FF for example, you can't see the right sidebar
nav, in IE7,
the content area is being dropped down.
If you remove the margin-left: 175px; from #content and
change the width to
around 322px; it moves it into position correctly, but you
need to narrow
the width of the #leftnav to at least 155px;
Work out the rest of your widths and the right sidebar should
show up ok.
The scrollbar does show up once you narrow down the width of
the content
area. At the moment, there's not enough content in there (at
the width you
have) to invoke a scrollbar.
Hope this helps :)
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
"SisAndi" <[email protected]> wrote in
message
news:f4783n$5ln$[email protected]..
> I've been searching the postings and can't find an
answer to this. I'm
> trying
> to make #content a div that, when content is too much
for the div, scroll
> bar
> will appear and not expand the entire design. I assigned
a height to the
> div
> and added overflow:auto; but it still doesn't work.
Please advise! Thank
> you...again....
>
>
http://www.nsbcustomjewelry.com/DIVTEST.shtml
> -
Horizontal scroll bar in selectOneMenu tag
Hi,
I am using selectOneMenu tag to show the data. The data size is larger than the size of selectOneMenu tag. Inspite of increasing the size of tag,
I want to add a horizontal scroll bar.
Can someone please suggest me, how to achieve this?
Thanks in advance.
Regards,
RahulHi,
As suggested, I am using div tag to set the horizontal scroll bar in SelectOneMenu tag. The way I'm using it :-
<div style="overflow-x:scroll; width:140px;">
<h:selectOneMenu
id="eventType"
styleClass="standardInput"
required="true"
tabindex="40"
onchange="clearMessage(this);"
value="#{UserBean.activeEvent.eventType}"
onkeydown="searchSelect( event);"
onblur="searchBlur(event);" >
<f:selectItems value="#{ReferenceLists.eventTypeList}" />
</h:selectOneMenu>
</div>
This is adding the scroll bar outside the selectOneMenu tag but I want it in the dropdown window.
Please suggest me, how to resolve the issue.
Regards,
Rahul -
Issue with div "s4-workspace" and scroll bar
Hi,
I have a standard publishing site, I just added an horizontal menu (the publishing site doesn't have it) but I'm experiencing a strange behavior:
With my custom menu the div "s4-workspace" shifts down by the height of the menu and I cannot see the end part of the page content.
I noticed this because I was looking at the workspace right scroll bar and I could not see the end.
I copied my horizontal menu from the Team Site, where the menu is scrolling inside the workspace, but I want to keep it fix under the ribbon.
I guess that it's a div displacement problem, but I could not find anything to fix it. I opened the nigthandday.css and the core4.css looking for some CSS style property, but nothing...
This is what it looks like:
<!-- Ribbon end -->
<div>
<!-- my custom menu -->
</div>
<div id="s4-workspace">
Any help?
Thank you,
Nicola.If you look at the page, you will notice that the whole page doesn't scroll by default. Only the S4-workspace and below scrolls. This is done through the use of a Javascript. Your problem is that you have inserted something between the
div's at the top of the page and the S4-workspace div. The javascript isn't aware of that and so it's not factoring in that height when it calculates how to scroll the page. So you can never reach the bottom.
To fix it you need to either remove the factors that cause the partial page scrolling and scroll the whole page or insert your menu into either the top of the s4-workspace div or one of the other existing div's at the top of the page. Take a look at
the following article for a more indepth explanation.
http://blogs.msdn.com/b/sharepoint/archive/2010/04/06/customizing-ribbon-positioning-in-sharepoint-2010-master-pages.aspx
Paul Stork SharePoint Server MVP -
Focus vertical scroll bar in report div
Hi everyone,
I just want to know if the issue has been resolved by someone :
I have a report within a div and a vertical scrolling bar to scroll the rows. When I click on a row of the report the row is highlighted. Now, if the clicked row is at the end of the report, the scrolling bar goes up, and the user has to scroll down to see the selected row. So how to focus this scrolling bar once the user clicks on the row ?
I guess I have to compute the id of the selected row times the row height and send this value to the css parameter of the scroll bar (but AFAIK there's no such parameter in css for positioning a scroll bar) ... Someone has came up with a solution ?
Best regards,
Othman.Thanks a lot Andy,
I didnt' know about the scrollTop attribute. So for those how are interested : Each time I click on a row, I store the scrollTop position in a Hidden field. On each body onload, I call a javascript function to position the scroll bar of the div like this :
getElementById.("mydiv").scollTop = html_GetElement('P1_SCROLL_ID').value;
Regards,
Othman -
iframe tag + disable horizontal scroll-bar
Hi..
I want to disable horizontal scroll-bar only.The code is::
<iframe>
style="overflow-x:hidden;overflow-y:visible"
</iframe>
It's working in IE but not in mozilla firefox.
Can anyone plz help.
regards
SoniaFunny, I tried it out; it's working in Firefox but NOT in IE 7.
Check these out and do a little tweaking I guess....
http://www.brunildo.org/test/Overflowxy2.html
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
Not a Java question though... -
Content and scroll bar spill out of div at bottom
Hello again,
One final teething problem on my website. I have set overflow to auto so a scrollbar will appear if the content exceeds the height specified. I want the window to be scaleable so there are no problems on smaller monitors.
However, if I resize my browser window, the content of the div and the scroll bar both exceed the height of the div and appear behind my footer (#copyright) and hit the bottom of the window, not the bottom of the div. I can't understand this, so I'm here to plead for help!
Pic: http://img156.imageshack.us/img156/9589/screenshot20101013at202.png
The page has a spry menubar, but I don't think this can be related. If it is, it can be seen in my earlier thread. The HTML and CSS have been updated here:
HTML: http://codeviewer.org/view/code:1295
CSS: http://codeviewer.org/view/code:1296
Thank you very much for any help!It's not clear to me what is actually your code and what may have been injected by your host.
Are you putting google ads and pop-up ads on your page or is your web host doing this? Very annoying.
Are you putting #catfish12861ecc into a position: fixed container or is your host doing this?
Did you put your #copyright into a position: fixed container? I think that should remain static (default) to work well on your site.
Finally have you run your code through the W3C Validation tools?
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fegparadigm.bestinternetdancer.com %2FPhotography%2Fconceptual%2Fexistence%2Fgallery.html%23
Again, I'm not sure if the reported errors are caused by your code or something your host is doing...
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
How to get Auto scroll bar in a JSP?
Hi Gurus,
I have created a custom jsp page in a B2B application. How to get the auto scroll bar when page is exceeded than it can display?
Is there any specific tag or div which is to be included to get this scroll bar?
Thanks a lot in advance!!
Regards,
Lakshman.Hi Lakshman,
You can include it in stylsheet and then use that class in your <body> or "div" tag.
the CSS command is
overflow:auto;
you can use like
<body style="overflow: auto;"> or -- div style="overflow: auto;"
You can declare class in ".css" file
#c1
.c1
<body id="c1>> or <div id="c1">
<body class="c1>> or <div class="c1">
You can use either "class" or "id" by adding it to "CSS" file and the use it to any JSP file or by direct aditing "Style" attirbute in tag.
so when your content is longer then your screen browser will display scroll bar automatically.
I hope this will help you.
Thanks and Regards.
eCommerce Developer
Edited by: Ecommerce Developer on Jul 9, 2009 5:58 PM
Edited by: Ecommerce Developer on Jul 9, 2009 5:59 PM -
Horizontal scroll bar missing after switch to Apex 4 theme
Hi,
I upgraded Apex to 4.02 and switch my application theme from old 3.2 theme to new Apex 4.0 theme,
I found that all the Apex 4.02 won't show horizontal scroll if the interactive report width larger than the browser windows width.
Is this the default behaviour of all the 4.0 theme?
How can I change it to display the horizontal scroll bar.
Thanks
VincentHow about editing the template with some css?
something like this should fix your problems (worked fine for me)
#two-col
overflow: auto;
dont forget to change the template body (Shared Components --> Templates --> Edit Page Template )
(div class="tab-holder")
#REGION_POSITION_04#
(/div)
note: I reversed the tags to ( ) because it dont shows them else
Edited by: Blacksev on 26.01.2012 22:21
Edited by: Blacksev on 26.01.2012 22:57
Edited by: Blacksev on 26.01.2012 22:58 -
Hi
I want to set scroll bar in my report ..my column names should be fixed header...I surely need vertical scroll bar than horizontal scroll bar...I used the following javascript code to display scroll bar.
<script language="JavaScript" type="text/javascript">
<!-- Hide
//Function Builds Static Header and Scrollable Div called with document onload
function MakeStaticHeader(xDataGridName,xScrollHeight){
//Grab the Table object
var theTable = document.getElementById(xDataGridName);
//Create a holder div so div header can be added correctly before table
var myHolderDiv = document.createElement("div");
myHolderDiv.setAttribute('id','tableHolder_'+ xDataGridName)
//Create the Header Div, setting id and adding to Holder
var myHeaderDiv = document.createElement("div");
myHeaderDiv.setAttribute('id','divHeader_' + xDataGridName)
myHolderDiv.appendChild(myHeaderDiv);
//Insert the Holder and Header divs
theTable.parentNode.insertBefore(myHolderDiv,theTable);
//Append the Child
myHolderDiv.appendChild(theTable)
//More messy code with IE
if(document.all){
theName = "hold2_" + xDataGridName;
else{
theName = xDataGridName;
//Create Body Div for scrollable body (IE creates a holder, mozilla creates the scroller)
var theBodyDiv = document.createElement("div");
theBodyDiv.setAttribute('id','divBody_' + theName);
theBodyDiv.setAttribute('style','OVERFLOW-Y: scroll; OVERFLOW-X: auto; OVERFLOW: auto; HEIGHT: ' + xScrollHeight + ';')
theTable.parentNode.insertBefore(theBodyDiv,theTable);
theBodyDiv.appendChild(theTable);
//Since IE can not apply the style to the new Child above, we need to make it messy! (IE is making this hard!)
//Converts the holder to a scroller
if(document.all){
var theMessDiv = document.getElementById('divBody_' + theName);
startDiv1 = '<div id="divBody_'+ xDataGridName +'" style="OVERFLOW-Y: scroll; OVERFLOW-X: auto; OVERFLOW: auto; HEIGHT: '+ xScrollHeight +';">';
endDiv1 = '</div>';
theMessDiv.innerHTML = startDiv1 + theMessDiv.innerHTML + endDiv1;
//The following Code Builds the header
theTable = document.getElementById(xDataGridName); // Arie
//Grab border widths (have to check for different ways to define it!)
var borderWidth = parseInt(theTable.style.borderwidth);
if(!borderWidth){
borderWidth = parseInt(theTable.border); }
if(!borderWidth){
borderWidth = parseInt(0); }
//Grab the table Headers (if exsists)
var theThs = theTable.getElementsByTagName("th");
var hasThs = parseInt(theThs.length);
var hasHeadCells = false;
//See if the Table Headers exist
if(hasThs>0){
hasHeadCells = true;
//Grab the table rows
var theTrs = theTable.getElementsByTagName("tr");
//Find the number of columns
var theTrsTds = theTrs[1].getElementsByTagName("td");
var numberOfColumns = parseInt(theTrsTds.length);
//Grab all of the table cells
var theTds = theTable.getElementsByTagName("td");
//Determine the widths of the columns of the table
var totalWidth = 0;
var theWidths = new Array();
for(i=0;i<numberOfColumns;i++){
if(hasHeadCells){
theWidths[i] = theThs.offsetWidth;
else{
theWidths[i] = theTds[i].offsetWidth;
theTds[i+numberOfColumns].style.width = theWidths[i];
totalWidth += parseInt(theWidths[i]);
//Set the width of the div so the scroll bar is on the edge of the table
document.getElementById("divBody_" + xDataGridName).style.width = document.getElementById("divBody_" + theName).offsetWidth;
//Grab the content for the headers
theHeaderCode = theTrs[0].innerHTML;
//This is for IE only since it does not support getComputedStyle which is alot easier!
var theStyle = "";
if(document.getElementById("divBody_" + xDataGridName).currentStyle){
//Grab the innerHTML and locate the style
theX = document.getElementById("divBody_" + xDataGridName).innerHTML;
theX = theX.split("style");
//Verify that there is a style tag in the table tag
if(theX[0].indexOf(xDataGridName) >= 0 && theX[1].indexOf("<TBODY>") >=0){
//split aprt to get the style
theQ = theX[1].split('"');
//set the style string
theStyle= "style='" + theQ[1] + "'";
//Create the table code and set it on the document
tbCode = "<table id='theAddon_"+ xDataGridName +"' "+ theStyle +">" + theHeaderCode + "</table>";
document.getElementById("divHeader_" + xDataGridName).innerHTML = tbCode;
//Apply the CSS Class and the Widths to the header Elements
if(hasThs > 0){lookFor = "th";}
else{lookFor = "td";}
theNewTD = document.getElementById("divHeader_" + xDataGridName).getElementsByTagName(lookFor);
for(i=0;i<theNewTD.length;i++){
theNewTD[i].style.width = theWidths[i];
/* Arie Workaround - English version*/
//theNewTD[i].style.borderStyle = "solid none solid solid";
//theNewTD[i].style.borderWidth = "1px";
//Apply CSS to the static table
theOrgTable = document.getElementById(xDataGridName);
theNewTable = document.getElementById("theAddon_" + xDataGridName);
for(x=0;x<theOrgTable.attributes.length;x++){
if(theOrgTable.attributes[x].nodeValue && theOrgTable.attributes[x].nodeName.toLowerCase() != "id"){
theNewTable.setAttribute(theOrgTable.attributes[x].nodeName,theOrgTable.attributes[x].nodeValue);
// Calculate the scrollbar width and streach the last header cell
var scrollbarWidth = document.getElementById("divHeader_" + xDataGridName).offsetWidth - document.getElementById("theAddon_" + xDataGridName).offsetWidth
var lastHeaderCell = theNewTD.length - 1;
theNewTD[lastHeaderCell].style.width = theWidths[lastHeaderCell] + scrollbarWidth;
theNewTD[lastHeaderCell].style.borderStyleLeft = "solid";
theNewTD[lastHeaderCell].style.borderWidthLeft = "1px";
//Hide the orginal header row
theTrs[0].style.display = "none";
//Make mozilla browsers see the applied styles
makeSame(theOrgTable,theNewTable)
//Function to make Mozilla have the same inline styles
function makeSame(elem_1, elem_2){
if (window.getComputedStyle){
elem_1x=window.getComputedStyle(elem_1, "");
elem_2x=window.getComputedStyle(elem_2, "");
elem_2x = elem_1x;
// End Hide -->
</script>
I called the script code in onload event like
onload="MakeStaticHeader('table_grab',50)"
but my problem is that it is not displaying the data in proper format(not displaying data under correct columns)...i got this problem only when I have more columns(horizontally large)..I am not finding any problem if i have less columns with much data(vertically large)....
I gave a sample report in the following link...
http://apex.oracle.com/pls/otn/f?p=9608:1:409755984054854:::::
Can anyone say how to set vertical scroll bar with fixed column headers in neat format even the number of columns are more...?
FazilaHello,
This is a well-known issue with this code, as you can see in the thread you copied the code from.
In the following post, Laura is presenting an IE only solution, based on a different code I wrote - Re: How to implement fixed column headers . Cross browser solution is yet to be found.
Regards,
Arie. -
Hi all,
I am having a table in jsp.
It contains four columns. 1 st and 2 nd row gives the table headings.
In first row, i have applied rowspan=2 to first two columns.then for 3rd and 4th column there is no rowspan.
in second row, I have given heading for 3rd and 4th column.
Now i need to add scroll bar for the table. It should scroll only the content of table but the heading of table should remain constant.
so can u help me with samplecode.....I m new to scrolling .....Hi Lakshman,
You can include it in stylsheet and then use that class in your <body> or "div" tag.
the CSS command is
overflow:auto;
you can use like
<body style="overflow: auto;"> or -- div style="overflow: auto;"
You can declare class in ".css" file
#c1
.c1
<body id="c1>> or <div id="c1">
<body class="c1>> or <div class="c1">
You can use either "class" or "id" by adding it to "CSS" file and the use it to any JSP file or by direct aditing "Style" attirbute in tag.
so when your content is longer then your screen browser will display scroll bar automatically.
I hope this will help you.
Thanks and Regards.
eCommerce Developer
Edited by: Ecommerce Developer on Jul 9, 2009 5:58 PM
Edited by: Ecommerce Developer on Jul 9, 2009 5:59 PM -
I want to put a div tag on the HomePage of EBS. The applications menu can get long and by request of client if possible to put the scroll bars on the menus, but not scroll on the browser so as to see his favorites all the time.
I've read the UIX Developer's Guide and in one section, there was an example on how to mix html code and uix code. The example was about putting a div tag and just supplying the namespace for HTML.
I copied the HomePG.xml from the server, edited it by adding the div tag, and then copy the edited version back to the server. My update doesnt reflect in the browser
I copied and replace /data/erpp/erppappl/fnd/11.5.0/mds/framework/navigate/webui/HomePG.xml
what am i doing wrong? is this really possible in the first place? haven't upgraded the server to 11.5.10 yet... or do i have to recompile?Typically, a background image is placed in a division's CSS code.
See example below: (view source in browser to see the CSS and HTML code)
http://alt-web.com/DEMOS/fixed-background.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com -
Possible to have vertical scroll bar for a cell in ALV Grid (using methods)
Hi All,
I have a field with length 100 characters on a ALV Grid (using methods)..User doesn't want to scroll all the 100 characters horizontally to see the whole text rather he wants to have a vertical scroll bar for the cell so that he can scroll vertically.
Is it possible to have split the cell text into lines and have a vertical scroll bar for a cell in ALV Grid?
Regards
Jaker.Thanks for the suggestion Balu.I tried this , but while scrolling,headers also getting scrolled.
Becoz of this , if i scroll down to the last row,headers are getting hidden.
Headers should always be static.only the data should scroll.
Since h:datatable is being rendered as one table , i can div tag for this table alone.
If i have seperate datatable for headers alone i can do this .But i should not use two datatables. -
Unwanted/unneeded scroll bars in Safari 4
I have a blog (www.RabbiBen.org) that suddenly began to show scroll bars next to each entry, in addition to the usual bars at the right side of a window. These bars only appear in Safari, not in any other browser I have tried. Is there a way to get rid of them in Safari?
My guess is no, given the number of posts regarding problems with Safari 4. Maybe Apple rushed this release too much.
If anyone has any suggestions, I would appreciate it.
Thanks,
Ben SendrowJust looked at you page. Imeditly I knew what the problem was...
Here's the text box div tag, div class="sfblogentry"...
*The css for the above div should be set to none for scroll bars or not set at all in the css.* The scroll bar is set to auto. When set to auto some browsers will show a scroll bar even is one is not needed. Or, when set to auto the text inside the div is so close to the inner walls of the text box. The browser will trigger for a scroll bar even if a scroll bar is not needed.
Here's a link to what your page should look like in Safari.
Click to view your fixed sample web page.
Was an easy fix took less than a minute to fix. There may be some elements missing and I didn't want to short through all the css pages to re-link them. There is six some odd css pages. Way to many css pages for a simple page like your.
To be honest with you, the html and css coding is a mess. If someone else was to take over the coding for your web page. It would be faster to rebuild the site than to work with what you have been provided.
Message was edited by: David M Brewer -
TextArea horizontal scroll bar?
Is it possible to have horizontal scroll bars in TextAreas? In html, the horizontal and vertical scroll bars automatically render themselves when needed. But that is not happening with the TextArea dropped on the design page from Creator's JSF Standard Components palette. Is there a setting somewhere to make the horizontal scroll bar show?
Hi,
This problem has been noticed earlier too and a bug exists for the same. In the meanwhile the following workaround is available which has been suggested by one of the engineers:
1. Add a "div" tag enclosing "select" tag.
2. Move the style attribute from "select" tag on "div" tag
3. In addition, add an "overflow" attribute to "style" attribute on "div" tag and set it to "auto".
<div style="left: 168px; top: 96px; overflow: auto; position: absolute; height: 192px; width: 192px">
<ui:listbox binding="#{newPage.listbox1}" id="listbox1" items="#{newPage.listbox1DefaultOptions.options}" />
</div>
Please be warned that once you do, your page will not render well in designer. So this should be done once the app has been rendered and is ready for deployment.
Hope this helps
Cheers
Giri
Maybe you are looking for
-
Deleting Extension while exporting to Pdf or Postscript only hide it
Hi all, I need to be able to delete the "ps" or "pdf" extension while exporting to a pdf or postscript file in the printing menu on macosX. When i try to delete the extension in the saved name, it quote the "hide extension button" and when unquoting
-
Exported PDF looks beautiful in Pages and Preview not in Acrobat Reader
Hi, I need a little help. I created an eBrochure in Pages which looks beautiful. When I export it to PDF, it looks amazing in Preview but not in Adobe Acrobat Reader; pictures doesn't look so bright and shiny, they loom more opaque. Also fonts look k
-
Indesign CS5 shortcuts won't work
i have just installed creative suite 5 and when i came to open indesign none of the keyboard shortcuts or toolbars were there. i previously used a free trial of indesign cs4 before uninstalling it to install cs5. i have been to edit> keyboard shortcu
-
No SQL data sources EAS 11.1.1.3 W2K3R2
Hi all, I can't get an "SQL data sources" load for creating my rule files. I'm using WS 2003R2 64 bit, Oracle Hyperion entreprise performance management system, hyperion entreprise performance management system foundation, essbase client and server 1
-
What this problem? table(cast(array))
exits in databse one type " type InNumberTab is table of number;" declare v_tbseq_trans:= InNumberTab(null); select count(*) into v_cont from dados_propriedade dp where dp.num_pessoa=p_num_pessoa group by num_nirf; v_tbseq_trans.EXTEND(SQL%ROWCOUNT);