Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Apr 18 23:37
    arslion commented #2147
  • Apr 18 22:24
    codecov-commenter commented #4194
  • Apr 18 22:24
    codecov-commenter commented #4194
  • Apr 18 22:24
    codecov-commenter commented #4194
  • Apr 18 22:24
    codecov-commenter commented #4194
  • Apr 18 22:23
    codecov-commenter commented #4194
  • Apr 18 22:23
    codecov-commenter commented #4194
  • Apr 18 22:16
    welcome[bot] commented #4194
  • Apr 18 22:16
    ivankenou opened #4194
  • Apr 18 18:57
    tiangueu-cesar reopened #4189
  • Apr 18 18:55
    tiangueu-cesar closed #4189
  • Apr 18 18:52
    tiangueu-cesar edited #4189
  • Apr 18 18:51
    tiangueu-cesar edited #4189
  • Apr 18 18:51
    tiangueu-cesar edited #4189
  • Apr 18 18:49
    tiangueu-cesar edited #4189
  • Apr 18 18:49
    tiangueu-cesar edited #4189
  • Apr 18 18:49
    tiangueu-cesar edited #4189
  • Apr 18 18:45
    tiangueu-cesar edited #4189
  • Apr 18 18:45
    tiangueu-cesar edited #4189
  • Apr 18 18:43
    tiangueu-cesar edited #4189
Michito
@mic4ael
hey, I am looking for a way to specify a custom onMouseEnter on Rating.Icon but I can't find a way to do this
seems like it is not feasible?
I tried overriding Rating.Icon = function Icon(...props) but to no avail
Ryan Taylor
@ryanewtaylor
I'm attempting to create a function component that takes another component (an input) and adds a label to the upper left of the input that shows the number of characters currently typed into the input and the max number of allowed characters. I have a partially working example using Semantic UI React and hooks (link below). However, I would prefer that "FieldWithCounter" was able to determine the props directly from the Input, rather than me specifying them as props. Is there an more elegant solution to this? https://codesandbox.io/s/textbox-with-label-58fjz
Chris Berns
@cberns1_gitlab
Does anyone have a working solution for a first column locked scrolling table?
Harun Sheikhali
@hsheikhali
Got a quick question:
Why am I getting this error : UNSAFE_componentWillReceiveProps when I use the pagination component?
import React, { useState, useEffect } from 'react';
import { List, Pagination } from 'semantic-ui-react';

const mockItems = (count) => {
  return new Array(count).fill(0).map(() => Math.floor(Math.random() * 10000));
}

function PaginationExample(props) {
  const [page, setPage] = useState(1);
  const [itemList, setItemList] = useState([]);
  const itemsPerPage = 5

  useEffect(() => {
    setItemList(mockItems(100));
  }, []);

  const setPageNum = (evt, { activePage }) => {
    setPage(activePage);
  };

  const totalPages = itemList.length / itemsPerPage;
  const renderItems = itemList.slice((page - 1) * itemsPerPage, (page - 1) * itemsPerPage + itemsPerPage);

  return (
    <div className='list-container'>
      <List divided>
        {renderItems.map((item, idx) => (
          <List.Item key={idx}>{item}</List.Item>
        ))}
      </List>
      <Pagination
        activePage={page}
        totalPages={totalPages}
        siblingRange={1}
        onPageChange={setPageNum} />
    </div>
  );
}

