Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Nov 16 14:40
    fireswallow opened #6898
  • Nov 14 08:36
    hammy2899 closed #6207
  • Nov 12 13:40
    viditkothari edited #6897
  • Nov 12 11:14
    viditkothari opened #6897
  • Nov 08 17:20
    morrowdavidson opened #6895
  • Nov 08 16:59
    truesteps edited #6894
  • Nov 08 16:58
    truesteps edited #6894
  • Nov 08 16:58
    truesteps opened #6894
  • Nov 04 21:13
    ItratJameel opened #6893
  • Oct 30 15:52
    TELLO0815 opened #6892
  • Oct 29 13:18
    LoanAubergeon edited #6890
  • Oct 29 13:16
    LoanAubergeon reopened #6890
  • Oct 29 13:15
    LoanAubergeon closed #6890
  • Oct 28 10:19
    LoanAubergeon opened #6890
  • Oct 28 07:55
    ceet2016 opened #6889
  • Oct 24 14:44
    Isabellle edited #6888
  • Oct 24 14:44
    Isabellle opened #6888
  • Oct 22 22:42
    taclejj opened #6886
  • Oct 17 14:54
    kohki-shikata opened #6885
  • Oct 17 06:19
    Dylane-JC closed #6884
Joe Henry
@joehenry087
@hammy2899 thanks for the response. So is semantic UI no longer being supported? Is this forum mostly a Fomantic forum now? My company uses semantic, so as their designer I am forced to design for what the devs are using, unfortunately.
If it's the case that Fomantic is not changing the design of the existing Semantic elements, just adding new, then my sketch file would be compatible with both, and I wouldn't mind hosting it on github so the fomantic people can add fomantic elements to it as well.
Do you know what the process for migrating from semantic to fomantic is? If it's super simple and won't break existing semantic stuff, then it's a possibility my team eventually just moves to fomantic if it's a lib that has more activity.
Sean
@hammy2899

@joehenry087 I'm guessing you aren't aware of the current situation so I will give you a brief summary. Semantic-UI's (SUI) last release was in Oct 2018 so nearly 1 year ago but before that releases were around every 4-5 months (they were meant to be monthly) and it was like this for about a year or so. The slowness of releases prompted a few users to open issues including these 2 popular ones Semantic-Org/Semantic-UI#6109 and Semantic-Org/Semantic-UI#6413 which the idea of a community fork was proposed early on as an active member of the SUI team with some knowledge of the frameworks code base I agreed to make the fork as we know today as Fomantic-UI (FUI). Since we started SUI we have 18 releases, 700+ more commits and 350 bug fixes and a few new components including a native calendar component.

Now to answer your questions, the migration from SUI to FUI is very simple its so simple you just need to change the name of the dependency in your package.json and then run npm install and you will then be using FUI instead of SUI. This simple migration is possible because the development of FUI is following the principles of SUI and we are keeping the library in a state so it could be merged back into SUI if development ever restarted which was our promise to the community when we first started. Since we are sticking to the same principles this also means all new components and changes also have the same look and feel of SUI components so yes if you designed a sketch file it would be compatible for both 🎉

As for "Is this forum mostly a Fomantic forum now?", no we have a community discord server https://discord.gg/YChxjJ3 but most of (if not all) the FUI core contributors lurk around in the SUI support channels to provide support for anyone in need.

Also you mentioned "I wouldn't mind hosting it on github so the fomantic people can add fomantic elements to it as well." that would be awesome, we try to keep as much as we can in open because this is a community project and we try to get as much of the community involved as we can. If you wanted you can host the repository on the fomantic GitHub org as I would be happy to create that for you.

I understand this is quite a lot of take in so feel try to ask any questions you may have and I am happy to answer them 🙂

Amit Novick
@amitnovick
@lubber-de Hi! thanks for the reply re: My question on setting theme variables dynamically for font-size set by user
Sorry for taking a bit long to respond back on it!
Thanks for the idea! I had enable Ctrl +/- in my Electron app and that makes it easier to resize the UI when it's too small/big for the user.
Amit Novick
@amitnovick
Question about Dropdown vs. Search components in Seamantic-UI-React:
It seems that Dropdown has a search type, but that looks to be meant for situations when the provided options are static (or change very little) and not determined on-the-fly with searchQuery changing.
In contrast, it seems that Search is more suited for this, since it can be controlled using results prop which could be provided to it when the searchQuery changes and triggers some asynchronous search on data that may not be present in its entirety on the client.
Sean
@hammy2899
@feelextra The dropdown search type is used to search dropdown items like a country dropdown it would allow the user to search for their country. The search component is used as a input which allows a user to search for results like a page on a website. The search component shows results in a list which can also be categorized whereas the dropdown will filter out the items which don't match the search query aka it won't show the items which don't match the query.
Joe Henry
@joehenry087
@hammy2899 alrighty, I'm glad someone is still supporting the project, even under another name. I'm going to bring this information to my team and see if they're interested in switching over to Formatic. I'll get back to you about the design file and repo - thank you for offering to host it on the Formatic github.
Amit Novick
@amitnovick
@hammy2899 Thanks for the reply! :-) appreciate it.
luisroel91
@luisroel91
@hammy2899 any plans to fork React semantic UI as well?
Sean
@hammy2899
@luisroel91 Currently we don't have any plans mainly because FUI works with Semantic-UI-React (SUIR) out of the box with the only issue being unable to use the new FUI components we have added but there is a few workarounds. I write an article on how to setup FUI with SUIR and there is also a section explaining these workarounds https://medium.com/@fomantic/setting-up-fomantic-ui-with-react-f701b68f736c We also have plans to develop our own React implementation when we release v3 which you can read more about here fomantic/Fomantic-UI#319
Akanksha Srivastava
@ApheleiaS
I am not able to make the search module work
Can someone help me out with that ?
Amit Novick
@amitnovick
Hey! is it possible to use FUI's Toast with SUIR? read @hammy2899 's article, but still not sure if there is workaround since SUIR doesn't offer the component out of the box.
Sean
@hammy2899
@feelextra Unfortunately you can't use new modules like the toast in SUIR. The problem is SUIR has rewritten all the JS modules in SUI so it doesn't require jQuery therefore it doesn't support any new components added until they are written into the SUIR library itself this is the major down fall to FUI and SUIR. If you want a toast library for react I would highly recommend react-toastify https://github.com/fkhadra/react-toastify it has a lot of customization and features and is designed for react.
Amit Novick
@amitnovick
Thank you so much @hammy2899 ! appreciate your help :-)
I looked at react-toastify but didn't really like how the API is imperative.
Ended up choosing a different UI approach than toasts in the end: using a Modal that will show different outcomes (sucess / error / interaction state).
luisroel91
@luisroel91
@hammy2899 , BOMB! Thanks for the info and thanks for still deving SUI
Joe Henry
@joehenry087
For anyone who may be interested, my company, Obsidian Systems has allowed me to release the Fomantic UI Kit for Sketch under the BSD3 license. Feel free to use it and contribute! https://github.com/obsidiansystems/fomantic-sketch-ui-kit
Mustafa Kuscu
@mcku

