Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1256
  • 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

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