how to apply css for asp.net control : The Official Microsoft ASP.NET Forums

Reply

how to apply css for asp.net control

Jul 04, 2012 11:22 AM|LINK

hi

go to this link http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

i need to do this same for my aspx dropdownlist and textbox and checkbox..

so let me know how would be my aspx page..

thanks

Reply

Re: how to apply css for asp.net control

Jul 04, 2012 11:30 AM|LINK

Hello,

Simply add the below scripts to the head section of your page

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.min.js"></script>
<script type="text/javascript">
$(function() {
    //find all form with class jqtransform and apply the plugin
    $("form.jqtransform").jqTransform();
});
</script>

And your form should be like

<form class="jqtransform">
.........
</form>

Note that class should be specified in order to $("form.jqtransform").jqTransform(); to work.

It's actually there under the "Usage" section at the bottom.

Please 'Mark as Answer' if this post helps you.

My Tech blog | My YouTube Channel

Reply

Re: how to apply css for asp.net control

Jul 04, 2012 11:41 AM|LINK

check my sample project

donwload here http://www.sendspace.com/file/v7ytm4

still design not applied why..

check and let me know..

Thanks

Reply

Re: how to apply css for asp.net control

Jul 04, 2012 11:47 AM|LINK

Priya_here
donwload here http://www.sendspace.com/file/v7ytm4

IT'S A VIRUS!

Priya, can you just copy paste the code here? It will help a lot for the users here. User won't interesting in downloading a file with potential of getting harm for their computers.

If you really need to upload, use skydrive instead.

Please 'Mark as Answer' if this post helps you.

My Tech blog | My YouTube Channel

Edited by Ruchira on Jul 04, 2012 11:48 AM

Reply

Re: how to apply css for asp.net control

Jul 04, 2012 11:49 AM|LINK

My aspx page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jqtransform.js"></script>

<script type="text/javascript">
    $(function () {
        //find all form with class jqtransform and apply the plugin
        $("form.jqtransform").jqTransform();
    });
</script>

</head>
<body>
    <form id="form1" runat="server" class="jqtransform">
<div class="rowElem">
    <asp:DropDownList ID="DropDownList1" runat="server">
        <asp:ListItem>A</asp:ListItem>
        <asp:ListItem>B</asp:ListItem>
        <asp:ListItem>C</asp:ListItem>
        <asp:ListItem>D</asp:ListItem>
        <asp:ListItem>E</asp:ListItem>
        <asp:ListItem>F</asp:ListItem>
        <asp:ListItem>G</asp:ListItem>
        <asp:ListItem>H</asp:ListItem>
    </asp:DropDownList>
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

    <asp:Button ID="Button1" runat="server" Text="Button" />

</div>




   
    </form>
</body>
</html>

Reply

Re: how to apply css for asp.net control

Jul 04, 2012 12:07 PM|LINK

Hi,

You have given the correct paths to the jquery.js and jquery.jqtransform.js right? Please verify that you have downloaded that files and you have given the correct relative paths for those using script tags.

Please 'Mark as Answer' if this post helps you.

My Tech blog | My YouTube Channel

Reply

sekarcse

Member

367 Points

87 Posts

Re: how to apply css for asp.net control

Jul 04, 2012 12:16 PM|LINK

Hello priya,

you have missed the CSS file and images.

Try this html file for reference. I hope this helps

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <script type="text/javascript" src="http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/js/jquery.jqtransform.js"></script>

    <script type="text/javascript">
        $(function() {
            //find all form with class jqtransform and apply the plugin
            $("form.jqtransform").jqTransform();
        });
    </script>
    
    <style type"text/css">
        form.jqtransformdone label{
	margin-top:4px;
	margin-right: 8px;
	display: block;
	margin-bottom: 10px;
}
form.jqtransformdone div.rowElem{
	clear:both;
	padding:4px 0px;
}
/* -------------
 * Buttons
 * ------------- */
button.jqTransformButton {
	margin: 0px;
	padding: 0px;
	border: none;
	background-color: transparent;
	cursor: pointer;
	overflow: visible;
	font-family: Arial;
}

