I have an asp button that I am styling using CSS.
Button:
<asp:Button ID="btnClockin" runat="server" Text="Clock In" class="FullWidthButton" />
CSS:
.FullWidthButton {width:100%;}
This works fine until I set btnClockIn.Enabled = False in my code, then it doesn't pick up the style. I tried adding the following CSS.
.FullWidthButton[disabled="disabled"]{width:100%;}
and
.FullWidthButton[disabled]{width:100%;}
but these don't seem to have any effect. What am I doing wrong?
Change "class" to "CssClass" and it should work consistently.
You can use this its works for me:
<asp:Button ID="btnClockin" runat="server" Text="Clock In" style="width=100%" />
Related
I am trying to move the button to the right, and it's on a modal form if that somehow makes a difference, but it's not budging no matter what I do. I cannot create a separate CSS class for the code, just use the universal one.
Here's the code:
<asp:Panel ID="PnlUpdateSubjectPin" runat="server" CssClass="row" Visible="false">
<asp:Panel ID="Panel140" runat="server" CssClass="col-6">
<asp:Button ID="BtnGenNewPin" runat="server" Text="Generate Pin" CssClass="btn-success margin-left: 50px" />
You can't put the style elements in to the "class" you specify for that button.
Use a Style for things you want to add - the CssClass does NOT allow css, but ONLY allows you to specify existing css class(s) you want to use.
So, try this:
<asp:Button ID="BtnGenNewPin" runat="server"
Text="Generate Pin" CssClass="btn-success"
Style="margin-left:25px" />
the above should work just fine. So, don't try to put/shove css into the CssClass setting. You are free to use Style= in above, and it will be respected, and in fact should not mess nor bother with the existing class(s) you specified in the CssClass settings.
CssClass simple does not allow you to add or put css into that setting - only class(s) can be used by that setting.
Use Style -- you should be just fine.
I am attempting to do something simple.
I have a button.
<asp:Button ID="btnMyButton" runat="server" CssClass="MyButton" CausesValidation="False" Text="ClickMe" />
Its style is stored in a stylesheet that I KNOW is being used because other elements in the page use styles from this stylesheet.
This is how I define the style:
.MyButton {
font-size: 80pt;
color: red;
}
I have also tried some other ways to specifically point to this class (including specifically referring to it from a containing element) but to no avail:
input[type="submit"].MyButton {
table.MyTable > tbody > tr > td > input.MyButton {
I can see in Google Chrome's Developer TOols that it is not even overriding the styles I'm setting, they are simply not there.
When I look at the page source, I see that the input control ASP.NET generates does not even USE my class (it uses something called submitBtn, which I myself have not defined anywhere). If I change this class to my one in using Google Chrome's Developer Tools, my styles apply as I would expect so I know they are usable. I just do not know why they are not being used to begin with.
I CAN style all buttons globally with input[type="submit"] {, but I am trying to style a specific one and would rather not use inline style definitions.
Please advise.
EDIT:
I have found that if I call my css class in my css file submitBtn, it WILL apply the styles I set. However as all of the ASP.Net buttons appear to want to use this submitBtn css class, in order to set a distinct style for each one I'll have to wrap them in spans or something and specifically set button styles this way.
I still want to know why it's not letting me set the name of the style class used for the ASP.Net buttons though.
I have updated the Question title for greater clarity.
You can set inline style to the asp.net controls.
<asp:Button ID="btnMyButton" runat="server" CausesValidation="false" Text="ClickMe"
Style="font-size: 80pt; color: Red;" />
or
.MyButton
{
font-size:80pt;
color:Red;
}
<asp:Button ID="btnMyButton" runat="server" CausesValidation="false" Text="ClickMe"
CssClass="MyButton"/>
work fine for me.
Cheers
I know this is the old question, but in case if someone will stuck on the same problem, you should also check your .skin file. In my case there was the following declaration:
<asp:LinkButton CssClass="linkbtn"></asp:LinkButton>
and this was forcing all LinkButton controls throughout the application to have "linkbtn" class with no pissibility to override it.
had the same problem. In my case, I was working with SharePoint, which CSS overrode my button style. try:
.MyButton
{
font-size:80pt !important;
color:Red !important;
}
!important makes a style un-overridable...
Use <asp:LinkButton> instead
So your button would be
<asp:LinkButton ID="btnMyButton" runat="server" CssClass="MyButton" CausesValidation="False" Text="ClickMe" />
How can I make a TextBox control that is multiline not be resizable?
I am using asp.net with c# and I can't find an option to do this
You should be able to disable textarea resizing in Chrome and Safari with this css:
textarea {
resize: none;
}
Not preferred code, but this worked for me. This style overwrites the css
<asp:TextBox id="tb5" TextMode="multiline" style="resize:none" width="330px" Height="50px" wrap="true" runat="server" />
I am using the following method and it works most on most of them;
.mymultitextboxclass{max-height:100px;min-height: 100px;max-width:400px;min-width:400px;}
then set this css class to your MultiLine Textbox. see it : http://jsfiddle.net/tugberk/RKcbn/
There is no such option on the control.
This completely depends on the browser and how it renders textboxes.
You can control this via the CSS resize property, though this is browser dependent.
Create a CSS class as follows:
.MultiLineTextBox
{
resize: none;
}
Then in the code of textbox,
<asp:TextBox ID="txtAdd" runat="server" TextMode="MultiLine" BorderStyle="Inset"
CssClass="MultiLineTextBox"></asp:TextBox>
when I try to create a number of Checkboxes, I have strange spaces inserted:
image
<td style="width:85%;white-space:nowrap;" colspan=3>
<asp:CheckBox ID="rdoSchool" runat="server" Text="School (NSL)" />
<asp:CheckBox ID="rdoSFS" runat="server" Text="Summer Food Service" />
<asp:CheckBox ID="rdoOther" runat="server" Text="Other (Specify)" /> <asp:TextBox ID="txtOther" Width="125px" runat="server" />
</td>
How can I make the label closer to the checkbox?
This isn't default styling, and is most likely caused by your CSS. Use a tool like Firebug (on Firefox) or Developer Tools on IE8 to find the applied CSS rules (Should be F12 either way).
Take a look at the markup the CheckBox control generates.
... "Now there's your problem" - Adam Savage, Mythbusters.
Basically the CheckBox control (along with the RadioButtonList control) generates crappy markup. One way to fix this, is to extend and override the Render method to implement some sensible markup-generation code. Another option is to force the HTML-tables the control generates into place with some clever CSS tricks.
The expected behaviour on enter in a form seems to be undefined in the HTML 4.01 Specification while the HTML 5 specification says it should be the first submit button in the form.
Internet Explorer (IE) highlights the first button in the form when the form has focus by adding a proprietary border or something. Other browsers do not add such a visual clue.
I'd like to use another button as the default and style this button so all browsers will provide a visual clue that it is the default button. (We're using ASP.NET which uses one form per page, and so it's hard to design the pages so that the default button always comes first.)
While I can easily accomplish this with javascript and css in most browsers, I'm having trouble making IE stop highlighting the first button.
Is there any way to tell IE to NOT highlight the first submit-button or to highlight a different button? Or is there some other solution that I've missed?
On your asp.net button control, set useSubmitBehavior="false". That renders the html as a button rather than a submit.
ASP.Net 2.0 also introduced the concept of DefaultButton.
This is available on atleast Form and Panel elements:
<form id="form1" runat="server" defaultbutton="Button2">
<div>
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:Button id="Button1" runat="server" text="1st Button" onclick="Button1_Click" />
<br />
<br />
<asp:panel id="something" defaultbutton="button3" runat="server">
<asp:TextBox id="TextBox2" runat="server"></asp:TextBox>
<br />
<asp:Button id="Button2" runat="server" text="2nd Button" onclick="Button2_Click" />
<br />
<asp:Button id="Button3" runat="server" text="3rd Button" onclick="Button3_Click" />
</asp:panel>
<br />
<br />
</div>
</form>
So, when you load the page, or are entering text in TextBox1, pressing Enter will submit Button2. When you are entering text in TextBox2 pressing Enter will submit Button3 - as you are inside the Panel.
This is powered by an onkeypress method created by ASP.Net.
When the page loads, IE and Firefox both highlight Button2 (as you want).
If you know which button will be declared as the defaultbutton, you can use what ever CSS you would normally use to style this for all browsers.
Rather annoyingly, when you focus either text box, IE will then (incorrectly) highlight Button1.
This is because IE's default behaviour is overridden by some javascript emitted by ASP.Net:
<script type="text/javascript">
//<![CDATA[
WebForm_AutoFocus('Button2');//]]>
</script>
But, IE will then ignore that once another element has focus, and go back to highlighting the wrong button (which doesn't get used unless the user explicitly clicks it in this example).
Other than replacing them with image buttons, I'm not sure what else I can suggest.
One way to get around this is to create a dummy button at the top of the form and move it out of sight. Then handle the enter keycode in javascript and style the new default button with css.
Feels dirty though. Any better ideas?
Use either of these CSS Styles
a:active, a:focus,input, input:active, input:focus{ outline: 0; outline-style:none; outline-width:0; }
a:active, a:focus,button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner
{ border: none; }
OR
:focus {outline:none;} ::-moz-focus-inner {border:0;}
Once the CSS Style part is done, then you might also need to set the IE-Emulator. Update your web applications web.config file and include below key.
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=7; IE=9; IE=8; IE=5;" />
</customHeaders>
</httpProtocol>
</system.webServer>
If you are using .Net 2 this may help you
...Use the DefaultFocus property to
access the control on the form to
display as the control with input
focus when the HtmlForm control is
loaded. Controls that can be selected
are displayed with a visual cue
indicating that they have the focus.
For example, a TextBox control with
focus is displayed with the insertion
point positioned inside of it. ...
What about defining a particular CSS style (or class) for this button ?
<input type="button" value="basic button" .../>
<input type="button" style="border: solid 2px red;" value="default button" .../>