Stack Overflow
Stack Overflow

Questions tagged [semantic-ui]

Semantic UI is a development framework for creating responsive layouts using human-friendly HTML and Javascript.

Semantic UI is a component framework based around useful principles from natural language. SUI can be used to helps create beautiful, responsive layouts using human-friendly HTML. Semantic UI is powered by Less and jQuery. It has a flat design look. The goal of the framework is to empower designers and developers by creating a language for sharing UI.

Current version: Semantic UI v2.4.1

Key Features

  • 50+ UI elements
  • 3000 + CSS variables
  • 3 Levels of variable inheritance (similar to SublimeText)
  • Built with EM values for responsive design
  • Flexbox friendly

Structure of Components

  • Element
  • Collection
  • View
  • Module
  • Behavior

Browser Support

  • Last 2 Versions FF, Chrome, IE 10+, Safari Mac
  • IE 10+
  • Android 4

Browser prefixes are present for Internet Explorer 9, but the browser is not officially supported for all components.

2735 questions
15
votes
3 answers

Top navbar overlaps with main content

I'm converting my landing page from Bootstrap to Semantic-UI. The page has a position fixed top navbar. The main content is divided in two columns (3-cols and 9-cols). The left column is used to show a sidebar and the right column is used for…
stanleyxu2005
  • 8,081
  • 14
  • 59
  • 94
14
votes
2 answers

Integrate React-Semantic-UI and redux-form

I'm using redux-form (awesome libs) to handle my form & redux store in React app. Everything works well, important forms and nested json output. I'm trying to use React-Semantic-UI Component with redux-form. I searched inside the docs how about…
Gohmz
  • 1,256
  • 16
  • 31
14
votes
1 answer

Semantic UI footer at the end

I'm using Semantic-UI in my project. I created an index page, everything works ok with the elements (navbar, footer, etc). Now Im dev a signup page but footer does not goes to the end of the page, what can I do ? Footer code:
Jose Osorio
  • 911
  • 2
  • 12
  • 25
14
votes
4 answers

Semantic UI centered non-fluid menu?

I have two menus, one is fixed to the bottom and another fixed to the top. My problem is two-fold. I want them to appear at the center of the screen and only be the width of their content (instead of being fluid, as per default). I have found…
Nathan McCallum
  • 237
  • 1
  • 4
  • 18
14
votes
8 answers

How to submit a form in Semantic UI?

I know how to validate a form using Semantic UI, and can even read in console the message "Form has no validation errors, submitting." However, where is this submitting to? I want to actually submit the form, but the way Semantic UI is laid out I…
joncarl
  • 642
  • 1
  • 6
  • 18
13
votes
5 answers

How to set Semantic UI Dropdown size to match buttons, etc

Semantic UI has a great way to apply common sizing to a lot of things, e.g. a button (in Semantic UI React):
Dan
  • 1,249
  • 2
  • 16
  • 31
13
votes
1 answer

Remove caret from semantic-ui react dropdown menu

Does anyone know how to remove the caret on the ... component? The prop list for that component does not have a flag as far as i can tell. Does anyone have experience with this? import React from 'react' import { Dropdown, Menu }…
rimraf
  • 3,925
  • 3
  • 25
  • 55
13
votes
2 answers

Semantic UI, difference between table and grid?

I'd like to create a multiple rows + multiple columns view. I think I can either use table or grid. Which one should I use over another and why?
eugene
  • 39,839
  • 68
  • 255
  • 489
13
votes
3 answers

How to set the width of Semantic UI dropdown

How can I set the width of the Semantic UI Search Selection drop down? I need to set the width of Semantic UI Search selection dropdown to the longest element in the dropdown. Any help will be appreciated.
Angular-User
  • 151
  • 1
  • 3
  • 7
13
votes
3 answers

Hide element for mobile only - Semantic UI

I have problem with hiding image for mobile devices. I'm using Semantic UI framework. In documentation I found some classes: mobile only - will only display below 768px tablet only - will only display between 768px - 991px computer only - will…
WhatIsHTML
  • 548
  • 1
  • 7
  • 19
13
votes
3 answers

semantic ui how to offset

How can you offset columns in Semantic ui like you can in Bootstrap? eg- in bootstrap a column with class "col-sm-5 col-sm-offset-2" is 5 column wide and skipping the first 2 column of the page.
Sarthak
  • 168
  • 1
  • 8
13
votes
4 answers

Semantic UI centre aligned login box?

I am using the Semantic UI framework for my website. I want to place the login box in the centre of the page.I want only the login box in the page. I don't understand how to centre aligned using Semantic UI 'grid classes'. Please help me how to fit…
reegan29
  • 920
  • 1
  • 12
  • 30
12
votes
8 answers

Create-React-App with TypeScript failing to compile after importing Semantic UI

I've created a new React app by running npx create-react-app@latest --typescript . and I've run the project using npm start and it all works as expected. I ran npm install semantic-ui-react semantic-ui-css and that installs correctly. But when I add…
eamon0989
  • 144
  • 1
  • 2
  • 7
12
votes
6 answers

How to disable form autocomplete in semantic-ui-react?

How can I disable autocompleting form with credentials in semantic-ui-react? Tried this but it does not work import { Form } from 'semantic-ui-react';
....
igo
  • 6,359
  • 6
  • 42
  • 51
12
votes
3 answers

Fix width of one column in a row in Semantic ui

How can I have two column in a row in Semantic UI that one of column have a fix width and doesn't change with resizing of browser? I tried this, but something went wrong:
…
kaomid
  • 123
  • 1
  • 1
  • 5
1 2
3
…
99 100