export default PaginationExample;
Sumit Nihalani
@nihalanisumit
Vicenzo Naves
@vinchbr
Hello!
I am starting to study Semantic to evaluate if it will be flexible enough for my company.
Currently I am trying to enhance an data driven menu.
I've settled on the look and feel of Dropdown.Menu.
But I think I've hit a limitation of the display maybe...
I can't nest Dropdown menus.
I get 1 level and that's it.
Is it by design?
Screen Shot 2020-05-07 at 10.13.16 PM.png
Kublick
@Kublick
For some reason my dropdown text dissapear if I add Link so Im able to redirect see below:
<Dropdown item simple text=' Customers '>
<Dropdown.Menu>
<Dropdown.Item icon='plus' text='Add User' as={Link} to='/users/add/' />
David Constantine
@DavidConstantine88
@Kublick You can try as={<Link to="">Add User</Link>}
quanganhtran
@quanganhtran
I noticed that: disabled FormCheckbox, with a Popup as label, will show the popup when standalone, but will not, when wrapped inside Form.
probably intended behavior, no complaint there, but can someone explain why is it so? and is there a workaround?
Dima Lapeto
@dimalapeto
Hello! I see that Semantic-Org/Semantic-UI-React#3174 is closed and @layershifter has done Semantic-Org/Semantic-UI-React#3734 , but I've already had this problem. Is it really fixed?
Marek
@murbanowicz
Don't use semantic UI.
It's abandoned project, the owner did not pass ownership to anyone for some stupid reasons which led to current situation of great framework being totally not usable.
There is Fomantic UI which is a maintained fork
Dima Lapeto
@dimalapeto
@murbanowicz thanks! But how can I use Fomantic UI with React?
Marek
@murbanowicz
not sure if possible yet :/
I know, it sucks... such a great project abandoned
at this moment much safer to go with either MUI or Ant
Dima Lapeto
@dimalapeto
@murbanowicz Ok, finally we haven't all fixes from SUIR github repo in NPM module v.0.88.2? That's right? :((
Gary Berger
@gaberger
Hello all, are there any patterns for Search component such that if an element is not found in the results state one can choose the value input in the text input?
Balla Attila
@AttilaBalla
anyone alive here? :D
Oleksandr Fediashov
@layershifter
@murbanowicz SUIR 1.0.0 was released on the previous week
Guilherme Taschetto
@taschetto
Dropped Semantic-UI for material-ui a long time ago. No regrets. material-ui is a real project and will be for a long time.
Guilherme Taschetto
@taschetto
@vinchbr don't use SUI. go for another library.
Balla Attila
@AttilaBalla

@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.

Oleksandr Fediashov
@layershifter

Progress component has a min-width css property, making it incorrectly display very low or 0% progress.

It's intentional and may be confusing, but can be fixed with CSS if you don't like it :)

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.

@murbanowicz The situation with Semantic UI is not good at all, it's great that community maintains Fomantic UI. Small goal is to fix compatibility issues with Fomantic (Semantic-Org/Semantic-UI-React#4021), bigger - introduce more features that we added recently.
Marco 'Lubber' Wienkoop
@lubber-de
The progress 0% issue was fixed in Fomantic-UI by fomantic/Fomantic-UI#625
You may try to use the progress.css from there
Javier Castro
@jacargentina
hard to question this on this channel, but which libraries besides material-ui are good alternatives to semantic-ui-react ?
zerodarkthirty
@ZeroDarkThirty

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?

Oleksandr Fediashov
@layershifter
@ZeroDarkThirty In this case you need to click on a .dropdown to open it and then select .item via click
Christian Perry
@geochronology
I'm trying to figure out how to import semantic-ui themes into my semantic-ui-react configuration. I've followed the steps at https://react.semantic-ui.com/theming, and after running the bootstrap script, it installs semantic-ui successfully, but there's no theme folder as there would be in a semantic-ui installation. How do I gain access to the semantic-ui themes?
boranbasar
@boranbasar
hey, is it possible to use Semantic-UI-react with fomantic ui?
Christian Perry
@geochronology
@boranbasar Can you describe your use case?
sanju-developer
@sanju-developer
Hello, I'm using latest version of react-semantic ui.
Dropdown component with "clearable" props not showing me cross icon to clear.
Please help :(
MenachemICTBIT
@MenachemICTBIT

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!

MenachemICTBIT
@MenachemICTBIT
    <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>
        );
    };
quanganhtran
@quanganhtran
how do I customize border of celled Grid?
quanganhtran
@quanganhtran
^ to anyone else also wondering, I removed the box-shadow and add my own border styling using border
Dean Harmon
@phorden

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.

Anyone have an idea of what might be going on?
Thanks.
Diony
@dionkas
How can i load a dropdown (basic clearable dropdown and not multi-select) with a preselected item?
James Cote
@Coteh
Hi I'm trying to add a 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.
MD. Rizwan Raza
@rizwan92
how can update loading props in Button using ref