RadWindow UI Issue - css

So I added a RadWindow to my aspx page
file1.aspx (points to cssfile1.css)
Within that aspx file, there's a RadWindow which opens a RadWindow that contains another aspx file
file2.aspx (points to cssfile2.css)
My question is, how do I override the CSS in file2.aspx that seems to be messing with the RadWindow. And if it is the CSS in file1.aspx, how do I omit the CSS for this RadWindow?

It is the main file (cssfile1.css from page1.aspx). The second pair are loaded in an iframe so they don't affect the topmost frame.
To resolve the problem, there are three approaches:
try the Lightweight RenderMode as it uses more semantic HTML so it may not get affected (i.e., it is not a table): http://docs.telerik.com/devtools/aspnet-ajax/controls/window/mobile-support/render-modes.
Do a binary search in the stylesheet to find the offending rule and make it specific enough so it does not target all HTML elements. Basically, follow this article: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/troubleshooting/distorted-appearance
use the browser dev toolbar to find the elements in the RadWindow that are affected by your rules and add a heavier CSS selector that will reset them (e.g., remove paddings you add, whatever).

Related

Designing Custom Drop Down with mulitple rows and columns

I have a requirement like for the drop down as shown. Could any one help me in achieving this.
Briefing:
On click of the button a pane should be opened which contains rows and columns containing text, on click of it appropriate action need to take place. The source can be dynamic too....
There are many techniques for acheiving this design. You could do it purely with html and css by having an image that looks like a dropdown popup an absolutely positioned div underneath. Or you could use the asp.net ajax control toolkit control called "PopupControl" that essentially abstracts all the html/css away allowing you to just specify a target panel. There are also various jquery plugins, here is one from abeatifulsite.

Keeping ASP.Net TreeView nodes collapsed when navigating web site

I noticed that when navigating an ASP.Net web site the nodes in the TreeView always expand.
Is there a setting or attribute we can include in the markup that will keep the TreeView nodes collapsed until the user expands them?
Maybe something is needed to be added to the code-behind file?
Yes there is, it's called ExpandDepth
ExpandDepth - Gets or sets the number of levels that are expanded when a TreeView control is displayed for the first time.
If you want all the nodes, including the root, to be collapsed just set it to 0
<asp:TreeView ExpandDepth="0" ...
I don't think you can do this in the markup. But it is possible in code - behind. Check out this link for some sample code: Collapse all open nodes.
I'm pretty sure that an app I wrote a few years collapses the entire tree with one line of code (like you we found that it kept opening up every post back). If this link doesn't work I will post the code I used tomorrow.
The one line of code I was looking for is
tv.CollapseAll();

How do you force an asp:Panel to overflow to the right when dynamically adding controls to a web site?

I'm trying to dynamically add controls to an asp:Panel on a web site so that they all appear on the same line. I have a set width, but when I add overflow:auto they still continue to be added on the next line when they run out of space. Is there a way to fix this?
Edit: I think I need something like the flowLayoutPanel for windows forms
Are your controls based on panel controls? Then this is normal behavior. Panels are usually generated as <div/> tags, and <div/> tags start on a new line by default.
Without actual HTML as a base I can't give you example code, but I suspect in order to do what you want, you're going to have to explore the display attribute in CSS. You can find out more about that here.

ASP.NET Treeview control default behavior

I have a page using a Treeview server control like so:
<asp:TreeView ID="uxTreeView" ShowExpandCollapse="True" ShowCheckBoxes="All" runat="server"></asp:TreeView>
What I expect to have happen is my treeview should render a series of checkboxes, with the first level having a plus sign (+) to expand it, and then a minus sign (-) when it's expanded to collapse it.
For some reason, I'm not seeing the expand/collapse links. I can see there's a parent and a child node, and they're properly nested, but the expand/collapse links aren't showing.
Has anyone seen this before? In the past this hasn't been an issue - dragging and dropping the control onto a page has worked fine. I've inspected the elements with Firebug, and I didn't see any CSS that would hide the expand/collapse links.
UPDATE
I've found there's an ImageSet property on the treeview - now my treeview is actually adding the arrows for the various nodes indicating whether they're expanded or collapsed. Is it possible to style the individual cells in the outputted table? (It looks like this would be a lot of work)
Did you by chance specify custom images, perhaps incorrectly, for the expand and collapse elements?

Applying CssStyle to Infragistics WebDataGrid column, when loading dynamically

I'm trying to right-align a column in my WDG. I've been through the Infragistics tutorials, so I know that I need to added a new CSS style as such...
tbody > tr > td.ColumnRight
{
text-align: right;
}
Then on my column apply CssStyle="ColumnRight"
However, my WDG is on a usercontrol which is dynamically loaded.
When the page comes up the right-align has not taken hold.
It does not work until you refresh the page (F5) - but this is undesirable, really need the style in place upon first-load.
Its obviously a problem with the dynamic loading, but any ideas how to fix it?
Any help much appreciated!
For looking into this, I would look at the css that is applied to the cells by using an element inspector like provided by the developer tools for IE or fire bug on Firefox. This should help you to know if your css is being loaded and something else is taking precedence.
Also, when you dynamically load the UserControl is it on a full post back or an AJAX call back such as inside of an update panel? If in an AJAX call and you change the call to be a full post back, does it change the behavior?
Is the behavior consistent across multiple web browsers or does it only occur in one browser?
For more specific suggestions, I would need more details on how you are dynamically loading the UserControl and where the CSS is. Is it in another file, a style on the page/user control?

Resources