I have a treeview control where I am dynamically selecting a node depending on user interaction. when a node is selected I want to be able to have the scrollbar go to the location of that selected node in the tree. The scrollbar is simply made by overflow:auto in the div tag where the treeview is located. Can someone give me some detailed code to accomplish this? Thanks in advance.
If the scrollbar is a browser default triggered by overflow:auto, you'll probably need to use javascript. See if the answer below works for you:
Programmatically scroll to an Anchor Tag
In other words, you will need to figure out the ID of the selected node (or insert an element with an ID into the text of the node), then insert a snippet of javascript into the page (using, for example, a Literal control) that will scroll to that element when the page is loaded.
It's hard to give specific examples without seeing your code, but let's say your selected node is called ActiveNode and you've inserted a literal control called litScript. Then you could do something like this:
ActiveNode.Text = ActiveNode.Text & "<a id='TVSelectedNode'></a>"
litScript.Text = "<script type='text/javascript'>document.getElementById('TVSelectedNode').scrollIntoView(true);</script>"
Related
I have populated my trieview and on clicking the parent node, i could load the relevant content on the page.
In my case, Parent node is name of the article and child nodes are sections of article.
On clicking the section of article (child node), i need to bring that section on top of the page.
by using like,
I tried to provide this anchor as my child node value,
node.value = "
Now on clicking the child node, it does a postback, instead of bringing the section to top of the page.
How can i achieve this ?
Trick is to add
"
In the Node.Name property
Use following :
<a name="Section_top"></a>
As you can see,I can click the first check box(PRODUCT-323),but can't click the second.After a long
trying,I find it is because the second doesn't get scrolled to view(Is it intented by tool design or a bug?).So how to scroll this popup div to ensure the second get shown?
Actually,I have tried this,but failed
((JavascriptExecutor)driver).executeScript("document.getElementById("pupop").scrollTo(0,30)");
Can you please share which version of WebDriver are you using?
If I remember correctly, Version 2.16 or so had a known issue with locators not scrolling into view. The reason being,, they were using the position co-ordinates of the center of the element to bring focus and in this case, the center is hidden from view. This was solved in later versions.
There are a couple of approaches.
1) Try to perform some action on an Element that is completely hidden from view.This will bring the element fully into view and you will be able to access it.
In this case, try to access the checkbox in 3rd or the 4th row, you will be able to bring focus there. Then access the 2nd row.
2) Do a Driver.Manage().Window.Maximize() [This is in c#]. This will also bring the element into view.
It is a good practice to avoid a window with both scroll-bars. By maximizing it you will reduce the window for such errors.
Hope this is useful.
Did u try the keyboard options?? ctrl+ down arrow through script???
Or in the worst case use tab to focus on to that checkbox.. I works in OpenScript and RFT this way.
1) To click the second checkbox: You can use the xpath to find that element. In xpath you can easily get the table row id for each checkbox which will gets incremented in their ID.
2) To scroll you can use the below code:
JavascriptExecutor js = (JavascriptExecutor) webdriver;
js.executeScript("scroll(0,0);");
I am working on a custom control. Part of it is to render a div that is not displayed right away. Based on a particular client event, that div is shown. Everything works fine when there is only once instance of the custom control on a page. But in case of multiple instances, that many above mentioned divs are rendered, though not displayed. To make container page lighter, I basically want to render that div only once, irrespective of the number of occurrences of the custom control. Any help would be great.
Thanks,
Surya
Perhaps you can store a flag telling that that div has already been rendered. You can store that flag in HttpContext.Items. Here is some code
if ((bool)HttpContext.Current.Items["divRendered"] == false)
{
//Render the div
HttpContext.Current.Items["divRendered"] = true;
}
In asp.net, am trying to populate a dropdownlist box with very long text. I have fixed the width of list on the page and i don't want to change its size as it would affect my page layout. On clicking the dropdownlist, the text gets truncated to the size of the dropdown. I want to see the entire text without any truncation, without changing the size of the dropdownlist box..Also if there are any third party controls which would solve this problem?Would be very helpful if there's a solution for this.
Update:
Right now am trying a dropdown box in Jquery that will wrap the text if it exceeds the size..but again the problem is it works fine on an independent solution but when i integrate it with my application, it does not read the .css file and it does not do any formatting(style, font, alignment) that it is supposed to do according to the .css file.Any idea why this is happening?
The problem that you're describing is restricted to IE (it might be fixed in the latest version, I haven't tested).
In the past, I've had success with binding javascript methods to the onClick event on the drop down to increase the width, and the onBlur event to set the width back to its original value.
You might be able to use jQuery to create a tooltip like thing that appears when you hover over each option.
something like
// this executes on page load - just like asp.net Page_load()
function pageLoad(){
// attach a mouseover event to each option in your dropdown
$("#myDropdown option").mouseover(function(){
// get the text from that option
var text = $("#"+this.id).text();
// display that text in a small tooltip
showToolTip(text);
});
}
function showToolTip(text){
// display in some way
}
there's a javascript library called wz_tooltip available at walterzorn.com
hope that helps
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Recommendations for dropdown menu items that are too wide?
I have a drop down list which is populated by the database. Its value field contains the record's id, and its option field contains record's text. But the record's text entries are very long and make the drop down so wide that it totally changes the appearance of my webpage. When I cut down the width it also cuts down the text displayed. Is there any way I can make the web page look good and still allow the user to see the full text (like wrapping, scrolling, or something like that)?
How can I handle this?
Try using CSS to add a fixed width to your dropdown, like:
select {width: 150px}
Whilst the dropdown itself will be of a fixed width and may not show all of the text, the option elements should expand to the width of the widest element.
May not work in IE7 and below, in which case the this link may be of some use for those browsers:
You might consider setting a fixed width then setting the title attribute to provide a tooltip type of functionality so that the text shows up when hovered over.
After binding / populating the dropdownlist you can set the title attribute on each item to its own text:
foreach (ListItem li in ddl.Items)
{
li.Attributes.Add("title", li.Text);
}
If the text is very wrong, I think you may have to consider a different approach rather than just displaying it all in a DropDownList.
You could have the DropDownList only display a small part of the text as a summary and then display the full text next to the list as the user changes the item. I would recommend this is done using AJAX to keep the user experience nice.
To do this, wrap the DropDownList and a Label to the right of the list in an UpdatePanel. Then, the onSelectedIndexChanged event of the DropDownList would look something like this:
protected void DropDownList1_selectedIndexChanged(object sender, EventArgs e)
{
var item = _DB.GetItemFromDB(DropDownList1.SelectedValue);
Label1.Text = item.Text;
}
One pleasant alternative is to show only part of the text in your column, plus a button or graphic of some sort that indicates they can see more by either hovering over the cell or clicking on something.
For example:
Name | Id | Cover Letter
----- ------ ----------------------------------------------------
Rex | 1000 | I am seeking opportunities in t... (click for more)
You can code this by hand, but there are a lot of tools out there that make this easy, particularly if you're comfortable with JQuery. I found the following just quickly browsing the JQuery windows and overlays plugins:
JQuery Callout Plugin, which
looks very nice.
JHelperTip, "The multi-use
tooltip for JQuery."
Coda Bubble for a slick, cute
style.
Have you considered showing initial few characters and then using a tool tip to show the complete string when the item is selected?
I wrote this a while back that you may find helpful: http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html
It's a jquery plugin to make a styleable unordered list backed by the hidden select element.
The source is on github: https://github.com/tncbbthositg/GiantDropdown