Solved

How do you style Jquery dialog buttons.

Posted on 2010-08-20
9
1,228 Views
Last Modified: 2012-06-27
I have a an asp.NET application that has a login page on it with a Jquery dialog box on it.  The dialog is styled by an external css file.  All the styling works except for the buttons.  Below is all the html, vb, css and JavaScript for the page.  I suspect I'm not using the correct selector in the css.  The style for the buttons is the last one in the css.  Any suggestions would be greatly appreciated.
<%@ Page Language="VB" MasterPageFile="~/MasterPages/ClientTrack.master" AutoEventWireup="false" CodeFile="Login.aspx.vb" Inherits="Login" Title="Login" %>

<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="Server">
    <script src="js/Login.js" type="text/javascript"></script>
</asp:Content>

<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="cp1">

    <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
        <Services>
            <asp:ServiceReference Path="~/WebServices/LoginService.asmx" />
        </Services>
    </asp:ScriptManagerProxy>

    <div id="divLogin" title="Login" style="text-align:center">
        <br />
        <asp:Label ID="lblUserName" runat="server" Text="User Name:" Width="112"></asp:Label>
        <asp:TextBox ID="txtUserName" runat="server" Width="150"></asp:TextBox>
        <br />
        <asp:Label ID="lblPassWord" runat="server" Text="Pass Word:" Width="112"></asp:Label>
        <asp:TextBox ID="txtPassWord" runat="server" TextMode="Password" Width="150"></asp:TextBox>
        <br /><br />
    </div>
</asp:Content>


Imports AdFormsAuthClassLibrary
Imports System.Data
Imports System.Data.SqlClient

Partial Class Login
    Inherits BasePage

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Dim Message As String = "<script type=""text/javascript"">window.onload = OpenLoginDialog;</script>"
            ClientScript.RegisterStartupScript(Me.GetType, "Login", Message)
        End If
    End Sub
End Class


div.ui-dialog 
{
    overflow: visible !important; /*Without this the width of the dialog shrinks to the width of the content.*/
}

div.ui-dialog-content
{
	font-family: 'Lucida Calligraphy';
	padding: 10px;background: url(../Images/PopupBackround.jpg) repeat;
	font-weight: bold;
	color: #FFFF00;
	width: 400px !important;/*Set the width of the body of the dialog box.*/
}

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; /*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-size: 18px;
	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: -178px !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: -180px !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: 111px !important;
    right: -180px !important;
    bottom: -65px !important;
}

div.ui-resizable-s 
{
    background: url('../Images/Dialog/Shadow/shadow_08.png') repeat-x bottom !important;
    width: auto !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
{
	text-align:center;
	font-size: medium;
	font-weight: bold;
	color: #00467F; /* Dark Blue*/
}


function OpenLoginDialog()
{
    $('div#divLogin').dialog({
        height: "auto",
        position: [340, 300],
        modal: true,
        overlay: { background: '#fff', opacity: '0.7' },
        buttons: { "Login": function() { Login(ctl00_cp1_txtUserName.value, ctl00_cp1_txtPassWord.value); }, "Cancel": function() {window.close(); } }
    });
}

Open in new window

0
Comment
Question by:leskelly
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 9

Expert Comment

by:matthew016
ID: 33489764
Need a page online to help
0
 
LVL 9

Expert Comment

by:matthew016
ID: 33489768
I suggest you to look why it is not styling with the help of Firebug
0
 

Author Comment

by:leskelly
ID: 33490353
What is Firebug?
0
Tutorials alone can't teach real engineering

So we built better training tools.

-Hands-on Labs
-Instructor Mentoring
-Scenario-Based Tests
-Dedicated Cloud Servers

All at your fingertips. What are you waiting for?

 
LVL 9

Expert Comment

by:matthew016
ID: 33490956
Firebug is a plugin of Firefox. It's a must-have for any web developer.
It allows you namely to click on an element on your page, and to check the style associated with it.
You can then find the solution to your problem very easily.
0
 

Author Comment

by:leskelly
ID: 33491901
Hello matthew016,

I downloaded firebug, very cool tool thanks for directing me to it.  When I use it to look at the style of the buttons it shows the style rule as it is in my style sheet although the attributes are in a slightly different order.:

div.ui-dialog-buttonpane{
      color: #00467F;
      font-size: medium;
      font-weight: bold;
      text-align:center;
}

So even though the style for the buttons appears to be in place the buttons are not styled.  Any thoughts on why this would be?

Thanks,
Les
0
 
LVL 9

Accepted Solution

by:
matthew016 earned 500 total points
ID: 33493071
This is strange ... they should be styled ...
I wish to see a page online to help you, it's difficult without anything to see ...

Try to add for example width:400px; to see if the button gets wider. By the way, what kind of element is the button ?
Do the style rules appear as strike-through in firebug ? (which would mean they are overriden by other style rules).
0
 

Author Comment

by:leskelly
ID: 33495601
When I tried setting the width to 400px the size of the buttons didn't change but they were centered.  400px is the width of the dialog then it became obvious that I was styling the button pane and not the buttons. A little me searching found the correct selector for the buttons. If anyone is interested I've attached the styles that worked.
0
 

Author Comment

by:leskelly
ID: 33495605
The styles didn't go the first time.
div.ui-dialog-buttonpane
{
	width: 400px;
	text-align: center;
	padding: 10px;
}

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

Open in new window

0
 

Author Closing Comment

by:leskelly
ID: 33495615
As you are the only one who responded to my question and your suggestion resulted in my finding the solution the points are yours.
0

Featured Post

Turn Insights Into Action

You’ve already invested in ITSM tools, chat applications, automation utilities, and more. Fortify these solutions with intelligent communications so you can drive business processes forward.

With xMatters, you'll never miss a beat.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
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)

717 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