Solved

How do you style Jquery dialog buttons.

Posted on 2010-08-20
9
1,187 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
  • 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
 
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
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…

760 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

18 Experts available now in Live!

Get 1:1 Help Now