• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1249
  • Last Modified:

How do you style Jquery dialog buttons.

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
leskelly
Asked:
leskelly
  • 5
  • 4
1 Solution
 
matthew016Commented:
Need a page online to help
0
 
matthew016Commented:
I suggest you to look why it is not styling with the help of Firebug
0
 
leskellyAuthor Commented:
What is Firebug?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
matthew016Commented:
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
 
leskellyAuthor Commented:
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
 
matthew016Commented:
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
 
leskellyAuthor Commented:
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
 
leskellyAuthor Commented:
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
 
leskellyAuthor Commented:
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

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now