I have a multiselect component in Ext js 3. I have a number of entries in it. Now i want to select an entry and scroll multiselect to make it visible to the user. I am able to select an entry but i cannot scroll multiselect.
I have used dataview component and i do this same function using following:
dataviewObj.container.dom.scrollTop = (42 * index);
but cannot implement this is multiselect.
Can someone please tell me how to achieve this with multiselect????
Thank you a lot for help.
There is no need to edit the Ext extension code itself.
Ext MultiSelect will do scrolling out of the box. You just need to make sure you have added the CSS that it needs:
.ux-mselect{
overflow:auto;
background:white;
position:relative; /* for calculating scroll offsets */
zoom:1;
overflow:auto;
}
The full set of CSS rules to include in your document is here:
http://dev.sencha.com/deploy/dev/examples/ux/css/MultiSelect.css
Ok, after a lot of hacking I think I've found the solution to this.
Open the Multiselect.js file in an editor.
Goto the onRender method of the Ext.ux.form.MultiSelect class (object).
Find the FieldSet creation block of code (var fs ...)
Add autoScroll:true to the fieldset config options.
I had a multiselect with ~200 items in it and this worked like a charm.
This is a change made to the extension code itself, so if you can't afford to do this you'll have to find a work around -- possibly through multiple extending and polymorphism.
Related
I created a draggable drag and drop table with draggable rows.
For the need of my project, i added multiple drop targets with multiple Droppable elements like in this example:
https://codesandbox.io/s/ql08j35j3q
It work pretty fine, but there is one problem, the scroll speed.
When i'm trying to drop an item in an element at the bottom of the page, it gets very slow.
This GIF will show the problem.
Do you have any clue for a solution ?
This may be a result of react-beautiful-dnd autoscroll, interfering with a css property called scroll-behavior. I just spent a day de-bugging this myself.
If you are using bootstrap, by default, bootstrap sets {scroll-behavior: smooth} to the entire html tag. To apply react-beautiful-dnd's fast auto-scroll, this css property should be {scroll-behavior: unset !important}
If you are not using bootstrap, or another library, check your css stylesheets, and see if {scroll-behavior: smooth} is set anywhere in any parent containers to your Droppables, and unset them.
A good way to debug this is by also opening Inspect Element in your browser, and looking at the styles applied to the html, body, or parent containers to your Droppables.
It appears that when scroll-behavior is defined in css or javascript( if you use window.scrollBy()), it may interfere with react-beautiful-dnd's fast auto-scroll feature, and make it slow.
Let me know if this works for you :) !
Here is my example in a gif - All the containers in the column are droppables
I don't know how to remove tooltip from a pagination element. I'm using antd's table. This table contains a pagination. It's a part of the table. I'm trying to customize it using styled-components library. I've tried to find all classes which is containing tooltip in their titles and set them:
display: none !important;
But there was no result. There should be some class that is used for this purpose which I have no idea.
I will be grateful if someone knows the solution for this issue.
The tooltip comes from the title attribute of <li/> elements.
Such behavior is by design, therefore you can't remove it.
Alternative solutions which aren't recommended:
Implement Pagination by yourself, style it using the antd-css classes and integrate it with your custom Table.
Dynamically remove all title attributes by querying the dom.
Add showTitle=false in pagination, just put this...
pagination={{...pagination, <b>showTitle: false</b>}}
OR
pagination={<b>showTitle: false</b>}
It will disable tooltip in pagination.
My code Image:
And site API image:
When I use lightning inline editable data table component, the status bar would cover the edit panel.
I think it might is a SLDS bug.
I ran into this problem as well. I agree that I think it is a CSS issue on the SLDS side.
I'm using a lightning:datatable with inline editing, and I noticed that the footer bar div with the Cancel/Save buttons is using the 'slds-docked-form-footer' class, which sets the z-index at 8000.
Crawling up from the datepicker I noticed that the "table cell" contains a section element that has inline styling setting the z-index to 7002. That section element also has a class of "slds-popover_edit", so my workaround solution was to put this into my lightning component's css file:
.THIS section.slds-popover_edit {
z-index: 9999 !important;
}
Hope this helps, or that you've found a better solution by now. I'm going to test my page to make sure this change didn't have any unintended consequences.
I'm trying to set opacity for extjs (4.2.1) panel (whose id is myPanel) as Ext.get('myPanel').el.setOpacity(0.65). It works fine in firefox and chrome but not in IE 8. The ultimate goal is to make the panel transparent so that the user can see through it. Could any one please help me with this...
Ext will simply apply the CSS property "opacity" or alpha transparency to an HTML element. In IE8 this is almost in no case supported.
You could however use a plugin or hack to make IE 8 compatible with it.
Check http://css3pie.com/ or http://modernizr.com/ for example.
Also check http://www.electrictoolbox.com/opacity-internet-explorer-css3-pie-alpha-transparency/ for an example of your issue, and how it is solved using PIE
When you dont want to use 3rd party plugins, you can also try this:
Add the following rules to the CSS of your property
/* IE8 */-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */ filter: alpha(opacity=50);
You can also do this with Ext.js using Ext.get('myPanel').el.setStyle()
e.g.
Ext.get('myPanel').el.setStyle('-ms-filter','progid:DXImageTransform.Microsoft.Alpha(Opacity=50)');
Finally..after breaking my head for as while..I came up with 2 solutions...
1) Apply x-panel-ghost (which is an extjs in build css applied during the drag process) for baseCls or componentCls gave the transparency. But all the other default css for a extjs panel are lost and so we have to manually write them up..
2) The best solution would be to set an image which is made transparent (through photoshop or something) as a background image for the panel header and body and apply it to the cls config of the panel as below:
In panel:
cls: 'transparency',
In css file:
.transparency .x-panel-header{
background: transparent url('../image.png') no-repeat center !important;
}
And in the same way, for the body as well..
Hope this helps someone...
A combo's drop-down list gets the size of the Combo, and display of items with longer text just gets cropped.
I tried fiddling with Ext's CSS for combos with no luck.
Does anyone know how it can be done ?
Using ExtJS 3.2.0.
EDIT:
Alternative solutions to improve usability will also be appreciated, e.g. getting the list to expand with the content.
I don't know how you can add a scroll bar, but I know that you can change the list width with the well-named property :
listWidth : Number
The width (used as
a parameter to Ext.Element.setWidth)
of the dropdown list (defaults to the
width of the ComboBox field). See also
minListWidth
For an horizontal scroll, it would need lots of changes, because the list container width is forced, so "overflow" attributes in css are useless.
Edit : Another method
You can add this custom css, for me it seems to work well, as wrapping long lines.
.x-combo-list-item {
white-space:normal;
}
Of course, if you add this it will apply to all combos' lists.
You can set listClass : 'x-combo-list-wrap' on your Ext.form.ComboBox, and then apply the css only to these items :
x-combo-list-wrap .x-combo-list-item {
white-space:normal !important;
}
(I'm not sure the !important is useful here, not tested)