*:first-child+html button.jqTransformButton[type]{width: 1;} /* IE7 */

button.jqTransformButton span {
	background: transparent url(http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/css/img/btn_right.gif) no-repeat right top;
	display: block;
	float: left;
	padding: 0px 4px 0px 0px; /* sliding doors padding */
	margin: 0px;
	height: 33px;
}

button.jqTransformButton span span {
	background: transparent url(http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/css/img/btn_left.gif) no-repeat top left;
	color: #333;
	padding: 8px 4px 0px 8px;
	font-weight: normal;
	font-size: 12px;
	line-height: 13px;
	display: block;
	text-decoration: none;
	height: 33px;
}

/*hover*/
button.jqTransformButton_hover span span { background-position: left -33px ; }
button.jqTransformButton_hover span { background-position: right -33px ; }

/*clicked*/
button.jqTransformButton_click span span { background-position: left -66px ; }
button.jqTransformButton_click span { background-position: right -66px ; }

/* IE 6 */
* html button.jqTransformButton { height:33px; }
* button.jqTransformButton span span { height: 25px; }
/* IE 7 */
*+ html button.jqTransformButton { height:33px; }
*+ button.jqTransformButton span span { height: 25px; }


/* -------------
 * Inputs
 * ------------- */
.jqTransformInputWrapper {
	background: transparent url(http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/css/img/input/input_text_left.gif) no-repeat left top;
	height: 31px;
	padding: 0px;
	float:left;
}

.jqTransformInputInner {
	background: transparent url(http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/css/img/input/input_text_right.gif) no-repeat top right;
	padding: 0px;
	margin: 0px;
}

.jqTransformInputInner div {
	height: 31px;
	margin:0px 0px 0px 8px;
}

.jqTransformInputInner div input {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height: 18px;
	vertical-align: middle;
	height: 31px;
	color:#404040;
	border: none;
	padding: 8px 0px 0px 0px;
	margin: 0px;
	background:transparent;
}

/*  IE6 */
* html .jqTransformInputInner div input {
	padding: 6px 0 0 0;
	margin: 0 0 0 -8px;
	height:24px;
}
/* Ie7 */
*+ html .jqTransformInputInner div input {
	padding: 6px 0 0 0;
	margin-left:-10px;
	height:24px;
}

/*hover*/
.jqTransformInputWrapper_hover{ background-position: left -31px ;}
.jqTransformInputWrapper_hover div.jqTransformInputInner{ background-position: right -31px ;}

/*focus*/
.jqTransformInputWrapper_focus{ background-position: left -62px ;}
.jqTransformInputWrapper_focus div.jqTransformInputInner{ background-position: right -62px ;}



.jqTransformSafari .jqTransformInputInner div {
	position: relative;
	overflow: hidden;
	margin:0px 8px;
}
.jqTransformSafari .jqTransformInputInner div input {
	background-color: none;
	position: absolute;
	top: -10px;
	left: -2px;
	height: 42px;
	padding-left: 4px;
}



/* -------------
 * Textarea
 * ------------- */
table.jqTransformTextarea td#jqTransformTextarea-mm textarea{
	font-size: 12px;
	line-height: 16px;
}

