How do I customize an asp:Button class? - c#

How do I customize an asp:Button class?
This is like this proble: How to set css style to asp.net button? but not really since the button is inherited from a cs class.
I have this bit of code in an ASPX file:
<div class="buttonContainer" style="clear:both;width:100%;text-align:left">
<asp:Button ID="btnProceed" runat="server" Text="Next" OnClick="ProceedButton_Clicked" Enabled="true" />
</div>
So, if I want to make the button bigger or bolder text, how would I do it?
btnProceed is defined in a .cs file like this:
protected global::System.Web.UI.WebControls.Button btnProceed;
So, is there some way I can inherit a System.Web.UI.WebControls.Button class and change the font size?

All your server controls are ultimately going to render some HTML markup to the browser. So Apply a CSS class to your button and style it the way you want. You can use the CssClass property to set it.
<asp:Button ID="btnProceed" runat="server" Text="Hi" CssClass="yourClass" />
And put this style in your css file which is being included in your aspx page.
.yourClass
{
font-size:72px;
font-weight:bold;
}

You could be able to customize any style for your button with this
.buttonContainer input
{
font-size: 14px;
font-weight: bold;
/**** ETC ***** /
}

you can set Font Size at server-side by using btnProceed.Font.Size = FontUnit.Point(50);

Related

asp.net button hover not working

This is the code and css i have checked several links and followed accordingly but i still get the problem. Kindly explain.
<asp:Button ID="Button1" runat="server" BackColor="#93C323"
Font-Names="Segoe UI Light" Font-Size="X-Large" ForeColor="White" Height="41px"
style="margin-left: 144px" Text="+ Add" Width="121px" />
.button:hover
{
background:#DBDBDB;
}
Avoid to make the style inline when you like to change it by hover, or dynamically. This is an example that I just tested and is working:
<asp:Button ID="Button1" runat="server" CssClass="OneButton" Text="ok" />
<style type="text/css">
.OneButton
{
background-color:#93C323;
font-size:x-large;
color:White;
height:41px;
width:121px;
margin-left:144px;
}
.OneButton:hover
{
background-color:#DBDBDB;
}
</style>
And a live version of it: http://jsfiddle.net/gwSWy/
You need to add cssclass="button" to your button.
<asp:Button ID="Button1" runat="server" BackColor="#93C323" CssClass="button"
Font-Names="Segoe UI Light" Font-Size="X-Large" ForeColor="White" Height="41px"
style="margin-left: 144px" Text="+ Add" Width="121px" />
If you're looking to do this globally for all buttons:
The ASP.NET button creates <input type="submit">.
So you'll need to style around that.
If you just need that style with your button, you can use the Button Property CssClass. Check this link for your reference.
and one thing more, I guess you're not using style properly. you can just put your margin details in the button css then remove the attribute style.
Your CSS rule will not find the element in the DOM because there is no CSS class assigned to it the way you are doing it.
You can do as nimeshjm mentioned and add the CssClass="button" attribute to the button control - this should match your CSS rule assuming you don't have any other problems (stylesheet is linked to on the page, no over-riding/more specific rules.
You also won't be able to style the element based on its ID because it will be automatically changed when the page is rendered to prevent ID collisions between elements.
If you use the attribute ClientIDMode="Static" which will keep the ID as you specified in the control.
As Joe Enos stated, the Button control is rendered as an <input type-"submit" /> so you also can't use an CSS rule like button:hover { background: black; }

Icon Not fit to Button Control in asp.net application

In my Asp project,..
I have used Icon file in Button. But those Icons not fit to Buttons. It half of the height only visible.
My Code is..
<asp:Button ID="btnCoverPlus" runat="server"
style="background-image: url('Images/plus.ico'); background-repeat:no-repeat; background-position:center; width:32%; font-size:medium;"
Height="25px" onclick="btnCoverPlus_Click" /> <br />
How to fit the Icons in ASP buttons?.
The obvious is to change the icon side, but you can also try to auto resize it with the style by adding :
background-size: 100% Auto;
or direct set the size
background-size: 16px 16px;
please note that only CSS 3 supports that.
try to increase button height by changing Height="25px property

How to make a button not show up but still be used by javascript?

I am using a button that has to be invible and should be used by a javascript function.
<asp:Button ID ="btnDummy1" runat="server" Visible ="true" OnClick="btnSubmit1_Click" width="0px" height="0px"/
I cannot keep visible = false as it the javascript will not use invible content in the poage. I havetried to give width=0 and height=0, still it showws up in Chrome. What do you guys think i should do?
Thanks in advance :)
A pretty clean approach in ASP.Net it give it a "hidden" class:
<asp:Button ID ="btnDummy1" runat="server" CssClass="hidden" />
Then in your stylesheet:
.hidden { display: none; }
If you set it to Visible="False" then the code will not be executed.
Instead I think you should wrap it in a <div> and set display:none via css:
<div style="display: none;">
<asp:Button ID ="btnDummy1" runat="server" OnClick="btnSubmit1_Click" />
</div>
adding style="display:none" would hide the button till you make it visible again
<asp:Button ID ="btnDummy1" runat="server" OnClick="btnSubmit1_Click" style="display:none"/>
How about
style="display:none"
for the button instead of Visible = "true".
Can you just use a hidden form field in this case? This is generally the preferred method of passing information along.
See http://www.tizag.com/htmlT/htmlhidden.php
<asp:Button ID="btnMyOrders" runat="server" Text="my orders" CssClass="dropdown-item" OnClick="btnMyOrders_Click" Visible="False" />
Example then in Form(){
btn.Visible = true; to show it again
}
I think the first question you should ask yourself is : why would I put in my HTML doc a button that should not be visible ?
An HTML document should be used ONLY TO DESCRIBE A CONTENT'S SEMANTICS. So an HTML doc should ONLY contain the content you want to publish and extra data to explain the content's SEMANTIC !! NOTHING about the way it is displayed, NOTHING about the way it behaves !!
All displaying and behaviors questions should be managed with CSS and Javascript, NEVER within HTML itself.
Any element needed for Javascript only purpose should be added in the doc by Javascript itself !
You should never find, in an HTML doc, such things as prev/next buttons for a javascript picture gallery for example. The HTML doc should only contain the pictures list, than your JS script will change the way this list is shown, making it a eye candy gallery and add buttons for navigation.
So in your example, your saying you want to add in your HTML doc an invisible button with some Javascript actions on it.... that's probably an example of some content that should never be in the HTML doc.

how to make a part of the textbox as readonly

i have a tagtextbox on my page
when a user selects a category that category name goes to tagtextbox
now i want that this category name user cant change but he can append some more tags
means first tag becomes readonly and further he can add too in same text box
This is not possible.
Instead, you can put the first category name in a <span>, and put the textbox after the span.
You can then apply border: none to the textbox and make your own border around the entire thing to make it look like a single textbox.
CSS :
<style type="text/css">
.div {
margin:20px;
padding:10px;
background:#ccc;
float:left;
}
.textarea {
border:0;
display:block;
font-size:12px;
padding:5px 5px 0;
outline:none;
}
.span {
display:block;
background:#fff;
font-size:14px;
padding:5px 5px 5px;
color:green;
outline:none;
}
</style>
HTML :
<div class="div">
<div class="span">
<asp:TextBox runat="server" ID="txtNumber" BorderStyle="None" />
<asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator1" ValidationExpression="\d+" ControlToValidate="txtNumber" ErrorMessage="Only Numbers are allowed" Display="Dynamic" />
</div>
</div>
You can't make part of a textbox editable and another not.
My suggestion would be to change the type of element from a TextBox to a div or span via Javascript as soon as the user begins to enter the next tag.
If you want to allow append has in "paste" action, then you can't do that. Else and you just want to append via your code, why not use just a div to show what he has selected and add the selections to your post on a hidden textbox?
Adding to what SLaks said - Here is an example of a CSS & HTML hack where someone has added a span under the textbox. To make it look like it is part of the same textbox there is a border round the enclosing div. It looks quite effective.
textbox with uneditable name at the bottom

Making text box hidden in ASP.NET

I am using ASP.NET 3.5 and C#.
On my page I need to have a Text box that must not be visible to the user but it MUST be there when you look at the Page Source, reason being, another program called Eloqua will be looking at the page source and it must get the value of that text box.
The value of that text box will be populated based on what the user selects.
Thus, I cant set the text box property to Visible = False because then it will not be in the source HTML and I can't set the Enabled = False because I do not want the user to see the text box.
Is there some property I can use to make this text box hidden to the user but still visible in the page source?
My ASP.NET text box
<asp:TextBox ID="txtTester" runat="server"></asp:TextBox>
You can use a hidden field.
<asp:HiddenField id="myHiddenInput" runat="server" />
Use it just like a textbox.
Try this to invisible textbox instead of server side Visible property :
myTextBox.Style.Add("visibility", "hidden");
// or :
myTextBox.Style.Add("display", "none");
First thought: Can you use a hidden field? This would be much more suitable (<asp:hiddenfield ID="blah" runat="Server" /> if you want a .NET control).
If the app won't take that though you can actually just put "style='display: none;'" in the code-infront of the page. Intellisense won't like it, but it'll render just fine (EG: <asp:TextBox id="txtField" style="display: none;" runat="server" />)
Also from the codebehind you can do txtField.Attributes.Add("style", "display: none");
Or you could also just give it a CssClass "hidden" which in your CSS is defined as ".hidden { display: none;}"
The CSS class or just using a hidden field would be my recommendations.
Page.RegisterHiddenField or asp:HiddenField
CSS:
.hidden-div
{
display: none;
}
HTML:
<div class="hidden-div">
<input ... />
</div>
It will cause your input to be hidden, but it's gonna be visible in source code.
EDIT: Sorry, I misread it. I thought you wanted to hide an input. But it doesn't matter anyway, just replace input with basically anything.
If it must be a textbox for whatever reason just hide it with css:
<input type="text" name="blah" style="display:none" />
By Setting Visible = "false" in server side will not render the control. You should either use asp:Hidden or INPUT type="hidden". Other option is using CSS, by setting display:none.
Why not use a hidden field:
<input type="hidden" name="blah" />
How about using CSS to hide a div containing the text box:
.hidden {
position: absolute;
left: -9999px;
}
Then within your page:
<div class="hidden">
<asp:TextBox ID="TextBox1" runat="server" Text="hi"></asp:TextBox>
</div>
Hope this helps.
Simply, Try to create a CSS class and attach it to your TextBox as the following:
CSS Class Style
<style>
.Hide {
display:none;
}
</style>
Textbox using CssClass="Hide"
<asp:TextBox ID="txtTester" runat="server" CssClass="Hide"></asp:TextBox>
Note: you can't use validation with the Hidden control
<asp:TextBox ID="TextBox2" runat="server" visible="false"></asp:TextBox>

Categories

Resources