Background:
I am doing some UI work where I allow the user to programatically add and resize controls on a canvas.
Problem:
When resizing a combo box through AS the dropdown stays at the same width as the first time it drops down. So user places combo box on the page, clicks the down arrow, sees the options, selects an option or clicks down arrow again to close, resizes the width of the drop down, clicks the down arrow. Now drop down is the same width as original.
Have tried simple things like setting the width of the dropdown specifically and invalidating display list but it still doesn't work.
Example:
Code Example pending
While trimming my code down to an example I solved my problem. A combobox has a dropdownWidth property. I was trying to set this myComboBox.dropdownWidth = newWidth, which doesn't work (not entirely sure why, didn't dig into the SDK). However if I change my code to myComboBox.dropdown.width = newWidth it actually goes to the dropdown element and re-sizes it directly which does work.
comboBox.dropdown.width did not work for me. I had to use
comboBox.dropdown.percentWidth = 100;
It seems to work without having to call invalidateSize()
In the ComboBox, overriding the set dataProvider and performing the following seemed to work, because the dataProvider field is bound to the collectionChange event.
ComboBox.calculatePreferredSizeFromData(count:int):Object
override public function set dataProvider(value:Object):void {
super.dataProvider = value;
var size:Object = calculatePreferredSizeFromData(dataProvider.length);
this.dropdownWidth = size.width;
this.dropdown.width = this.dropdownWidth;
this.invalidateSize();
}
Related
My GTK# (v2.12.44) app has a single Window with a single button on it. The button appears to be centered on the Window, because that's where the text appears, but the border/background for the button is shifted up and to the left for no reason I can see. Has anyone seen this before? I saw similar behavior from an Image widget. Note this only happens in Windows, not on (for example) Raspberry Pi/Jesse.
Here's the code:
Application.Init();
var window = new Window("test") {new Button("testing 1, 2, 3")};
window.Maximize();
window.ShowAll();
Application.Run();
Your code works well. Try to add a container before adding a button and set some parametrs you want to. Fill and Expand when adding Button.
I have problem with bootstrap drop up/down button.
Button Menu doesn't fit well on page.
I am looking for way to dynamically detect position on page of that button.
Base on location button should automatically drop up instead of drop down.
Here is problem:
on "SHOW" and "Action" button. Menu doesn't fit on page (It extends container).
https://jsfiddle.net/yz0ex8c5/
https://jsfiddle.net/3ro502q5/4/
The same happens when the button is on top. It opens Dropping up Instead of drop Down.
This is very important. Couse I use this buttons with drop down and drop up in table that can be sorted. I use Bootstrap-table library to sort rows in table.
You could check the scrollTop position for the page, then switch between .dropup or .dropdown according to what is most suitable.
$(window).scroll(function() {
var scrollTop = $("body").scrollTop();
if (scrollTop<50) {
$("#showBtnGroup").removeClass('dropdown').addClass('dropup');
} else {
$("#showBtnGroup").removeClass('dropup').addClass('dropdown');
}
});
forked fiddle -> https://jsfiddle.net/wenz3v5r/
Have given the btn-group an id for easy access. The evaluation value of 50 is completely arbitrary, have just added a lot of <br>'s to the bottom and the top of the page - that must depend on how your site looks like IRL. You should do the same (or rather the opposit) with the Action dropdown at the bottom.
I have a UIComponent that has a subclass of datagrid at the top and a button "removeValues" at the bottom.
When the removeValues button is clicked, I call resetDataProviderin the datagrid, which sets the dataprovider to about half the number of values that were previously in the data provider and resizes the datagrid to x number of rows when value is less than/equal to 6.
I've noticed a weird issue when I hover over the bottom of the component after it's been resized. One of the rows remaining in the grid is highlighted (as if I've hovered over it) when I hover over the bottom of the UIComponent (which looks like empty space).
I listen for a mouseOver event on the datagrid and sure enough, it thinks it's hovering over one of my item renderers for a datagrid row.
I've tried invalidateList(), validateNow(), invalidateDisplayList(), but nothing seems to update it properly. Has anyone got any ideas on what I could try?
public function resetDataProvider(value:XMLList):void
{
dataProvider = value;
if(value.length() <= DEFAULT_ROW_COUNT)
{
this.rowCount = value.length();
height = measureHeightOfItems(-1, rowCount+1) + viewMetrics.top + viewMetrics.bottom;
}
invalidateList();
validateNow()
}
Edit:
Just an update on this: the issue goes away when I scroll down the grid (more than 6 rows) and scroll back up. Is there a way to mimic the update it's doing programmatically?
I am having serious problems trying to resize columns in a DataGrid. I've been at it for over a day now and am at my wit's end with a headache to boot.
Essentially, I have a TabNavigator component with NavigatorContent children inside. In each one of the NavigatorContent children, I have a DataGrid to which I'm setting the width to 100% (this is needed to be able to handle resizing of the browser window). I am using the excellent filterable DataGrid from Iwo Banas as the DataGrid in each tab.
Now, I am making visible/invisible some columns in each of the DataGrids and this is working fine. However, I find that the column widths are not being set correctly. Whenever I set the column widths (using this code), all of the columns seem to be set to the correct width except for the ones that I have recently made visible and the column immediately to the left of these. The ones recently made visible are very small (though I set their width to 30) and the one to the left of these columns is very large (though I've also set its width to 30).
I think it's something to do with the life cycle of the DataGrids because the first DataGrid behaves fine. It's when I click on the other tabs that I find that the widths of the other DataGrids have not been set correctly.
However, if I "see" one of those problem DataGrids (i.e. it appears on the screen) and the code which resizes the columns runs again, the columns are correctly sized.
I have tried a number of things recommended all over the internet including the questions listed below but to no avail.
This is the code I'm using to resize the columns (taken from this answer)
public static function resizeColumn(col:DataGridColumn, size:int):void
{
var owner:* = col.mx_internal::owner
col.mx_internal::owner = null;
col.width = size;
col.mx_internal::owner = owner;
}
Any and all help would be greatly appreciated.
I have already looked at the following answers.
Flex DataGrid column width: one column to rule them all?
Flex 3 DataGrid Column Width Problem
Flex DataGrid Column Width (<-- this answer got me closest)
Unable to change the column width dynamically in flex datagrid
So, after a huge amount of head wrecking, I finally found a solution (at least to my problem, not sure if it would help anyone else but thought I'd post it here anyway as you never know what could help someone else).
I decided that since calling the resize code when the DataGrid is on screen works then I needed to just do that. So I thought of putting the resize code for the relevant DataGrid depending on the tab clicked. Not that straightforward as there didn't seem to be a straightforward way to implement a click handler for the tabs. I did a quick Google and found this solution.
Essentially, you add a click handler for each tab button by cycling through the children of the tab navigator, getting the button and adding an event listener.
Then, you do what you need to do in the handler.
Code example (slightly different to one from website):
protected function tbGridArea_creationCompleteHandler(event:FlexEvent):void
{
for ( var i:int=0; i < tbGridArea.getChildren().length; i++ )
{
var tab:Object = tbGridArea.getTabAt(i);
tab.addEventListener( FlexEvent.BUTTON_DOWN,myTabClickHandler );
}
}
private function myTabClickHandler(event:Event):void {
switch(event.currentTarget.label) {
// do whatever you need to do here
}
}
I was just wondering if anyone out there knows of a way to have a dropdown/select box set to a fixed width i.e. 125px, but when you open it, the dropdown portion will automatically expand to the largest item in the list, and when you select the item, have the dropdown resize back to the 125px size?
It does it in FF but no currently in IE.
Thanks in advance,
B
you can set the width with css using width: 125px.
Not sure if you can control the width of the popup part, but this will normally automatically resize, up to some arbitary limit.
To achieve the effect you are after, I think you'd need to use either some CSS 3 properties (which won't work in all browsers) or more likely some Javascript.
You could use the onFocus and onBlur events of the select box, and then update the style.width property accordingly. Let me know if you'd like some code samples!
Here's a quick jQuery solution that will resize the select box for you on mousedown - then change it back once something is selected or you click away.
var example = $('#some-id');
$(example).mousedown(function() {
$(this).css('width','400px');
});
$(example).blur(function({
$(this).css('width','200px');
});
$(example).change(function() {
$(this).css('width','200px');
});