Stack Overflow
Stack Overflow

Questions tagged [semantic-ui-react]

Semantic-UI-React is the official React integration for Semantic UI

Semantic-UI-React is the official React integration for Semantic UI.

Current version: Semantic UI React (version v0.81.1 as of 2018-06-04)

  • jQuery Free
  • Declarative API
  • Augmentation
  • Shorthand Props
  • Sub Components
  • Auto Controlled State
874 questions
5
votes
3 answers

How to take inputs from in react semantic UI

I've been trying to take inputs from an input field and i used refs(the usual way in react), But it doesn't seem to be working. The input i'm getting is undefined. This is my code: sendMessage = () => { …
Madushika Perera
  • 402
  • 2
  • 5
  • 13
5
votes
1 answer

How to use semantic-ui-react with redux-form?

Right now I use ReduxForm's Field component and apply raw Semantic UI classes. But I then came across Semantic UI React, which makes things a lot easier -- you can just use React components that have the semantic ui style. How would you go about…
nbkhope
  • 7,360
  • 4
  • 40
  • 58
4
votes
2 answers

removeEventListener doesn't work on Modal close

I am building a React app which uses Semantic UI React. I have some thumbnails which open to the Modal component to show the full-sized image in the modal. I also have buttons for navigating through the next and previous. Along with the button…
aademirci
  • 96
  • 8
4
votes
2 answers

Error Cannot read property 'left' of undefined in React Semantic UI Popup with Styled Component

I have a styled component like such: import styled from 'styled-components'; const TagIcon = styled(Icon).attrs({ name: 'tag', })` cursor: pointer; font-size: 14px !important; ` If I use this in a semantic-ui-react layout, it works fine in…
reactive-core
  • 1,071
  • 1
  • 7
  • 15
4
votes
4 answers

Semantic UI React - Table - Make whole row selectable and link somewhere

I have tried making a row selectable but I want to be able to click anywhere inside the row and have it link somewhere. Each row should have a different link. This way below puts all my Table.Cells into one cell even if I specify multiple…
Strawberly
  • 53
  • 2
  • 6
4
votes
1 answer

In React Is there a way to change the background color of a parent Label tag on a Radio Input checked?

I am using React Semantic UI. In css I am trying to change the Background color of a Parent label of an input, so when the radio button is clicked it changes colors. I am hiding the radio button with display none. Since the label gives it a nice…
Bama
  • 577
  • 4
  • 21
4
votes
2 answers

How can I make semantic-ui-react Tab click use a react-router NavLink to update the URL?

I'm using semantic-ui's Tab component and I have different components in each tab's pane. When I click on a tab, I would like the URL to change to "/tabname" so that a specific tab can be bookmarked by users who only need the functionality in that…
voidmind
  • 137
  • 1
  • 6
4
votes
0 answers

Dropdown doesn't close when item triggers modal and use close button

I have created a Dropdown.Item that, when pressed triggers a modal. If I close the Modal by pressing the Close Icon of the modal, the modal disappears and the dropdown is still open behind it. If I close the modal by clicking outside the modal,…
David Moore
  • 41
  • 2
4
votes
1 answer

How to get the values from a Multiple Search Selection dropdown box in react-semantic-ui?

I apologize if this is a silly question but I can't figure out how to get the values from a Multiple Search Selection dropdown boxes using semantic-ui-React component. I already have it render the proper items within it and selecting and searching…
Je Stra
  • 117
  • 2
  • 9
4
votes
2 answers

Configuring next.config file

I am using Next.js and want to add the react-semantic-ui, to use one of their login components. On the front-end I am getting this error: Failed to compile ./node_modules/semantic-ui-css/semantic.min.css ModuleParseError: Module parse failed:…
Antonio Pavicevac-Ortiz
  • 7,239
  • 17
  • 68
  • 141
4
votes
1 answer

React, printer friendly printable area to print (Ctrl+P)

In my React Application (using semanticUI), I have several components rendered in a view, but when users want to print the page (e.g. by pressing Ctrl+P on the browser) I want only one part to be printable for instance, if this is a screenshot of…
Amir-Mousavi
  • 4,273
  • 12
  • 70
  • 123
4
votes
1 answer

How can you make a table scrollable in Semantic-UI-React? Using Next.js

I have a wide table, when I use the Grid component and giving it width of 16 on mobile I get a weird result I will provide a url of my work in process, please ignore the website details, it is not importatnt, the important thing is that every…
Contentop
  • 1,163
  • 3
  • 20
  • 43
4
votes
1 answer

How to change tab headers width (vertical tabs) for Semantic-UI React

I'm using Semantic-UI React. It works fine, but Tab headers are two wide. How to change it to the absolute value (100px for example)?
Valerii
  • 2,147
  • 2
  • 13
  • 27
4
votes
3 answers

How to overcome the overlapping of similar name CSS classes from two CSS frameworks?

I was using Modal of semanctic-ui-react inside a create-react-app project. Inside index.js I had declared the import for the CSS files of the frameworks import "semantic-ui-css/semantic.min.css" import "bootstrap/dist/css/bootstrap.css" I noticed…
The Coder
  • 3,447
  • 7
  • 46
  • 81
4
votes
2 answers

Why custom css class does not work on React-Semantic-UI elements?

I created card with react-semantic-ui, I want to add some extra styles via css class. One example is: I add custom 'card' class with box-shadow property, and that style is not applied. HTML PART: import './App.css'; {/* CLAIM…
James Delaney
  • 1,765
  • 1
  • 17
  • 36
1 2 3
…
58 59