We are having problems with WebDropDown's not rendering properly under a few different scenarios. However the common delimiter seems to be if we modify anything to do with databinding such as rebinding the datasource.
What it looks like is happening is that when the control redraws the 'editor' portion doesn't expand across the whole control.
We have tried playing with the different widths and styles but to no avail. It really takes away from the polish of the application.
Any ideas? Here is the markup for at least one of the dropdowns with issues. It is happening for both controls embedded in another control and just added to a page. Also in the scenario where it is on a page there are other dropdowns that work find and only the webdrop down that has the non datasource binding that is altered on postback is affected:
<ig:WebDropDown ID="ddSearch" runat="server" onselectionchanged="ddSearch_SelectionChanged" OnValueChanged="ddSearch_ValueChanged" StyleSetName="Windows7" Width="400px" AutoFilterQueryType="Contains" DropDownAnimationDuration="200" DropDownContainerHeight="400px" EnableAutoFiltering="Client" LoadingItemsMessageText="Refreshing data" NullText="Enter S/N or partial S/N to match." ToolTip="Enter S/N or partial S/N to match. Use % as a wildcard"AutoFilterTimeoutMs="300" onitemsrequested="ddSearch_ItemsRequested" StyleSetPath ="~/App_Themes">
<Button DisabledImageUrl="~/App_Themes/Windows7/images/ig_cmboDown1.png" HoverImageUrl="~/App_Themes/Windows7/images/ig_cmboDown1.png" ImageUrl="~/App_Themes/Windows7/images/ig_cmboDown1.png" PressedImageUrl="~/App_Themes/Windows7/images/ig_cmboDown1.png"/>
<ClientEvents InputKeyDown="ddSearch_InputKeyDown" InputKeyUp="ddSearch_InputKeyUp" AutoFilterStarted="ddSearch_AutoFilterStarted" ValueChanged="ddSearch_ValueChanged" />
</ig:WebDropDown>
Thanks
jack
Hi,
if you don't set custom images for the button, do you still experience the same issue?
Other than that, you can try adjusting the following CSS classes in ig_dropDown.css:
.igdd_ValueDisplay
{
background-color:Transparent;
font-weight:normal;
font-size:10pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-width:0px;
width: 100%;
}
Angel,
I removed the custom button (I think that was someone here trying to fix the issue) but that didn't help and we have a completely generic just dragged onto the page dropdown on another page that has the same issues.
I made your css tweaks (to the win7 version of the styles which is what I assummed you meant) but it didn't fix the problem, it did mask it a little bit by removing the background color.
It looks to me like the problem is with the actual editor control - it is not staying at 100% width.
Here are two more screenshots ... one of them shows me filling the edit control with too many characters and it is scrolling off to the left.
Also change the QuickQube in this css with the Name of the styleset u are using .
this was the problem at my palce it creates all the classes under ig_dropdown.css with the ig_featurebrowser<somename>
which causes problem and then i change the FeatureBrowser with the name os styleset like in my case it was QuickQube.I also set the Border=0px instead of 1px and it solves the problem.
Use the following css file ig_dropdown
/*
Main control CSS class
*/
.igdd_QuickQubeControl
.igdd_QuickQubeControlArea
;
background-color
/* table-layout:fixed;*/
Main Control CSS class when it's disabled
.igdd_QuickQubeControlDisabled
Main control css class on hover
.igdd_QuickQubeControlHover
Loading message container
.igdd_QuickQubeLoadingItemsMessage
.igdd_QuickQubeControlFocus
/*table-layout:fixed;*/
CSS class for the table that accomodates the value display and the drop down button, and which is a
child of the main control (div)
.igdd_QuickQubeValueDisplayTable
CSS class for the actual input field (<input type="text" />)
.igdd_QuickQubeValueDisplay
.igdd_QuickQubeValueDisplayHover
.igdd_QuickQubeValueDisplayFocus
.igdd_QuickQubeValueDisplayDisabled
.igdd_QuickQubeValueDisplayReadOnly
.igdd_QuickQubeDropDownList
list-style-type
.igdd_QuickQubeDropDownListHover
.igdd_QuickQubeDropDownListDisabled
.igdd_QuickQubeDropDownListFocus
.igdd_QuickQubeDropDownListReadOnly
.igdd_QuickQubeDropDownListContainer
.igdd_QuickQubeDropDownListContainerFocus
.igdd_QuickQubeDropDownListContainerHover
.igdd_QuickQubeDropDownButton
.igdd_QuickQubeDropDownButtonHover
.igdd_QuickQubeDropDownButtonFocus
.igdd_QuickQubeDropDownButtonDisabled
CSS class that controls the style of the LI items in the list
.igdd_QuickQubeListItem
a:link
a:visited
.igdd_QuickQubeListItemSelected
.igdd_QuickQubeListItemActive
.igdd_QuickQubeListItemHover
Styling for anchor when hovered anywhere on ListItem
.igdd_QuickQubeListItemDisabled
For Disabled=True of a DropDownItem
a:active
a:hover
.igdd_QuickQubeListItemFocus
Applied to the whole pager
.igdd_QuickQubePager
Styles all page links in general
.igdd_QuickQubePageLink
Styles the current page link only
.igdd_QuickQubePageCurrent
pseudo class used so Value Display input does not have focus
glow in some browsers like GoogleChrome or AppleSafari
input:focus
Thanks but that didn't seem to help either. I found it in two places,
igdd_Windows7ControlFocus
igdd_Windows7ControlArea
In the ig_dropdown css delete the line
table-layout:fixed
Here is a very isolated scenario to replicate it:
Initial Load:
Click a link that does nothing but fire a postback:
On this particular page I am doing nothing in the postback at all. If there is no data in the editor control then it renders properly each time.
Hope that helps...