When I add a wide table of component 'CreateTable' inside the React SyncFusion RichTextEditor (using v20.3.50), bigger than the screen, and click the items within the overflow, the popup menu of the Table (for columns and rows interactions), goes to the right, watching the css of the div, the left value is bigger of what I've scrolled. The first solution was to fix the popup to the middle with a left: 50% !important css property but what I would like is that the menu stays in the clicked cell.
<RichTextEditorComponent
style={style}
value={value}
iframeSettings={{ enable: true }}
id="imageRTE"
ref={setRteObj}
toolbarSettings={toolbarSettings}
created={onCreate}
quickToolbarSettings={quickToolbarSettings}
enableResize={true}
>
<Inject services={[Toolbar, Image, Link, HtmlEditor, Table, Resize, QuickToolbar]} />
</RichTextEditorComponent>
We have included the fix for the issue "Table quick toolbar got misplaced outside the Rich Text Editor when enabling IFrame" with our patch release version 20.4.43. So please upgrade your package to the latest to resolve the issue from your end.
Release Notes: https://ej2.syncfusion.com/documentation/release-notes/20.4.43/?type=all#richtexteditor
Related
I want to achieve this in Onsen UI:
Notice taller toolbar than standard, white overlay burger menu icon (for the standard element) and no bottom border between the image and the first item.
I think the burger icon is easy (assuming it stays in the right place with a taller toolbar).
The background image I tried manually setting the CSS property background-image in the browser DOM (using Chrome devtools) on the element and adding the transparent modifier, so <ons-toolbar modifier="transparent"> - unfortunately this got overridden so background image didn't show at all. I also tried doing the same thing on the within the toolbar and that didn't go full width and not sure the burger icon would have been on top anyway
Not sure how to override the toolbar CSS to make a tall/fat toolbar that shows the full height of the image and has no border - I've looked at the CSS for the toolbar in the browser DOM in Chrome Devtools but can't see how to modify it correctly
Ideally need this to be able to cope with different device widths or portrait/landscape orientation.
Any suggestions much appreciated. Thanks.
I'm using ReactiveSearch 3.30.0.
Here's how I use the ReactiveList component in my Next.js project.
<ReactiveList
....
infiniteScroll={true}
showLoader={true}
pagination={false}
loader={<MyCustomLoader/>}
....
/>
The problem is during the loading that occurs,
When I click on a filter item
or
When Scroll more to the bottom
the MyCustomLoader is always at the bottom.
Expected outcome for the MyCustomLoader is,
When I click on a filter item => MyCustomLoader at top
and
When Scroll more to the bottom => MyCustomLoader at bottom
The reason is, since my results list is long and scrollable, the loader is not shown when I click a filter item. It is actually rendered on the DOM, because I could see it when zoomed out the browser window (but is outside visible area to the user).
Related GitHub issue https://github.com/appbaseio/reactivesearch/issues/749
Any workaround is highly appreciated. Thanks.
I'm making a sidebar for my project and I'm using div transitions to give a smooth effect on collapse. However I have Material-ui (v4.12.3) TextField inside, and during the transition of opening the div, the height of the text field changes to 496px. Adding maxHeight style doesn't prevent a limit and once you interact with the field, it returns to normal (16px). Has anyone had this interactions with transition and mui text fields before?
I have a React App where the user can toggle between different views of the same data structure. When toggling from one view to another, the browser window sometimes automatically scrolls vertically. Instead I am expecting the window to not scroll when possible.
The CodeSandbox here reproduces the issue:
https://codesandbox.io/embed/magical-chebyshev-otlpu?fontsize=14&hidenavigation=1&theme=dark
If you scroll down, then click on "CLICK TO SWITCH VIEW BELOW", you will notice that there's an automatic scroll to the top happening.
I suspect this is an issue with MUI TextField. If I change the MUI TextField to a div, the issue does not show up, so I don't think this is due to React.
I'm working on fixing some responsive design issues with a sidebar component in React, and one problem with it is that the label text on the tabs gets wicked scrunched up on smaller screens. I want to hide this text but I can't seem to find a good way to do it.
I've tried replacing the label text with a div that is hidden via bootstrap on small/x-small screens, but that doesn't work
<Tab
icon={<Icon className="material-icons geometry">category</Icon>}
label={<div className=".hidden-xs .hidden-sm">GEOMETRY</div>}
value='a' />
Ideally this text should go away on smaller screens but it just acts as though I hadn't put anything there at all. In fact, any bootstrap classes I try to add to that div seem to have no effect. How might I go about fixing this?
If you are using Material UI, you can use Hidden tag to hide label based on mobile viewport. When you use tag 'Hidden' with prop xsDown, the label will be hidden at or below xs breakpoint.
<Tab
icon={<CategoryIcon ></CategoryIcon>}
label={<Hidden xsDown>GEOMETRY</Hidden>}>
</Tab>
https://codesandbox.io/s/wispy-bird-vftel?fontsize=14