Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Feb 26 23:38
    havajsky opened #7046
  • Feb 20 09:04
    asarch opened #7045
  • Feb 20 07:43
    Dev-Addict opened #7044
  • Feb 17 22:10
    rayoray closed #7042
  • Feb 16 19:02
    weixinwu opened #7043
  • Feb 16 06:00
    rayoray opened #7042
  • Feb 10 02:33
    thirteenthree opened #7041
  • Jan 26 07:46
    and-ocean2017 opened #7040
  • Jan 19 05:38
    KellyLSB opened #7039
  • Dec 23 2020 08:32
    vinayakkulkarni closed #7010
  • Dec 20 2020 22:37
    hiredgunhouse opened #7038
  • Dec 09 2020 03:03
    22raor opened #7036
  • Dec 03 2020 20:39
    YongxinZz opened #7035
  • Dec 02 2020 21:25
    maty535 edited #7034
  • Dec 02 2020 21:25
    maty535 opened #7034
  • Nov 27 2020 06:57
    SylvanoTombo closed #7033
  • Nov 27 2020 06:27
    SylvanoTombo opened #7033
  • Nov 25 2020 14:54
    samuel-knutson edited #7032
  • Nov 25 2020 14:54
    samuel-knutson opened #7032
  • Nov 24 2020 20:26
    greenHermes edited #7031
Devesh Verma
 message: 'Cannot create property \'_index\' on string \'!important\' in file /Users/deveshverma/educators-dashboard/semantic/src/themes/default/collections/table.variables line no. 1',
  stack: undefined,
  type: 'Syntax',
  filename: '/Users/deveshverma/educators-dashboard/semantic/src/themes/default/collections/table.variables',
  index: NaN,
  line: 1,
  column: -1,
  callLine: NaN,
  callExtract: undefined,
   [ undefined,
     '             Table' ],
  lineNumber: 1,
  fileName: '/Users/deveshverma/educators-dashboard/semantic/src/themes/default/collections/table.variables',
  name: 'Error',
  plugin: 'gulp-less',
  showProperties: true,
  showStack: false,
  __safety: { toString: [Function: bound ] } }
this error shows up when I cd into semantic and gulp build
Svein Seldal
I'm trying to install semantic-ui in win10 by running "npm install semantic-ui --save". And after answering the question, the step "Creating src/theme.config (LESS config)" the installation is stuck forever. Looking at the running processes, node is just sitting there. I'm kinda stuck. What can I do?
I've got npm 6.9.0, node 10.16.2 and gulp 4.0.2, gulp-cli 2.2.0 installed globally.
Svein Seldal
Oh.. A known unfixed bug for win10 #6641 "Installation stuck on Creating src/theme.config" :( Darn. Bootstrap here I come.
Colin Frick
@sveinse you could try the community fork: https://github.com/fomantic/Fomantic-UI
Svein Seldal
@ColinFrick that worked, thanks. What is the relationship between Semantic-UI and Fomantic-UI, and how are they related in respect of releases and stability?
Colin Frick
Fomantic was created to continue active development of Semantic-UI and has the intent to be merged back into the master repository once active development can restart. For more info please read the following issues Semantic-Org/Semantic-UI#6109 Semantic-Org/Semantic-UI#6413
We don't have a fixed release cycle, but plan to release once per month.

@windwardpassage this is the correct format of CSS.