table.jqTransformTextarea td{
font-size: 1px;
line-height: 1px;
width: 5px;
height: 5px;
margin: 0;
padding: 0;
}
table.jqTransformTextarea{}
table.jqTransformTextarea tr{
/*border: 1px solid red;*/

}
table.jqTransformTextarea textarea{
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
table.jqTransformTextarea td#jqTransformTextarea-tl{background: url(http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/css/img/textarea/textarea_tl.gif) no-repeat top left;}
table.jqTransformTextarea td#jqTransformTextarea-tm{background: url(http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/css/img/textarea/textarea_tm.gif) repeat-x top left;}
table.jqTransformTextarea td#jqTransformTextarea-tr{background: url(http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/css/img/textarea/textarea_tr.gif) no-repeat top left;}

table.jqTransformTextarea td#jqTransformTextarea-ml{background: url(http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/css/img/textarea/textarea_ml.gif) repeat-y top left;}
table.jqTransformTextarea td#jqTransformTextarea-mm{background: url(http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/css/img/textarea/textarea-mm.gif) repeat;}
table.jqTransformTextarea td#jqTransformTextarea-mr{background: url(http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/css/img/textarea/textarea_mr.gif) repeat-y top left;}

table.jqTransformTextarea td#jqTransformTextarea-bl{background: url(http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/css/img/textarea/textarea_bl.gif) no-repeat top left;}
table.jqTransformTextarea td#jqTransformTextarea-bm{background: url(http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/css/img/textarea/textarea_bm.gif) repeat-x top left;}
table.jqTransformTextarea td#jqTransformTextarea-br{background: url(http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/css/img/textarea/textarea_br.gif) no-repeat top left;}

/*hover*/
table.jqTransformTextarea-hover td#jqTransformTextarea-tl{background-position:0px -5px;}
table.jqTransformTextarea-hover td#jqTransformTextarea-tm{background-position:0px -5px;}
table.jqTransformTextarea-hover td#jqTransformTextarea-tr{background-position:0px -5px;}
table.jqTransformTextarea-hover td#jqTransformTextarea-ml{background-position:-5px 0px;}
table.jqTransformTextarea-hover td#jqTransformTextarea-mm{background-image: url(http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/css/img/textarea/textarea-mm-hover.gif);}
table.jqTransformTextarea-hover td#jqTransformTextarea-mr{background-position:-5px 0px;}
table.jqTransformTextarea-hover td#jqTransformTextarea-bl{background-position:0px -5px;}
table.jqTransformTextarea-hover td#jqTransformTextarea-bm{background-position:0px -5px;}
table.jqTransformTextarea-hover td#jqTransformTextarea-br{background-position:0px -5px;}

/*focus*/
table.jqTransformTextarea-focus td#jqTransformTextarea-tl{background-position:0px -10px;}
table.jqTransformTextarea-focus td#jqTransformTextarea-tm{background-position:0px -10px;}
table.jqTransformTextarea-focus td#jqTransformTextarea-tr{background-position:0px -10px;}
table.jqTransformTextarea-focus td#jqTransformTextarea-ml{background-position:-10px 0px;}
table.jqTransformTextarea-focus td#jqTransformTextarea-mm{background-image: url(http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/css/img/textarea/textarea-mm-focus.gif);}
table.jqTransformTextarea-focus td#jqTransformTextarea-mr{background-position: -10px 0px;}
table.jqTransformTextarea-focus td#jqTransformTextarea-bl{background-position:0px -10px;}
table.jqTransformTextarea-focus td#jqTransformTextarea-bm{background-position:0px -10px;}
table.jqTransformTextarea-focus td#jqTransformTextarea-br{background-position:0px -10px;}


table.jqTransformTextarea .jqTransformSafariTextarea div {
	position: relative;
	overflow: hidden;
	border: 0px solid red;
}
table.jqTransformTextarea .jqTransformSafariTextarea textarea{
	background: none;
	position: absolute;
	top:-10px;
	left:-10px;
	padding: 10px 10px 10px 10px;
	resize: none;
}


/* -------------
 * Radios
 * ------------- */
.jqTransformRadioWrapper {float: left;display:block;margin:0px 4px; margin-top:5px;}
.jqTransformRadio {
	background: transparent url(http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/css/img/radio.gif) no-repeat center top;
	vertical-align: middle;
	height: 19px;
	width: 18px;
	display:block;/*display: -moz-inline-block;*/
}


/* -------------
 * Checkboxes
 * ------------- */
span.jqTransformCheckboxWrapper{
	display:block;float:left;
	margin-top:5px;
}
a.jqTransformCheckbox {
	background: transparent url(http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/css/img/checkbox.gif) no-repeat center top;
	vertical-align: middle;
	height: 19px;
	width: 18px;
	display:block;/*display: -moz-inline-block;*/
}

/* -------------
 * Checked - Used for both Radio and Checkbox
 * ------------- */
a.jqTransformChecked { background-position: center bottom;}


/* -------------
 * Selects
 * ------------- */
.jqTransformSelectWrapper {
	width: 45px;
	position:relative;
	height: 31px;
	background: url(http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/css/img/select_left.gif) no-repeat top left;
}

.jqTransformSelectWrapper div span {
	
	font-size: 12px;
	float: none;
	position: absolute;
	white-space: nowrap;
	height: 31px;
	line-height: 15px;
	padding: 8px 0 0 7px;
	overflow: hidden;
	cursor:pointer;
	/*border: 1px solid #CCCCCC;*/
/* border-right: none;*/
}

.jqTransformSelectWrapper  a.jqTransformSelectOpen {
	display: block;
	position: absolute;
	right: 0px;
	width: 31px;
	height: 31px;
	background: url(http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/css/img/select_right.gif) no-repeat center center;
}

.jqTransformSelectWrapper ul {
	position: absolute;
	width: 43px;
	top: 30px;
	left: 0px;
	list-style: none;
	background-color: #FFF;
	border: solid 1px #CCC;
	display: none;
	margin: 0px;
	padding: 0px;
	height: 150px;
	overflow: auto;
	overflow-y: auto;
	z-index:10;
}

.jqTransformSelectWrapper ul a {
	display: block;
	padding: 5px;
	text-decoration: none;
	color:#333;
	background-color: #FFF;
	font-size: 12px;
}

.jqTransformSelectWrapper ul a.selected {
	background: #EDEDED;
	color: #333;
}

.jqTransformSelectWrapper ul a:hover, .jqTransformSelectWrapper ul a.selected:hover {
	background:#3582c4;
	color: #fff;
}

/* -------------
 * Hidden - used to hide the original form elements
 * ------------- */
.jqTransformHidden {display: none;}
    </style>

</head>
<body>
    <form id="form1" class="jqtransform">
    <div class="rowElem">
        <select>
            <option>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
            <option>E</option>
            <option>F</option>
        </select>
    </div>
    <div class="rowElem">
        <label for="TextBox1">
            Label</label>
    </div>
    <div class="rowElem">
        <input id="TextBox1" type="text" />
    </div>
    <div class="rowElem">
        <input type="button" value="Button" />
    </div>
    </form>
</body>
</html>

Thanks,
Sekar Perumal

Mark as Answer if you feel so. Because it will help others.

Edited by Priya_here on Jul 04, 2012 12:34 PM
Edited by Priya_here on Jul 04, 2012 12:35 PM
Marked as answer by Priya_here on Jul 04, 2012 12:42 PM

Reply

Priya_here

Member

709 Points

1859 Posts

Re: how to apply css for asp.net control

Jul 04, 2012 12:35 PM|LINK

sekarcse

<script type="text/javascript" src="http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/js/jquery.jqtransform.js"></script>

Can you give me this js so that i can add reference from my solution... due to my offline installment..

thanks

Reply

sekarcse

Member

367 Points

87 Posts

Re: how to apply css for asp.net control

Jul 05, 2012 11:26 AM|LINK

Just downlaod from the url and save it

http://www.code-pal.com/examples/jqtransform-select-control-problem-and-the-solution/js/jquery.jqtransform.js

Thanks,
Sekar Perumal

Mark as Answer if you feel so. Because it will help others.

Marked as answer by Priya_here on Jul 06, 2012 04:49 AM

how to apply css for asp.net control RSS

8 replies

Priya_here

how to apply css for asp.net control

Ruchira

Re: how to apply css for asp.net control

Priya_here

Re: how to apply css for asp.net control

Ruchira

Re: how to apply css for asp.net control

Priya_here

Priya_here

Re: how to apply css for asp.net control

Ruchira

Re: how to apply css for asp.net control

sekarcse

Re: how to apply css for asp.net control

Priya_here

Re: how to apply css for asp.net control

sekarcse

sekarcse

Re: how to apply css for asp.net control

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft