I have a weird problem whereby a <select> control stops showing its drop down list in IE11 using AngularJS after changing the value (twice).
Chrome (42) and FF (37) do not exhibit the issue.
Plunker: http://plnkr.co/edit/Ea0nMnPxXdqm8O59NyZS?p=preview
Fiddle: http://jsfiddle.net/xydvqo0q/
Steps:
Click the select to open its drop down list.
Select either of the two listed options. (It closes and a couple of other fields in the page update their values.)
Click to open again.
Select the other option. (It closes and the fields update again.)
Click to open the drop down list again. Will no longer open
Neither mouse click, nor Alt-downarrow will show the drop down once it gets into this state.
(Further, other selects on the same page also stop showing their drop down lists, and there appears to be a general control/windowing issue for the page - e.g. you can't select HTML text, and other controls won't show the focus or caret. Seems like IE loses the plot about which is the active "window" and it seems to be stuck inside the select. Pressing Tab a few times gets it out of this stuck state.)
Now, an IE control/windowing bug isn't unusual. But this is weird because of the specific set of requirements to reproduce. I've stripped back the example to what seems to be the minimum required to reproduce (yet you might think there's heaps of stuff in the page that should be irrelevant - afraid not).
The page needs the following for the issue to show:
The nested table (which lists "hello"s) must be there (and it must be nested - if it's not inside another table then the problem goes away). (I made it list hellos to eliminate it listing scope data to eliminate that as a cause.)
The table row which contains {{selecteditem.number}} must be there, and must be AFTER the nested table (moving it before removes the issue). I moved it to a separate table and the problem remains.
The selecteditem.number data must be different for the two items. If the "number" values are the same for the two items, it will not show the issue.
The number of "sub items" for each of the two items must be the SAME (meaning the nested table ends up with the same number of rows). If you add another sub-item to one of the items, the problem is fixed. If you add a sub-item to both (so they both have two) then the problem returns.
(Are you thinking I'm crazy yet? I thought I was. But wait there's more...)
The nested table must have the CSS property border-collapse: collapse. Without this property, or with a different value for this property, the issue doesn't occur. Note: the table can inherit this property from the parent table, or from a table CSS rule, or from a class (as the demo shows) and the issue still occurs. Removing it "live" using IE's F12 dev console and the issue gets fixed.
The TDs of the nested table - i.e. the "hellos" - must have a CSS border. They can inherit this, or obtain it from the class (as per the demo).
Basically, I have to tell the client they can have a collapsed-bordered table to show sub-items in the table of fields (there are usually many more than in the demo) or have a drop down list, but not both. (Or don't use IE, which isn't an option, or change the order of you form, which then would make no sense to the users.)
I tried not using ng-options (and instead ng-repeat-ing an option) but I get the same result (I'm limited to 2 links so here's the plnkr ID: 95XcM9j2eY70jUK10UrH).
I may dump the select entirely.
Related
I have an ag-grid (free reactjs version) with lots of columns and records to load.
Some columns are not necessary, so the user can drag the columns out of the grid (and hence hide them). This is fine but how can the user show the hidden columns again without refreshing the page?
I don't want to suppress column drag, just a way to undo the hide without refreshing.
Any advice?
Shameless plug: The enterprise version has this feature in two places, Tool Panel and Column Menu.
However, thankfully it is rather easy to implement this feature yourself using a single columnApi call, well... one of these:
resetColumnState()
This will reset the state of the columns to what you initially defined them as. It will basically make everything visible again
setColumnVisible(colKey, visible)
Just pass in the colId of the column (usually what you passed in as 'field'... but it could be different depending on your set up) and a truthy or falsey value and this will show/hide the column
setColumnsVisible(<Array> colKeys, visible)
note the s - other than that it is the same as before, but you provide an array of colKeys that you want to all be hidden or shown. If you wanted to provide an array of all your columns with another array of whether they should be shown or not then use the last option here setColumnState
setColumnState(<Array> columnState)
This is probably overkill for what you are trying to do, but this will allow you to set the state of all the columns, whether they are visible or not, pinned to different sides, fixing the widths, etc.
Basically I can see you doing one of two things:
Create a button that will make all the columns visible and call gridOptions.columnApi.resetColumnState() when it is clicked
-- OR --
Create a list of check boxes that will listen for a change and call one of the other functions. This list could be outside of your grid, or even inside of your grid in a Custom Filter Component (find the athlete column of the first example to see what I mean.)
I have created a form with a View as recordsource, this view combines 1 table and another view (with 2 tables in it).
When the checkbox is clicked a validation happens in the Access code that checks if the records checkbox may be updated, if this is not the case then the checkbox value should change back to 0/false.
First I tried to do this simply in the click event of the checkbox and then setting the checkbox value = false when it does not validate. This however gives a write conflict. Next I tried it with a Me.Dirty = false in front of it, this also doesn't help (still getting the write conflict). The checkbox.undo gives the same result.
Then I thought to do it in the before update and use a simple cancel=true, this however causes the focus not to change (it keeps the focus on the same record and never moves from it).
The Timestamp is usually what I use to ignore write conflict messages, I included the timestamp of the main table but this doesn't work (probably because the view is multiple-table based).
Some additional info:
The view is created in the SQL server and is linked to Access
The primary keys of the view (so it is editable) are set by executing a CREATE UNIQUE INDEX statement
Any ideas how I can get this to work?
Fixed it by using a button to set the checkbox bound field to checked/unchecked and making the checkbox itself invisible. This seems to work (better).
I've made a form in the GUI builder that has 5 auto complete text fields. All are made in exactly the same way with their completion arrays set before the form is shown, also in exactly the same way. The first two fields work as expected. The second two fields only show their completion options after some of the picker components are used on the form (they are in the same container), and the last one never shows completion options (or is showing them off screen?).
This looks related to Codename One - AutoComplete popup window location which in turn refers to two open bugs both of which are scheduled for this release cycle:
https://github.com/codenameone/CodenameOne/issues/1687
https://github.com/codenameone/CodenameOne/issues/1697
I have a very large grid with many columns. When the user clicks on the button, it calls a function which analyzes the whole store - cell by cell, if it finds no changes in a particular column, it hides it, othewise the column stays visible. Very often quite a large number of columns get hidden, but as I can see, this operation - column hiding with all this rendering - is very "heavy", so that my browser may alert, that the code runs for too long.
I do hiding like this:
var cols=grid.headerCt.getGridColumns();
Ext.each(cols, function (item, index, all){
if(condition) item.setVisible(false);
});
I tried to use Ext.suspendLayouts() and Ext.resumeLayouts(), but it leads to a bug. Even though operation now runs faster, instead of column hiding only columns' titles get hidden. So, I need a more optimal and working solution.
suspendLayouts() and subsequent resumeLayouts() is one of the ways to go. You only need to call grid.getView().refresh() after you resume the layouts.
Another option would be to call reconfigure, however, this removes the "hidden" columns from the columns menu.
Another question for you Filemaker Pro experts. The database I am developing starts with a Main layout with a number of buttons (e.g. insert new item, show all items, etc.). Each button is associated to a script, which takes the user to the relevant layout. In each of these layouts I show the buttons in a row, and highlight the current layout with inverse colour.
My problem is that some of the buttons lead to the same layout, viewed in different modes, and I don't know how to conditionally highlight the right button.
For instance, Insert new item and Show all items take to the same layout, however in the first case the script views the layout as a form and inserts a new record, while in the second I view as a list and show all records. The layout is the same, though, so I'd need to enact a conditional formatting based on something. How do I do that, and what should I check against?
Thanks in advance for any help.
Regards.
Presumably you are currently using the formula: Get (LayoutName) to decide on your conditional formula, why not try additionally using formulas: Get(WindowMode) and Get(LayoutViewState)?
You could conditionally format the button if (which sends user to MyLayout in browse mode):
Get(WindowMode)=0 and Get(LayoutName)="MyLayout"
Or (which sends user to MyLayout in form view):
Get(LayoutViewState)=0 and Get(LayoutName)="MyLayout"
.
Other functions which may help could be Get(FoundCount) and Get(TotalRecordCount). You can see the entire list of Get functions here.