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">
Related
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.
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")
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
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
How can I add horizontal scroll capabilities to the asp.net listbox control?
Example to add horizontal scroll:
<asp:ListBox ID="List" runat="server" Height="320px" Width="100%" style="overflow-x:auto;"SelectionMode="Multiple">
</asp:ListBox>
CSS3 overflow-x Property: http://www.w3schools.com/cssref/css3_pr_overflow-x.asp
We can put this list box inside a DIV and set the style for DIV to overflow which will automatically show the scroll bar whenever necessary.
Your aspx page has the following DIV:
<div id='hello' style="Z-INDEX: 102; LEFT: 13px; OVERFLOW:
auto; WIDTH: 247px; POSITION: absolute; TOP: 62px; HEIGHT: 134px" >
Put your asp:listbox inside the DIV definition. In page_load function, you need to define the width and height of the list box properly, so that it won't overflow with the DIV.
private void Page_Load(object sender, System.EventArgs e)
{
if (!IsPostBack)
{
int nItem = Convert.ToInt32(ListBox1.Items.Count * 17);
ListBox1.Height = nItem;
ListBox1.Width = 800;
}
}
Code and solution available at http://www.codeproject.com/KB/custom-controls/HorizontalListBox.aspx
If you really, really need it, one idea would be to create a custom
ListBox class whose HTML looks like this: sets the width of the SELECT
to that of your widest value's width (the max width of the scrollbar,
for example). Now wrap that SELECT inside of a DIV of the 'constrained'
size and let it scroll on overflow.
Here's a quick example starting down those lines, here's the type of
HTML you want spit out by a control:
<div style="width:200px; height:100px; overflow:auto;">
<SELECT size="4">
<OPTION
Value="1">blahblahblahblahblahblahblahblahblahblah blahblah</OPTION>
<OPTION Value="2">2</OPTION>
<OPTION Value="3">3</OPTION>
<OPTION Value="4">4</OPTION>
</SELECT>
</div>
so in essence I'd recommend creating a composite custom control for
this, which renders this HTML. They're pretty easy to make, Google on
the terms 'composite control asp.net'.
The toughest part will be matching up the div dimensions to that of the
select box, to make the scrollbars work/line up properly. That's why
it's kinda tricky.
Source
Also, take a look at this: Automatically Adding/Hide Horizontal Scroll bar in the ListBox control
EDIT: Make sure you have enough height to include the scroll bar height or else you'll get the vertical scroll bar on both controls.
If you are doing it only for display purpose, You can do it in another way by using Textbox with mulitiline property. By appending the text with new line as such!
List<Yourclass> result = null;
result = Objname.getResult(Parameter1, Parameter2);
foreach (Yourclass res in result)
{
txtBoxUser.Text += res.Fieldname1.ToString();
txtBoxUser.Text += "\r\n" + res.Fieldname2.ToString();
txtBoxUser.Text += "\n\n";
}
Hence you will get the view of mulitline textbox with All your data arranged in good format as above code(New line and all). And also it will wrap your texts if it exceeded the width of your textbox. Also you no need to bother about the scrollsbars and here you will get only vertical scroll bar since all our results have been wrapped as per the behaviour of textbox.