@media only screen and (max-width: @largestMobileScreen) {
html {
font-size: 22px !important;
body {
font-size: 22px !important;

Thank you, @elkees_gitlab and @lubber-de!

Hello again,
I am using the npm installation of semantic ui v 2.4.2. Everything works beautifully except for <select class="ui dropdown">. They render as expected on Chrome but on Firefox, they seem to be using Firefox's scrollbar and dropdown background. Any pointers would be appreciated! The selects on the Semantic UI website render fine even though I'm on Firefox. Thank you!

Modal module doesn't work inside the popover content (using the data-html tag).

<div id="cbinfo-modal-content" class="ui modal">
  <i class="close icon"></i>
  <div class="header">
    Profile Picture
  <div class="image content">
    <div class="ui medium image">
      <img src="https://semantic-ui.com/images/avatar2/large/rachel.png">
    <div class="description">
      <div class="ui header">We've auto-chosen a profile image for you.</div>
      <p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
      <p>Is it okay to use this photo?</p>
  <div class="actions">
    <div class="ui black deny button">
    <div class="ui positive right labeled icon button">
      Yep, that's me
      <i class="checkmark icon"></i>

                          <div class="cbinfo_popover" data-html="<div class='popover_content'>Lorem Ipsum is simply dummy text of the printing and typesetting industry..<a class='popover_message' id='cbinfo-modal' href='#/'>Modal Link <i class='sign out alternate icon'></i></a></div>"> <a class="cbquery" href="#/"> Popover Text</a></div>
<a id="cbinfo-modal" class="popover-text" href="#/"> Test me, I'm working without POPOVER data-html</a>


.cbinfo_popover {
  font-size: 18px;
  margin-left: 100px;
  margin-top: 30px;
.popover_content a {
    font-weight: bold;
    color: #000;
    font-size: 14px;
    float: right;
    margin: 10px 8px 0;
.popover-text {
  font-size: 18px;
  margin-left: 100px;


    hoverable: true

Can someone help me to fix it.?

Here is the JSFiddle link for the code: https://jsfiddle.net/PremGanga/t4gmofx0/23/

Marco 'Lubber' Wienkoop
@elkees_gitlab data-html is not available at that time, but you can initialize the modal click when the popup is shown. See https://jsfiddle.net/z9ca6w7j/
Florin Asăvoaie
Hey, I get the same error as @devshiva619 ...
Florin Asăvoaie

Hey everyone I was trying to use semantic


Marco 'Lubber' Wienkoop
@FlorinAsavoaie it's a bug in less 3.10 which is already addressed in the less repo. Use less 3.9 I. the meantime
Michael Bishop
Question: is it OK to use Semantic's icons for a Ren'Py game's UI?
Colin Frick
@017Bluefield do you mean the FontAwesome icons? You'd have to check their license https://fontawesome.com/
Andrew Milmoe
Greetings! I discovered the Sketch template... which has a few buttons and things, but none of the page layouts present on the site. Anyone know where I might find a page layouts in Sketch for Semantic-UI / Fomantic-UI?
I'm happy to share mine as I go... but hoping to not re-invent the wheel.
Michael Bishop
@ColinFrick Thanks anyway.
@amilmoe There is this FUI ui kit https://github.com/obsidiansystems/fomantic-sketch-ui-kit developed by @joehenry087 it is actively maintained and has more components then the other kits you may find
Hello everyone!
I need some help in designing my web pages..... I'm completely new to reactjs, and began using semantic UI
I have tables with same header cells and same body cells, only with 2 different sources(APIs) for data.
Currently, I've made 2 pages with same code and different URLs.
How do I re-use the code?
Andrew Milmoe

@hammy2899 Excellent! Thank you. This will take me a lot further. I got a bit spoiled using the Predix Sketch template:

Which is quite comprehensive, but largely abandoned. (Which is why I'm adopting Fomantic.)

When I install semantic-ui, I will get a lot of error messages. The version of my nodejs is 12.9.1, and the version of npm is 6.10.2. How can I solve it?
@dbinhua What kind of errors are you getting?

Hello all:

Sorry, I am quite new to this but I have some questions about Semantic UI and project structure.

  1. Is it correct that the Semantic folder should sit outside of the node_modules folder?
  2. When deploying for production, do we really only need dist/semantic.min.css?

Thank you!


All, I've got what could be either Newbie bad luck or a Bug.
I'm trying to add a top label to a row, but when I do so, the label is appearing in the next parent up instead.

imgur link of what i see: https://imgur.com/a/JnmUST5

gist of the code in question: https://gist.github.com/Daenks/854623f22edb1d5c2425836d7a559841

The issue can be created by uncommenting the only commented line.

Am i doing something wrong?

Is this even the right place to ask for help?

Hey folks, I want to replace the google fonts with some other URL. I googled it and found this out(https://github.com/Semantic-Org/Semantic-UI/issues/6435#issuecomment-398339397). But I don't want to download the links and reference it. I just want to change the URL from google fonts cdn to some other one. Is there any way to do this?


Marco 'Lubber' Wienkoop
@rammanoj either change the variable and build it yourself or overwrite the font in custom css
which variable is it stored?
I just searched a bit and found out that there is no alternate fetching for fonts.googleapis.com
Whatever the font I need I have to fetch the resources from that paticular url
what if I want to fetch the details from the other fontcdn?
Marco 'Lubber' Wienkoop
@googleFontRequest if you overwrite the whole URL you can use whatever you want. If you set @importGoogleFont to false it's not even implementing it all
Allan Oloo
Hey guys! I am working on a small B2C web app. I am experienced with the front end frameworks and server-side coding. But yet developing the application architecture and infrastructure is still darn hard. As developers do you still find it challenging to build web apps even with the necessary skill set? If so what are the biggest challenges you ran into when building your application? I just wanted to see if I am the only one who runs into these kinds of problems.
Sahil Pethe
Does anyone know how to remove the delay when the sidebar is set to 'hidden'? I am not talking about the default 500ms animation because that is just the animation which brings in the text of the sidebar. I am talking about the sidebar animation itself. I want to set it to 0 that's why I am asking.
Hi everyone! How to make radio-button like button?
Hi. I found some typo ( elements/Flag/Flag.js )

Hi all, I am struggling to work out a way to skip validation rules when submitting a form for 1 button, but not for another. e.g. If I have a submit, preview and save button, I do not want validation for the save button as this is just a "work in progress" save (which avoids work being lost). Is there a straightforward way of doing this?


Zacharias Zacharodimos
@whiteboxcode as save is a work in progress why don't you define it as type="button" instread of submit?