I have two servers... one is of the TEST. Other.. of the live (productions). Both is of SAME OS and with the same hardware (32 bits), and same .NETs (4).
In one the LIVE, my styles attributes... uninclused.
Example:
<asp:textbox runat=server width=250 id=ctl32 />
In ALL browser, but the #10, render becomes:
style="width:250px;"
BUT in the ie10, doesn't set the style, is this a bug of .NET?
first you should avoid doing inline style settings. But I think you are setting an attribute, which is a deprecated way to apply the width to an element, it should be in a style rule. So in your css file (please avoid inline styles) create a class to set your with:
.myInput250{
width:250px;
}
and in your webforms textbox declaration reference it:
There seems to be an issue with the width attribute of an ASP.NET TextBox being recognized properly by Internet Explorer 10. Instead of using the Width attribute, try this:
<asp:textbox runat="server" id="ctl32" style="width: 250px;" />
Related
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" />
I've just replaced Telerik controls in a small web project with DevExpress controls, but now, despite my adding an inline display div as container, these controls are no longer rendered inline. What could have caused this, and what can I do to get these errant controls back inline?
<div style="display: inline;">
<label>
Department:</label>
<dx:ASPxComboBox ID="deptCombo" runat="server" AutoPostBack="false" ValueField="DeptId" TextField="DeptName" Width="250px" OnSelectedIndexChanged="deptCombo_SelectedIndexChanged">
</dx:ASPxComboBox>
<label>
Production Date:</label>
<dx:ASPxDateEdit ID="productionDatePicker" runat="server" DisplayFormatString="{0:dd/MM/yyyy}" EditFormat="Custom" EditFormatString="dd/MM/yyyy"
ondatechanged="productionDatePicker_DateChanged">
</dx:ASPxDateEdit>
</div>
Sounds like the DevX controls have some CSS that you'll need to override.
For starters, I'd try adding the !important flag to the style:
<div style="display: inline !important;">
If that doesn't work, switch back to the RadControls. They are far superior :)
Almost all of DevExpress controls are rendered as tables. The main advantage of this approach is that this way provides good cross-browser capability, since when nested divs are used, it might be hard to synchronize their positions and sizes for all browsers. However, using tables allows end-users to get rid of this problem.
[CSS] add this line on your css
.DXControlsInline {display: inline-table;}
[ASPx] add CssClass="DXControlsInline" on controls you want to make inline
<dx:ASPxLabel ID="ckArboviralDiseaseChikungunyaOtherSpecify" runat="server" CssClass="DXControlsInline" Text="Specify:"></dx:ASPxLabel>
<dx:ASPxTextBox ID="tbArboviralDiseaseChikungunyaOther" CssClass="DXControlsInline" ClientInstanceName="tbArboviralDiseaseChikungunyaOther" runat="server" Width="350px"></dx:ASPxTextBox>
Source : http://www.theedgesearch.com/2016/04/how-to-arrange-devexpress-controls.html
The task is not directly related to our controls and can be implemented without them in a similar way. In the case of ASPxTextBox, define a CssClass property to it with the following rule:
<dx:ASPxTextBox ID="txt1" runat="server" Width="170px" CssClass="txtStyle"></dx:ASPxTextBox>
.txtStyle {
display: inline-block;
}
I've prepared a small sample to demonstrate how it works. See also CSS display Property.
UPDATED:
When a caption is specified for ASPxTextBox, it is rendered as a table. That is why the suggested approach does not work in this case. To resolve this issue, I suggest you place each text box in a div element and set the 'display' property for it. Let me know if this helps.
Source
I have a datapager with next and previous buttons as so:
<asp:DataPager ID="dpFeaturedPager" PagedControlID="lvFeaturedTips" QueryStringField="ftpg" PageSize="1" runat="server">
<Fields>
<asp:nextpreviouspagerfield ButtonCssClass="featured-previous" PreviousPageText="Previous" ShowNextPageButton="false" />
<asp:nextpreviouspagerfield ButtonCssClass="featured-next" NextPageText="Next" ShowPreviousPageButton="false" />
</Fields>
</asp:DataPager>
When there is only one page available, the Next and Previous links are rendered as so:
<a disabled="disabled">Previous</a>
I have not seen this disabled tag before, and presume it's coming from the datapager control which I won't be able to control.
As usual, this is fine on FireFox but on IE7 the Previous and Next text does not render correctly - it is outlined (what I would expect disabled to look like to be honest - but looks a bit ugly in the page!)
Can I control this in CSS, or is this a known issue?
Thanks
Duncan
Check out this thread on StackOverflow, they have some suggestions on CSS styling for disabled links and controls. Hope it helps!
a[disabled=disabled] {
color: red;
font-weight: bold;
border: 0px;
}
Edit: Doesn't look like the selector attribute will work in IE6.
You cannot set color of disabled control in IE. You can change background or border, but the color will always stay gray with white shadow (system color). It does not work even in IE9.
Thread about this issue: How to change color of disabled html controls in IE8 using css.
Quick solution using jQuery removeAttr():
$('a').removeAttr('disabled');
This:
<a disabled="disabled">Sad</a>
Becomes This:
<a>Happy</a>
I added a class of 'btnDisable' to both the next and previous links then used CSS...
span .btnDisable {cursor: not-allowed; }
span a.btnDisable {cursor: pointer; }
Just make sure you set RenderDisabledButtonsAsLabels to True.
For those that still look for this issue, from .net 4.0 you have the possibility to define in the web.config file the HTML compatibility for .net controls.
<pages controlRenderingCompatibilityVersion="4.0" clientIDMode="AutoID">
Then in the Global.asax.cs you can specify the CSS class .net should apply to disabled controls.
System.Web.UI.WebControls.WebControl.DisabledCssClass = "disabled";
I have an ASP:Label control on my page, and I would like to give it some CSS formatting. I know I could give it a CssClass name, however, it seems wrong because I want to give it a specific positioning therefore I'm looking for something more similar to the regular "id" attribute of html elements.
The ID of the label is the one used by the ASP, but in the actual html produced, I get a different ID.
Any suggestions?
Thanks.
The next version of ASP.Net will make it easier to specify an exact clientID for the control. At the moment, you have several options to work around this issue:
Inline Styles
<asp:Label runat="server" ID="MyLabel" style="..." />
CssClass
Just use a css class, as you mentioned in your quesiton. Nothing stops you from making those unique if you have to.
Write a handler to serve your style sheet
When you write your style sheet, leave placeholder in the file for client IDs. Then use an http handler to substitute in the actual rendered IDs on each request. This isn't exactly simple because the style sheet request is separate from the html page request, but it is certainly possible and so worth mentioning.
Use a container
Since a label renders as a span tag, if that span is unique within a specific naming container you can select it that way:
<div id="MyContainer"><asp:Label ID="MyLable" runat="server" /></div>
And in your style sheet:
#MyContainer span { /*...*/ }
Use a container + a class
If the container is not specific enough, you can use the class just to narrow it down within that container:
<div id="MyContainer"><asp:Label ID="MyLable" runat="server" CssClass="MyClass"/></div>
and in your style sheet:
#MyContainer span.MyClass { /*...*/ }
ASP.net essentially breaks the CSS ID selector. To get around this sometimes I will place this id in the CssClass attribute.
<style type="text/css">
input.first-name { /* style me */ }
</style>
<asp:TextBox runat="server" ID="firstName" CssClass="first-name" />
You can also add multiple class names in the CssClass attribute
<style type="text/css">
input.first-name { /* style me */ }
input.text-input { /* because ie 6 won't do input[type=text] */ }
</style>
<asp:TextBox runat="server" ID="firstName" CssClass="first-name text-input" />
I try as much as possible to not use inline style or to use the additional styling attributes provided by the controls.
Your only options are to use CssClass or inline styles. As ASP.NET auto-generates the ID's of server side controls you should never try to second guess what these will be. It can be a major pain getting Webforms to work with elegant CSS layouts.
ASP.NET 4.0 will introduce the ClientID property that should make it easier to work with ID attributes in the future.
I think you can do something like:
<asp:Label ID+"lblID" style=" [whatever style you want goes in here "] runat="server />
Remember when the control gets rendered, it gets rendered as with the ctrl.etc....
Or if you are doing positioning, can't you wrap the label in a <div>
Yeah - a major headache with web forms - the id is made up of all the contentsections, panels etc that the label (or other control) sits within.
your best bet really is to add a CssClass to the control.
I can't seems to change the default color of the required field validator. In the source it is:
<span class="required">*</span>
<asp:RequiredFieldValidator ID="valReq_txtTracks" runat="server"
ControlToValidate="txtTracks"
Display="Dynamic" />
Here's what I have in my .skin file:
<asp:RequiredFieldValidator runat="server"
CssClass="error-text"
ErrorMessage="required" />
In the rendered source I see:
<span class="required">*</span>
<span id="ctl00_ctl00_cphContent_cphContent_valReq_txtTracks" class="error-text" style="color:Red;display:none;">required</span>
Notice the "style=color:Red;". That needs to go. I can't override it with a css-class because it's inline CSS. What should I do?
There is a RequiredFieldValidator.ForeColor property you can set to control the color. Note that if you want to set the color in CSS, then you need to set ForeColor="" to clear it on the control.
I know this an old thread, but I ran into this another day. It's kind of odd that setting style sheet does not override the text color of the validator. In my case, I had a whole bunch of different validators and extended validators that I wanted to override text color for, so instead of a theme and skin file, I created custom control adapter that handles rendering of BaseValidator control. Inside the rendering method, I just set ForeColor = Color.Empty. Hopefully this helps other people who ran into this situation and want to override text color for all kind of validators (required field, regular expression, compare,...).
Did you try to add style attribute with empty string in the skin file:
<asp:RequiredFieldValidator runat="server"
CssClass="error-text"
style=""
ErrorMessage="required" />
I read somewhere to use the !important tag in your css class to override the inline css...
Using !important seems to work fine in Firefox and IE, but for some reason not in Google Chrome... no biggie though, Chrome's share is still very low.
.form_error
{
font: bold 15px arial black,arial,verdana,helvetica !important;
color: #ff0000 !important;
}