Basic styling is not being applied. Tried multiple ways to apply styles. Added primeng-min.css, omega etc, did not help.
<p-table></p-table>
Data loads in tabular format without styling.
Related
I am trying to create a Basic Layout with React using Material UI Grid component.
I am following official documentation but the spacing prop seems very confusing and there is very less information available or its unclear in documentation.
When i am trying to nest Grid to create the layout, the negative margins added by the spacing prop confusingly pulling the items and breaking the UI.
Below is the very simple Layout in trying to do
I finally managed to do it with some very complex nestings and custom styles using sx prop as shown below in the codesandbox.
https://codesandbox.io/s/materialgriddilemma-vheq19?file=/src/Layout.js
But I am wondering, for a simple use case as this do I really need to write custom styles?!!
What is the cleanest and recommended way to use Nested Grids in Material UI with Spacing ?
I am using Material-UIs Data-Grid in my project(#mui/x-data-grid),
and I have wondered if it is possible to change the default text of some of the data grid`s elements.
for example:
I am using the data grid with RTL support, which makes the "Rows per page" look awkward, and I want to change it to my native language, is it possible?
thanks in advance.
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
When putting multiple charts tooltips from charts are hidden behind others.
Also, I am using custom tooltips for this picture, the default tooltip also shows in the same way.
First, looks like you're using Canvas, maybe using the SVG version of your chart can help.
If it does not, you'll find more parameters for theming in this issue : https://github.com/plouc/nivo/issues/308
Then you will be able to set precisely zIndex
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: