I upgraded from ng-grid to ui-grid. The grid works fine including sorting, filtering and moving. I even have the correct font files and have them mapped properly. However I have no icons what so ever. I am not even getting "funky chars" because of the missing font file.
To show the order of the sort, nothing in the pagination buttons, nothing in the header row and nothing to show there is a dropdown menu. Does any one know if "ui" vs "ng" they removed anything like that?
How do I get the pagination to show something for the user to see and how do i show icons for the sort direction in the headers?
The current UI-Grid CSS file definitely has that ui-grid-icon-up-dir class; here's the relevant snippet:
/* '썘' */
.ui-grid-icon-up-dir:before {
content: '\c359';
}
Since the ui-grid-icon-up-dir class is not defined in the CSS file you examined, that file must be outdated (perhaps a cache- or path-related issue?) To test that theory, you could try temporarily changing your CSS link to the current UI-Grid CSS to see if those icons appear:
<link href="http://ui-grid.info/release/ui-grid-unstable.css" rel="stylesheet">
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've built out a react data grid. I've added the sortable optional feature and on my system is working with the sort icon(s) rendering to the right of the header text, which is how I'd prefer it.
Others in my group have pulled my code when they run it the sort icon is rendered to the left of the header text (I'm assuming somehow inserting the pull-left style to the icon span).
I can find no information that outlines how exactly this can be controlled, or why it would work differently from one system another.
Hopefully someone is still using this component that can shed some light on this.
You should be able to target the icon and override with CSS. If you inspect the element in Dev tools, it will tell you the classname of the icon. Use CSS to move its position.
I am using this multi select of antd Antd multiselect
It is working perfectly fine bt i want to make it like that Multiselect Design
Each selected item have specific color.Is this possible with antd multiselect?Antd provides some props like labelInValue but i am confused how to use they have not provided enough detail.
You can modify the color of the selected items by using css or less variables link to antd instructions for less variables.
To use css, open the node_modules folder, find antd, open the es folder, open the antd component you're using, open the style folder, and then open the index.js file. There you can find the css elements you can modify. Create a css file, change the color attributes on the css elements, and then connect the css file to your javascript/html multiselect.
I have created new project in Extjs 4.2. I would like to provide an option in the UI to dynamically change the theme. I have a created a combo box with theme names like "Classic" and "Gray". Whenever i select a particular theme. The app should convert into that theme.
Please Help.
Thanks Much
Simply get the handler in your combo box to load the css for whatever theme you select. The new selectors in the loaded css will override the previous ones and will update the theme.
There is also a function Ext.util.CSS.swapStyleSheet that will perform this for you.
Though Ext.util.CSS.swapStyleSheet will work, It has few drawbacks:
1. It takes more time to render the page with new CSS theme.
2. While switching between themes, your page will be out of any css for a while. That will make the page look bad (broken and plain).
3. Unnecessary scrollbars will appear on the screen.
I overcame these by using Javascript ways..
Here,
Include all the CSS files in your HTML file.
<link rel="stylesheet" id="theme1" type="text/css" href="../Theme1.css" />
<link rel="stylesheet" id="theme2" type="text/css" href="../Theme2.css" />
Disable all the themes except one you want as default.
document.getElementById('theme1').disabled = true;
document.getElementById('theme2').disabled = false;
Now the page will be loaded with 'theme2'.
If you want to switch the theme. Do the vice versa of the above..
document.getElementById('theme1').disabled = false;
document.getElementById('theme2').disabled = true;
In this way, the switching will be real fast. Since we have loaded all the css file initially. It will not ask the server for new theme everytime.
It worked for me very well.
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.