Solved

Horizontal scroll bar in Jquery dialog is to low.

Posted on 2010-09-01
3
1,409 Views
Last Modified: 2012-05-10
I have a asp.net application with a link on its master page that opens a Jquery dialog.  It looks and is placed exactly as I want it except the horizontal scroll bar is about 4 px to low so that there is a space between the dialog content area and it.  The horizontal scroll bar isn't even needed so my question is, is there a way to just have a vertical scroll bar and if not how do I get rid of the space?

I've attached the JavaScript that creates the dialog and the css that styles it.  Any suggestions would be greatly appreciated.

div.ui-dialog 
{
	width: 420px !important;
	background: url(../Images/PopupBackround.jpg) repeat;
}

div.ui-dialog-content
{
	font-family: 'Lucida Calligraphy';
	padding: 10px;
	font-weight: bold;
	color: #FFFF00;
	min-height: 113px;
	width: 400px !important;
	text-align: center;/**/
}
div.ui-dialog-titlebar 
{
    width: 420px; /*Set the width of the title bar. It must be 20px more then the width of the content because the content has 10px padding*/
    background: url('../Images/Dialog/titlebarRight.png') no-repeat right; /*Places a rounded graphic in the right of the title bar*/
    height: 23px !important; /*Set the height of the title bar*/
	position: relative; /*If this is not set the closing X will not be positioned correctly*/
}

span.ui-dialog-title
{
	display: block;
	font-size: 18px;
	text-align: center;
	height: 23px;
	background: url('../Images/Dialog/titlebar.png') repeat-x top;
	margin: 0 9px; /*Set the left and right margins of the title.  If there is no margins the graphic set in the last line will go over the rounded end graphics.*/
	position: relative;
	padding-top: 1px;
	font-weight: bold;
	color: #00467F; /* Dark Blue*/
}

a.ui-dialog-titlebar-close
{
	/*Configure the closing X*/
	position: absolute;
	top: 2px;
	right: 10px;
	font-size: large;
	font-weight: bold;
	color: #00467F; /*Dark Blue*/
	text-decoration: none;
}

div.ui-dialog-container 
{
   background: url('../Images/Dialog/titlebarLeft.png') no-repeat top left; /*Places rounded graphic in the top left of the dialog (In the title bar)*/
}

div.ui-resizable-handle 
{
    /*If not set the shadow graphic could be resized.*/
    z-index: -1 !important;
}

/*The following 7 style rules place a shadow graphic aroung the dialog box.*/
div.ui-resizable-nw 
{
    background: url('../Images/Dialog/Shadow/shadow_01.png') no-repeat top right !important; 
    width: 117px !important;
    height: 112px !important;
    top: -42px !important;
    left: -62px !important;
}

div.ui-resizable-ne 
{
    background: url('../Images/Dialog/Shadow/shadow_03.png') no-repeat top left !important;
    width: 115px !important;
    height: 112px !important;
    top: -42px !important;
    right: -63px !important;
}

div.ui-resizable-e 
{
    background: url('../Images/Dialog/Shadow/shadow_06.png') repeat-y top left !important;
    width: 117px !important;
    height: auto !important;
    top: 70px !important;
    right: -65px !important;
    bottom: 46px !important;
}

div.ui-resizable-se 
{
    background: url('../Images/Dialog/Shadow/shadow_14.png') no-repeat top right !important;
    width: 117px !important;
    height: 113px !important;
    right: -65px !important;
    bottom: -67px !important;
}

div.ui-resizable-s 
{
    background: url('../Images/Dialog/Shadow/shadow_08.png') repeat-x bottom !important;
    width: 313px !important;
    height: 111px !important;
    right: -63px !important;
	bottom: -65px !important;
    left: 55px !important;
}

div.ui-resizable-sw 
{
    background: url('../Images/Dialog/Shadow/shadow_07.png') no-repeat top right !important;
    width: 115px !important;
    height: 111px !important;
    bottom: -65px !important;
    left: -60px !important;
}

div.ui-resizable-w 
{
    background: url('../Images/Dialog/Shadow/shadow_04.png') repeat-y top left !important;
    width: 115px !important;
    height: auto !important;
    top: 70px !important;
    bottom: 46px !important;
    left: -60px !important;
}

div.ui-dialog-buttonpane
{
	width: 400px;
	text-align: center;
	background-color: Black;
	height: 20px;
	vertical-align: middle;
	padding: 5px 10px 12px 10px;
}

div.ui-dialog-buttonpane button
{
	font-size: medium;
	font-weight: bold;
	color: #00467F;  /*Dark Blue*/
}

a
{
	color: #99FF33;
	text-decoration: underline;
	cursor: pointer;
}

function SetHelpDialog(x, y) 
{
    divHelp.innerHTML = Message;
    
    $('div#divHelp').dialog({
            height: "400px",
            position: [x, y],
            modal: true,
            overlay: { background: '#fff', opacity: '0.7'}
     });
    $('div#divHelp').css("overflow", "scroll");
}

Open in new window

0
Comment
Question by:leskelly
3 Comments
 
LVL 22

Accepted Solution

by:
Mrunal earned 500 total points
ID: 33583278
yes it is possible to have only verticle scroll bar.
use:

<div style="height: 250px; width: 560px; overflow: scroll; overflow-x: hidden;
                        background-color: White;">
content goes here
</div>

also you can add "padding:4px" to same div for spacing.

Hope this solves your problem,
0
 
LVL 4

Expert Comment

by:rhodesb
ID: 33583621
overflow-x is a CSS 3 style and is not necessarily supported in all browsers.

Without having your html, I can't actually test this but I'm pretty sure that this may be because you have fixed width divs inside of div with auto width.  Try setting fixed widths for all divs that are part of the dialiog.  In particular, I'm guessing that you need to set the width of div.ui-dialog-container
to be greater than the width of the titlebar.  In theory it should just need to be the same size but depending on the browser, there may be a default padding or margin that makes it a bit wider.
0
 

Author Closing Comment

by:leskelly
ID: 33590655
Hello and thank you both for you input.  This is an internal application and our company only uses IE 7 or 8 in which overflow-x works so I'm going with that.

I also looked at the other solution as I do indeed have a dive within the div that the dialog is created from but it is the outer dive that is fixed and the inner div that is auto.  The inner div need to remain that way as the width varies depending on the content which depends on the user.  I tried making the width of the container wider the the title bar but that didn't work.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now