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.
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 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%" />
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
<asp:DataList ID="ItemsList" RepeatDirection="Vertical" runat="server">
<ItemTemplate>
<asp:LinkButton
ID="SecondLevelItem" runat="server" CommandName="second"
OnCommand="SecondLevelItem_Onclick" CommandArgument="<%# Container.DataItem %>"
Text="<%# Container.DataItem %>" >
</asp:LinkButton>
</ItemTemplate>
</asp:DataList>
everything works fine. except that I do not have any control over the styling on the items. I mean I have the styling on the datalist externally but I want to add some spacing (vertically) between each item. How do I do tht? Thanks
In general, to control style, you can apply the <ItemStyle> tag inside the <asp:DataList>.
You can optionally inject CSS properties into the asp:LinkButton tag, either with the class attribute or directly with style, controlling the height or other CSS properties.
If it's applicable, you can still add a on the bottom of the template (but this will add a vertical space to the last item too, and I don't know if you want it).
Hope to have been of help.
In the code behind databound method for the list, you may be able to add a css class via the attributes collection.
In fact you may be able to that declartively too, just checking now...
eg asp:DataList id="blah" runat="server" ItemStyle-CssClass="someClass"
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.