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
Related
I want to position my Extension Lib Dialog control to another than it´s default position, which seems to center to the window or the parent element. I have seen that there is a resize-listener, maybe this could be overwritten.
I tried to position it directly in the style-class, no success:
<xe:dialog id="loginDialog">
<xe:this.style><![CDATA[#{javascript:return "top:100px !important; left:50px !important;";}]]></xe:this.style>
<xp:div>
<xp:label value="Label" id="label1"></xp:label>
</xp:div>
</xe:dialog>
Seems that no one else has this problem ?? I could not find any topics or posts on this.
Are you sure you want a dialog? You might want to check out the ToolTip and Tooltip dialog controls. That's likely what you want instead of trying to mess with the main dialog.
The Ext. Library comes with a sample application. There should be code examples in there. Suggest you take a look at this page once you get it installed : /XPagesExt.nsf/Core_InPlaceDialog.xsp
If you must mess with the dialog itself - search for ways to do this with a standard dojo dialog. Since that's where the XPages one comes from. Maybe start here : How to set the location a Dojo Dialog opens at?
I am looking to set the height of an aspnet textbox based on the amount of text so there is no need to scroll on page load when text is loaded from a database field. I need to do this in code behind so the height is stored on the server.
I am able to resize the textbox using javascript as text is entered or removed however I need this to also be done on page load and again that height be stored server side.
Any ideas?
Try using http://www.impressivewebs.com/textarea-auto-resize/ - In short, it's a jquery function that allows you to invoke a resize. Once referenced, use $('#myTextarea').autoResize(); on keyup, blur, whenever.. to invoke the resize function.
Credit: https://css-tricks.com/textarea-tricks/
I'm using vb.net. Basically, I have a drop down list, text box and a submit button. You choose a movie director from a drop down list, then type in a movie, click button and it adds the data to my database.
There's another button which hides/shows drop down list, text box and submit button using Visible = True and Visible = False, but what I don't like about it is when it hides the things I said before, it leaves some white/empty space like if they are still there, but not visible.
Is there anyway to put some kind of holder/container and place a button which when clicked could add my drop down list, text box and submit buttons to that place?
Cheers,
E.N.
I assume that you are working with WinForms in Visual Studio. In the Toolbox the controls which could help you out of this situation are in the "Containers" section. Among others, there is a Panel, a FlowLayoutPanel and a TableLayoutPanel (see this video on msdn for a TableLayoutPanel Demo). They can help you to organize controls. Especially the FlowLayoutPanel places the controls automatically. But you can always change the Top and the Left properties of any control, to move them around to the desired place or group some of them on a Panel and change the Location of this one one.
You can add a control to a container by using the Add method of its Controls property. However, if the control is already on the form (since you are asking how to add an existing control) you must remove it from the form before.
Me.Controls.Remove(myButton)
panel1.Controls.Add(myButton)
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;
}
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