@taschetto If you don't like the lib then how about moving on from here?! Your comments are useless.
I'm making a small hobby project with this right now, noted the following issues:
Progress component has a min-width css property, making it incorrectly display very low or 0% progress.
Tab component doesn't use keys when looping through it's tabs, React doesn't like this.
Somewhere in Tab or Button there is a call to findDOMNode, which is deprecated.
Tab component doesn't use keys when looping through it's tabs, React doesn't like this.
Do you have an example? Tab component needs API redesign as it's API is confusing, I am slowly working on it.
Somewhere in Tab or Button there is a call to findDOMNode, which is deprecated.
It's deprecated only for StrictMode now, but you're correct. We have a tracking issue for Semantic-Org/Semantic-UI-React#3819 and I am going to push there some updates soon.
You may try to use the progress.css from there
Hi I'm trying to test on change for React Semantic-UI dropdown with
await act(async () => {
const input = getByTestId("dropdown-test-id").firstChild; // the input field
await fireEvent.change(input!, { target: { value: 2}})
})and the component is <Form.Dropdown />. But this isn't working. Any idea what the fix is?
Hey folks! I want to add a button to a multi select Dropdown that will clear the selection. How is that possible? See photos and code here. https://stackoverflow.com/questions/65309428/how-to-clear-multiselect-dropdown-in-semantic-ui-react-using-a-button
I've checked all the docs (SUIR and SUI) and only found the built-in clearable feature but am not sure how to call that externally.
Thank you!
<Dropdown
search
multiple
selection
clearable
closeOnSelectionChange={false}
options={filterInitialSuggestions()}
className='selectDropdown'
header={dropdownButtons()}
/>
const dropdownButtons = () => {
return (
<div>
<Button positive size='mini'>
Save
</Button>
<Button grey size='mini' onClick={() => console.log('I want to reset the multi select dropdown')}>
Clear
</Button>
<Divider />
</div>
);
};
I am having issues getting my site.variables to update the site css. Even the example in theming is not working as I would expect it too.
I am using the semantic-ui-less library & have manually moved the _site folder & theme.config file to my project's source folder (I don't know how to do this with npx & bootstrap when I am using craco with yarn workspaces).
The basic default styles and components are working well, but for some reason the vars I am setting are not being reflected.
Sidebar component to my app, but its height seems to take up the entire page rather than just the height of the viewport. Additionally, it does not stick to the side of the page. I understand that adding Sticky component is erratic inside a Sidebar.Pushable (which my Sidebar is inside of), but how should I style my sidebar so that (1) its height does not take up the entire page, just the viewport height, and (2) sticks to the side of the page so that no matter where I am on the page, when I open the sidebar it will be positioned relative to that spot on the page.
Hello, everyone! I hope this finds you well. Please help if you can. I have a 3 row grid. When scaling/zooming in everything works as expected; however, when I add the inline style object and height attribute, the top row starts to intersect with the rows below. I am having trouble preventing this. I've tried adding a max height.
Here's a link to a very basic example: https://codesandbox.io/s/zoo-grid-forked-2x8q9
Hi. Not able to open https://react.semantic-ui.com/ in India. Says - Your requested URL has been blocked as per the directions received from Department of Telecommunications, Government of India. Please contact administrator for more information.
Anybody has any information. Is it a mistake? https://semantic-ui.com/ is working though.
Hi all, question about how to reconcile input from the keyboard and mouse. The behavior I would like:
- There is only one selection in the dropdown and it is highlighted.
- I can use the keyboard to move the selection up and down.
- If I bring my mouse over an item then the selection moves to that item.
- If I use the keyboard to move the selection up and down then 1) the mouse disappears 2) I move up / down.
Everything above is working except for If I bring my mouse over an item then the selection moves to that item. So, my question:
- How do I change the selection in the dropdown when the mouse hovers over it? Specifically without triggering a
onChange(), as this I'm not fully selecting it, just changing the focus.
https://stackoverflow.com/questions/69388297/react-semantic-ui-dropdown-remote-fetch/69388342