DevExpress ASPxButton not updating all properties - css

OK, been a while but I'm really stumped on this one. I want to change the image source of an ASPxButton from the code behind (later I will add conditions). The ImageUrl property updates but the height, width and borderstyle are lost (image appears at it's own height & width with a thick black border).
<dx:GridViewDataTextColumn FieldName="SyncStatus" VisibleIndex="0" Caption=" " Width="22px">
<DataItemTemplate>
<dx:ASPxButton runat="server" Image-Url="~/Images/Wizard/Wand24x24.png" Height="20px" Width="20px"
Border-BorderStyle="None" id="btnWiz" OnInit="btnWiz_Init"></dx:ASPxButton>
</DataItemTemplate>
</dx:GridViewDataTextColumn>
Protected Sub btnWiz_Init(sender As Object, e As EventArgs)
Dim btnWiz As ASPxButton = TryCast(sender, ASPxButton)
Dim container As GridViewDataItemTemplateContainer = TryCast(btnWiz.NamingContainer, GridViewDataItemTemplateContainer)
btnWiz.ImageUrl = "~/Images/NewNote.png"
btnWiz.Border.BorderStyle = BorderStyle.None
btnWiz.Border.BorderWidth = Unit.Pixel(0)
btnWiz.Height = Unit.Pixel(20)
btnWiz.Width = Unit.Pixel(20)
End Sub
I tried adding this as a solution
.dxbButton
{
border-style: none;
height: 20px;
width: 20px;
}
but element inspection shows this is ignored. Please advise as ypu are able and thank you in advance.

Your css styles are ignored because of your inline styles
Height="20px" Width="20px" Border-BorderStyle="None"
are generating inline styles and this is what you finally get:
<div style="border-style:None; height:20px; width:20px; -moz-user-select:none;" ...
That overrides your css

Apparently it was a minor syntax adjustment (as I suspected). The proper syntax is
btnWiz.Image.Height = 20
btnWiz.Image.Width = 20
and of course this is fully documented somewhere I'm sure. It also took care of the border issue.

Related

asp:Menu cursor pointer with Selectable set to false

I have an asp:Menu with a couple of levels of MenuItems. On the sub MenuItem levels, I add Selectable as false:
<asp:MenuItem Selectable="False" Text="SubMenu" Value="SubMenu">
This causes my mouse cursor to be text. How can I consistently set it to cursor:pointer for these sub menus? I've tried the following under the asp:Menu element:
<DynamicHoverStyle CssClass="MBLink" />
<StaticHoverStyle CssClass="MBLink" />
where the MBLink style is:
.MBLink
{
cursor:pointer;
}
However, this doesn't work consistently and seems to fall back to the text cursor on a post back.
Thanks for any help!
You can add Css class to the Menu, instead of the memuitem. The following code should work for you.

Align Checkbox in asp:TreeView

I have in my asp.net page asp:TreeView which generates checkboxes in codebehind.
<asp:TreeView ID="TreeView1" Width="250px" NodeWrap="true"
ExpandDepth="1 ShowCheckBoxes="All" runat="server">
</asp:TreeView>
In the code behind elements and child elements are generated in this fashion inside a resultset loop.
TreeNode tn1 = new TreeNode();
TreeNode tn2 = new TreeNode();
tn2.Text = "Child1";
tn2.Value = "Child2";
tn1.ChildNodes.Add(tn2);
However in the page the checkboxes are not aligned properly. I want to align them horizontally left.
Any suggestions please.
The treeview uses a specific HTML structure that is going to be hard to change... But you could look to using CSS to adjust the location of the checkboxes, or use an alternative control (repeater bound to a datasource that has an index parameter indicating how many spaces to indent, but this would not have the expand collapse functionality).
Added a css class and now whitespaces are removed before the checkboxes and horizontal alignment is working properly.
.tv table tbody tr
{
display: inline-block;
padding: 0px;
margin-left :5px;
width: 100%;
}
<asp:TreeView ID="TreeView1" CssClass="tv" NodeIndent="2" NodeWrap="true" ExpandDepth="1" ShowCheckBoxes="All" runat="server">

Adding line-height style to a label in asp.net

In my webpage there is label having multiple lines of text.
I need to add line-height property to that label in asp.net.
Thanks.
There are 2 ways to do this.
1) add a style for this. and give cssClass for that label.For example,
.line
{
line-height:150%;
}
And add the class to your label.
<asp:Label ID="Label1" runat="server" cssClass="line" />
2) Add style in code behind
Label1.Style.Add("line-height","150%");
Change the line-height value to whatever you want
Try below code:
LabelID.Style.Add("line-height", "100px")

NavigationMenu.ImageUrl border style?

I have a Navigation Menu in .aspx web page.
I set every MenuItem.ImageUrl to a .png Image.
The problem is that the image is shown with a border around of it.
The question is how can I eliminate this border ?
Thankyou very much
Piercarlo
In additions of previous :
I want to eliminate the border indicated by the arrow, the image was put on the menu Item by the property of menuItem .ImageUrl.
The image is 16 pixel .png with background transparent and without border
I tried without success following:
css: border:none,
property of menu:
<asp:Menu runat="server">
<StaticMenuItemStyle BorderStyle="None" />
<DynamicMenuItemStyle BorderStyle="None" />
I have no idea how do.
Thankyou for helping;
Set the CssClass property of the Menu control to the CSS class for the control where you can then remove the border around the image with border:none;
I found a resolution to my problems with help of javascript following the code:
window.onload = GetMenuImage;
function GetMenuImage() {
var NavMenu = document.getElementById('<%=NavigationMenu.ClientID%>');
if (NavMenu != null) {
var Images = NavMenu.getElementsByTagName('img')
var cont = 0;
while (cont < Images.length) {
Images[cont].style.border = 'none';
Images[cont].style.heigth = '10%';
Images[cont].style.width = '10%';
cont++;
}
}
I hope that this can help some other else
Bye
Piercarlo

default border color for .net textbox

I change the border style and border color on a .net textbox to solid red respectively. After a postback I am attempting to return the textbox to its default values, but I cannot seem to get the color right. I have googled this, and tried to get the default values in the debugger, but the values in the debugger always look too dark of a gray when applied. Is there an easy way to return to the default look and feel of a textbox?
try this:
TextBoxTitle.BorderColor = System.Drawing.Color.Empty;
You can write two CSS classes:
.tb_with_border {
border: 1px #FF0000 solid;
}
.tb_without_border {
border: none;
}
.. and then you can change styles by assigning CssClass property of your textbox, for example:
Textbox1.CssClass = "tb_without_border";
or in markup:
<asp:TextBox id="Textbox1" runat="server" CssClass="tb_with_border" />
If you're just switching the particular element style off then this works:
Textbox1.BorderColor = Nothing
You should be using CSS to do this anyways...
Textbox1.Style.Remove("border")
txt_TextBox.BorderColor = System.Drawing.Color.Empty;
txt_TextBox.BorderStyle = BorderStyle.NotSet;
Simple. Add another textbox or dropdownlist with default values and make it hidden.
To RESET to defaults, just set your textbox's border color, width and style to that of the hidden textbox like so:
txtMyTextBoxToReset.BorderColor = txtHiddenTextBox.BorderColor;
txtMyTextBoxToReset.BorderWidth = txtHiddenTextBox.BorderWidth;
This works in all browsers and works for Drop down lists as well

Resources