In my CSS file I have:
.Center
{
position:relative;
width:800px;
margin-left: auto;
margin-right: auto;
}
Then, when I have the following all is well:
<div class="Center">
<asp:ImageButton ID="ImageButton1" ImageUrl="..." runat="server" />
</div>
But if I remove the div and add a CssClass instead - it ignores the class:
<asp:ImageButton ID="ImageButton1" ImageUrl="..." runat="server" CssClass="Center" />
Why?
Because an asp:ImageButton renders out as <input type="image" ... />. Your first example has a <div> wrapping the image button, and the styling is applied on the <div>. Your second example is attempting to style the <input type="image" ... /> directly (which doesn't work because it's not a block element).
You can use an <asp:Panel> (which renders as a <div>) for equivalent code:
<asp:Panel runat="server" CssClass="Center">
<asp:ImageButton ID="ImageButton1" ImageUrl="..." runat="server" />
</asp:Panel>
Or, change your CSS to work with an <input type="image"> - I think that's as easy as just adding display: block, and the other properties will work the same as a containing <div> would.
Related
I have Panel that needs to have a button beside it but have been unsuccessful in formatting it. Currently this is what I have.
<asp:Panel runat="server" CssClass="form" ID="panSomeParameters"></asp:Panel>
<asp:Button runat="server" CssClass="form" ID="btnSomeButton" Text="Button" />
Basically I need the Button in the blue area.
You just need to set your Panel display to "inline-block" as panel is rendered as Div and div is a block element so it will cover the whole row. I have set width and height also so panel will contain space on the view.
<asp:Panel runat="server" style="display:inline-block;width:100px;height:20px;" CssClass="form" ID="panSomeParameters"></asp:Panel>
<asp:Button runat="server" CssClass="form" ID="btnSomeButton" Text="Button" />
If it helps then accept the Answer.
You could give them both a class and set the float to left.
<div>
<asp:Panel ID="Panel1" runat="server" CssClass="float-left">
Contents
</asp:Panel>
<asp:Button ID="Button1" runat="server" Text="Button" CssClass="float-left" />
</div>
<style>
.float-left {
float: left;
}
</style>
I want to increase the space between two textboxes without using the line break. I've created a CSS rule but it has no effect when displaying the page.
These are the textboxes
<asp:Label ID="Discount" CssClass="textboxcontainer" runat="server" Text="Discount: "></asp:Label><asp:TextBox ID="TextBoxDiscount" runat="server"></asp:TextBox><br />
<asp:Label ID="TotalAfterDis" CssClass="textboxcontainer" runat="server" Text="Total : "></asp:Label><asp:TextBox ID="TextBoxTotal" runat="server"></asp:TextBox> <br />
I have this CSS rule in CSS file
div#page .textboxcontainer{
margin: 10px auto;
Any help is really appreciated
margin doesn't work on asp:label, since asp:label is rendered into span, which is an inline element
Try adding display:inline-block to your css rule.
Your <asp:Label> will render as an HTML span, which displays inline by default, causing top and bottom margin to be ignored. Add display: block or display: inline-block to your .textboxcontainer rule.
ASP Label controls render in a <span> tag at runtime. This is what is giving you trouble. Simply wrap the label and textbox control in their own div and you will get that block separation. Add a class to that div and give it a margin-bottom: XXpx and you are on your way
<div class="form-group">
<asp:Label ID="Discount" CssClass="textboxcontainer" runat="server" Text="Discount: "></asp:Label>
<asp:TextBox ID="TextBoxDiscount" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<asp:Label ID="TotalAfterDis" CssClass="textboxcontainer" runat="server" Text="Total : "></asp:Label>
<asp:TextBox ID="TextBoxTotal" runat="server"></asp:TextBox>
</div>
CSS
.form-group{
margin-bottom: 10px;
}
I have created a user control that generates list item , how can i make the whole field clickable rather than just a text ( now the hyperlink is wrapped around the merchants name) , wrapping the list in a hyperlink will mess up the entire flow of the table and ive already run out of ideas.
<li>
<div ID="divmech" class = "hint--top" data-hint="" runat="server">
<asp:HyperLink ID="hypTrendingMerchant" CssClass="merchantName-width" runat="server" >
<asp:Label ID="lblMerchantName" runat="server" />
</asp:HyperLink>
<asp:Label ID ="lblMerchantDifference" class="gecko-right gecko-trend-arrow pad gecko-col-secondary" font-bold="true" runat="server" />
</div>
</li>
Wrap your div in the link, and make sure it takes up the whole space of your li:
<li>
<asp:HyperLink ID="hypTrendingMerchant" CssClass="merchantName-width" runat="server" >
<div ID="divmech" class = "hint--top" data-hint="" runat="server">
<asp:Label ID="lblMerchantName" runat="server" />
<asp:Label ID ="lblMerchantDifference" class="gecko-right gecko-trend-arrow pad gecko-col-secondary" font-bold="true" runat="server" />
</div>
</asp:HyperLink>
</li>
What you actually wind up doing here will depend on your layout, but something like this.
<li>
<asp:HyperLink ID="hypTrendingMerchant" CssClass="merchantName-width" runat="server" >
<span ID="divmech" class = "hint--top" data-hint="" runat="server">
<asp:Label ID="lblMerchantName" runat="server" />
<asp:Label ID ="lblMerchantDifference" class="gecko-right gecko-trend-arrow pad gecko-col-secondary" font-bold="true" runat="server" />
</span>
</asp:HyperLink>
</li>
don't put block elements like DIV inside inline elements like A. instead wrap all li content in the link.
then from CSS, make A as block, and if you need the span #divmech as block element, then do that from CSS too. Don't forget to set LI padding to 0 so A element would take most of the space
li{
display:block;
padding:0;
}
a.merchantName-width{
display:block;
}
#divmech{
display:block;
}
I have a login FORM inside a Hidden DIV, this DIV is hidden using CSS display:none; when I click on some other DIV, I show this DIV using jquery .slideDown(), so I can be able to use this form.
When I click on the button, the OnClick="Login" doesn't seem to work,and when I removed this form from this hidden div to simply another place in the body, it worked. What's the problem?
ASP.NET:
<div id="userCPContainer">
<form id="loginForm" runat="server">
<asp:Label ID="Label1" runat="server" Text="Username" class="loginLabels"></asp:Label>
<br />
<asp:TextBox ID="usernameField" runat="server" MaxLength="50" class="loginFields"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Text="Password" class="loginLabels"></asp:Label>
<br />
<asp:TextBox ID="passwordField" runat="server" MaxLength="50"
TextMode="Password" class="loginFields"></asp:TextBox>
<asp:Button ID="loginButton" runat="server" Text="Log in" onclick="Loginn" class="loginButton"/>
</form>
</div>
JQUERY:
function showUserCP() {
$("#userCPContainer").slideDown(200);
$(".userCPDiv").css("background-color", "#000000");
$(".userCPDiv").css("border-color", "#000000");
}
function hideUserCP() {
$(".userCPDiv").css("background-color", "rgb(43, 147, 206)");
$(".userCPDiv").css("border-color", "rgb(43, 147, 206)");
$("#userCPContainer").slideUp(200);
}
$(".userCPDiv").click(function (e) {
//Either way, hide Main Menu
hideMainMenu();
if ($("#userCPContainer").is(":visible")) {
hideUserCP();
}
else {
showUserCP();
}
e.stopPropagation();
});
CSS:
#userCPContainer
{
overflow:hidden;
border-style:solid;
border-top-style:none;
border-color:rgb(43,147,206);
border-width:2px;
position:absolute;
right:0px;
top:0px;
display:none;
z-index:1;
width:300px;
background-color: #000000;
}
Nothing really complicated...
When you use CSS display: none; the problem is that all that's inside that DIV gets removed completely from the HTML Document and that causes that ASP.NET does not recognize this element when you show it via jQuery. I see to possible solutions:
Use visibility: hidden instead of display: none;, if you do this you will probably have some problems with the DIV height because it will take the space needed to render but it will not be visible.
Use a ScriptManager and an UpdatePanel and put the div and the form inside those elements, so the server will know when you render the Button in the client. Also, make sure that you register your jQuery scripts inside the ScriptManager
Hope this helps you
I'm using the HtmlEditorExtender control of the AJAX Control Toolkit and I want to change the editor's background color to another color.
How can I do that?
You just have to target the css class that the AJAXControlToolkit uses to style that element. In this case, it is the ajax__html_editor_extender_texteditor class. The following css would make the background of the HTML editor orange:
.ajax__html_editor_extender_texteditor
{
background-color:#FFA500;
}
If you put the control and extender into a table, you can set the background color in the tag like so:
<td style="background-color: white;">
<asp:TextBox ID="myTextBox" MaxLength="1000" Width="250px" Height="250px" TextMode="MultiLine" Rows="10" Wrap="true" runat="server" />
<ajaxToolkit:HtmlEditorExtender ID="HtmlEditorExtender1" TargetControlID="myTextBox" runat="server"/>
</td>
Put all inside this div. Works nicely!
div style="background-color: white; width: 100%;background-color:white;padding:0px 10px 6px 0px;"
You try to define a css and set it to the CssClass attribute of HtmlEditorExtender.
E.g
<style type="text/css">
.generalbox {
background-color:#F90
}
</style>
<cc2:Editor ID="txtDescription" CssClass="generalbox" runat="server" Height="300px" AutoFocus="true" Width="100%" />