Hi, I am using all of Semantic UI's CSS, and some of its JS modules. Namely, there are modules such as semantic-ui-transition, semantic-ui-dropdown et al, which can be found on npm and github repository of semantic-ui, which I include separately into my build.

Is there any chance that such modules could be made available through fomantic ui as well so that users like me can upgrade?

Ultimate Software Idea Generator
@UltiSoftGen_twitter
Hi is there a discord to troubleshoot issues with semantic-ui ?
Marco 'Lubber' Wienkoop
@lubber-de
@UltiSoftGen_twitter The active community Fork https://fomantic-ui.com has a Discord here https://discord.gg/YChxjJ3
bryanSME
@bryanSME
I have an add covering up some of the docs on semantic-ui.com who should this be reported to?
image.png
Marco 'Lubber' Wienkoop
@lubber-de
@bryanSME This has already been adressed here Semantic-Org/Semantic-UI#6838
Shawan Pal
@shawanpal
Can I change my date-picker language, current language is English, I want to change my language Russian.
Can any one help me
Marco 'Lubber' Wienkoop
@lubber-de
Daz Owens
@Dazeh_twitter
Hi guys, Can someone shine light on this issue for me. I want to add a tab dynamically via jquery. When i add it, and run $('.menu .item').tab() again the new tab becomes unresponsive. Is there a way to init the new tab?
windwardpassage
@windwardpassage
Hello! I am trying to change the body font size on mobile devices. I have tried putting the following site>globals>site.overrides but it doesn't seem to be working. Any pointers would be appreciated!
@media only screen and (max-width: @largestMobileScreen) {
html {
        font-size: 22px; !important
        }
body  {
        font-size: 22px; !important
      }
}
Marco 'Lubber' Wienkoop
@lubber-de
@windwardpassage that's invalid css, the semicolons have to be set after!important, not before
Svein Seldal
@sveinse
Ultimate n00b here (using semantic-ui-react): How can I make a component that puts A B C on the same line, with A left-most, minimal width, C right-most, minimal width, B center, as large as possible. Should I use Grid for this? Because Grid uses fixed sized boxes, right?
Ghost
@ghost~5d5a7e33d73408ce4fc8bd51

@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;
}
}

Devesh Verma
@devshiva619
Hey everyone I was trying to use semantic
and its throwing me error in /semantic/src/themes/default/collections/table.variables
 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,
  extract: 
   [ 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
@sveinse
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
@sveinse
Oh.. A known unfixed bug for win10 #6641 "Installation stuck on Creating src/theme.config" :( Darn. Bootstrap here I come.
Colin Frick
@ColinFrick
@sveinse you could try the community fork: https://github.com/fomantic/Fomantic-UI
Svein Seldal
@sveinse
@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
@ColinFrick
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
@windwardpassage

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

windwardpassage
@windwardpassage
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!
Ghost
@ghost~5d5a7e33d73408ce4fc8bd51

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

<html>
<div id="cbinfo-modal-content" class="ui modal">
  <i class="close icon"></i>
  <div class="header">
    Profile Picture
  </div>
  <div class="image content">
    <div class="ui medium image">
      <img src="https://semantic-ui.com/images/avatar2/large/rachel.png">
    </div>
    <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>
  </div>
  <div class="actions">
    <div class="ui black deny button">
      Nope
    </div>
    <div class="ui positive right labeled icon button">
      Yep, that's me
      <i class="checkmark icon"></i>
    </div>
  </div>
</div>


                          <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>
<br>  
<br>  
<a id="cbinfo-modal" class="popover-text" href="#/"> Test me, I'm working without POPOVER data-html</a>

</html>

<style>
.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;
}
</style>

<script>
$(document).ready(function(){
$('#cbinfo-modal').click(function(){
$('#cbinfo-modal-content').modal('show');    
});
});

$('.cbinfo_popover')
  .popup({
    hoverable: true
  })
;
</script>

Can someone help me to fix it.?

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

Marco 'Lubber' Wienkoop
@lubber-de
@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
@FlorinAsavoaie
Hey, I get the same error as @devshiva619 ...
Florin Asăvoaie
@FlorinAsavoaie

Hey everyone I was trying to use semantic

kvadevack/site#46