Adjusting dropdown in ExtJS combobox - javascript

I need such combobox, that's it dropdown's width ant that one of input are different and dropdown is adjusted to the right edge of the input.
First part is easy - juts set matchFieldWidth to false and assign listConfig.width = something. But what is the easiest way to perform the adjustment? Here is a picture which illustrates the question.

I'll be the first, but will not gain a reputation - all we should do - is just set pickerAlign to tr-br.

Related

How do you toggle all dimensions in a Flot chart at once?

From the Flotcharts example: https://www.flotcharts.org/flot/examples/series-toggle/index.html
I'd like to toggle on/off all flot series at once (i.e. Select All / Select None).
Toggling the checkboxes themselves is easy enough:
$('input:checkbox').addAttr('checked'); // Select All
$('input:checkbox').removeAttr('checked'); // Select None
But how can I also trigger the dimensions to change?
Here's a jsfiddle of the flotcharts example:
https://jsfiddle.net/uzc5rqow/
I understand that "dimensions" refers to the axes. In your code, it is simple, you just need to call plotAccordingToChoices. I have forked your fiddle to show how to add all ticks with a button ( https://jsfiddle.net/Lk4oqvm5/ ). In the opposite case, when you uncheck every box, you need to decide which behavior you want. With no data, the graph cannot calculate the dimensions (if you manually uncheck every box, you will see that the last line does not disappear).

React-select: weird look inside of react-table filter cell, is it problem with CSS?

I'm using React-table to represent my data and I wanted to filter every column using react-select with multiselect option. The problem is that select that I use look very weird when it is in filter table cell:
What I want to do/have:
search field is needed (sometimes there is a lot of options to select)
input with selected options should be fit to column width but heigh can change so if user select many items if they don't fit they should be moved to the next line
I've prepared fiddle - in the first column is the same situation as in my project. Maybe someone can help me with this issue? Thanks
https://codesandbox.io/s/react-table-custom-filtering-multiple-values-filter-tjtl3
I debugged the actual website of react-select
Link: https://react-select.com/home
This behavior is normal for the input box sizing, only issue is you are getting border for the input.
To Quickly solve that i will recommend you use css selector and target the search input for border
.ReactTable .Select-input input {
border: none;
}
Tried in your code and working as expected

React Native: How to keep multi-line textinput visible above keyboard

I have a TextInput with multiline set to true.
I am scrolling to the input on focus with:
scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
React.findNodeHandle(this.refs.myInput),
0,
true
);
However when the multiline TextInput expands the text will be hidden beneath the keyboard.
I only want to scroll down when the cursor/current text is not visible. So I can't just run the code above on text change as it would scroll the view even if the current cursor/current text is visible (like editing on the first line).
Is there any way to get the cursor/current text position on screen?
Or is there any other way to do what I'm trying to?
Currently:
What I'm trying to achieve:
You may use the onLayout method, provided by the View (which Text extends). It returns the dimensions of the view, which you may use to recalculate the scroll position of your scrollview.
The best way to do it seems to be with the react-native-keyboard-aware-scroll-view library and use the method _scrollToInput and follow what the docs say.
The one thing I had to change was to call "this.scroll.props.scrollToFocusedInput(reactNode)" instead of "this.scroll.scrollToFocusedInput(reactNode)" in the docs!
I found this component... but it's not working for me (I get errors on "import"). I assume that they will get fixed eventually.
https://github.com/VansonLeung/react-native-keyboard-aware-view

Expand Items to max text length in Selectric Dropdown Menu

I am trying to create a menu using jQuery and Selectric frameworks and I have run in to a problem that I need some help with. With this menu, I want to have the min width of the dropdown be the max-width of the largest text item in the drop down select.
As it is now, I can have max and min widths preset, but I would like to have min width be the max width of the longest item. Thanks for the help in advanced
Here's the code I am using: http://lcdsantos.github.io/jQuery-Selectric/
Although it's a little bit late, you may want to try the inheritOriginalWidth property:
$('select').selectric({
inheritOriginalWidth: true
});
This will automatically make your selectric dropdown the same width as your original <select> element, and it won't change responsively when you select a new option.
Obviously if you have padding, margins, dropdown arrow button etc. on your custom selectric box, you'll need to CSS styling accordingly to make sure everything is visible, as inheritOriginalWidth won't account for these things.

jqGrid - how to reset grid column widths?

If users manually resize jqGrid columns, how can you reset the column width back to whatever the original values were?
I don't believe that there are any built in methods for reseting the widths, leaving the option of recording them at creation and restoring them at a later point. Unfortunately, this functionality is the same as it was 10 months ago with column width being one of the few options that cannot be changed once the grid has been created. I even tried the newest version of the grid just to be sure (3.8.2) and it does not allow you to change the column sizes.
$('#jqGrid').getColProp(colName).width; //Properly retrieves value of column width
$('#jqGrid').setColProp(colName, {width: newWidth}); //Does nothing visually
$('#jqGrid').getColProp(colName).width; //Returns newWidth, although it doesn't show it on page
I don't know if it would be worth it, but you could try Oleg's solution here of destroying the current grid and creating a new one in its place. The practicality of this solution I suppose would be dependent upon how you are getting the data and how long it would take to re-bind the data to a new grid.

Categories