Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 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
  • Nov 24 2020 20:25
    greenHermes edited #7031
  • Nov 24 2020 20:25
    greenHermes opened #7031
  • Nov 18 2020 07:34
    vita-it edited #7030
  • Nov 17 2020 15:08
    vita-it opened #7030
  • Nov 06 2020 09:09
    edhenderson closed #5958
  • Nov 05 2020 17:29
    pavelcrutov opened #7029
  • Oct 23 2020 21:16
    DasFork reopened #7028
  • Oct 23 2020 21:16
    DasFork closed #7028
ansab m
@ansabm2018_gitlab
how to set required in multiple select dropdown?
Artur Kyryliuk
@elcreator
Hello, I see the latest release was 2 years ago. Is this project alive?
jayboyd
@jayboyd
hey im a newbie with maybe a dumb question about using semantic
is this good place to ask?

well im confused about how to add actual behavior to semantic UI elements. for instance, if i have a modal dialog. the "copy-pastable" examples have nests of DIVs with classes added to control their display, and also, apparently, are falling back on jQuery to implement even the behavior of a modal dialog. but there's no obvious way to listen for events on a dialog to see if user hit OK, Cancel, whatever else. and none of the semantic examples use IDs on elements.

am i missing something or is the assumed use case for developers to add IDs to whatever buttons, use addEventListener(), and explicitly add all logic to hide the dialog when user hits OK or Cancel?

this same question applies to all UI elements, just using the modal dialog as an example. any help is appreciated

Marco 'Lubber' Wienkoop
@lubber-de
@elcreator the project is actively maintained at the community fork https://fomantic-ui.com https://github.com/fomantic/Fomantic-UI
Marco 'Lubber' Wienkoop
@lubber-de
@jayboyd the modal buttons can be fetched using modals available callbacks .you dont need to assign an id and add event listeners yourself . See https://fomantic-ui.com/modules/modal.html#approve--deny-callbacks
Marco 'Lubber' Wienkoop
@lubber-de
@ansabm2018_gitlab Specify the empty form validation rule. See https://fomantic-ui.com/behaviors/form.html#empty
achamsanjeeva
@achamsanjeeva
Dropdown(), in case of multiple options, it is not returning the values in the same order they were selected. any idea how to handle it .
Raj
@krisrajzlive

Can anyone shed more light on why I am getting column is not defined error?!

<Table.Header>
<Table.Row>
<Table.HeaderCell sorted={column === 'ProposalNumber' ? direction : null} onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'ProposalNumber'}) }
>
Opportunity
</Table.HeaderCell>

                                    <Table.HeaderCell
                                        sorted={column === 'TotalRevenue' ? direction : null}
                                        onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'TotalRevenue' })}
                                    >
                                        Revenue
                                    </Table.HeaderCell>

                                    <Table.HeaderCell
                                        sorted={column === 'TotalCost' ? direction : null}
                                        onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'TotalCost' })}
                                    >
                                        Cost
                                    </Table.HeaderCell>

                                    <Table.HeaderCell
                                        sorted={column === 'TotalHours' ? direction : null}
                                        onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'TotalHours' })}
                                    >
                                        Direct Labor Hours
                                    </Table.HeaderCell>

                                    <Table.HeaderCell
                                        sorted={column === 'EngagementProbabilityDesc' ? direction : null}
                                        onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'EngagementProbabilityDesc' })}
                                    >
                                        Engagement Probability
                                    </Table.HeaderCell>

                                    <Table.HeaderCell
                                        sorted={column === 'StatusName' ? direction : null}
                                        onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'StatusName' })}
                                    >
                                        Stage
                                    </Table.HeaderCell>
                                </Table.Row>
                            </Table.Header>

<Table.Body>
{ projectData.proposals && projectData.proposals.map(({
ProposalNumber,
TotalRevenue,
TotalCost,
TotalHours,
EngagementProbabilityDesc,
StatusName
}) => (
<Table.Row>
<Table.Cell>{ProposalNumber}</Table.Cell>
<Table.Cell>{TotalRevenue}</Table.Cell>
<Table.Cell>{TotalCost}</Table.Cell>
<Table.Cell>{TotalHours}</Table.Cell>
<Table.Cell>{EngagementProbabilityDesc}</Table.Cell>
<Table.Cell>{StatusName}</Table.Cell>
</Table.Row>
))}
</Table.Body>

Felix Mosheev
@felixmosh
Hi, what is the story of semantic-ui? why is it neglected? who is the current maintainer?
greenHermes
@greenHermes
Hello im trying to share a small mistake I noticed with the code exmaple for a dropdown menu
Screen Shot 2020-11-24 at 12.16.51 PM.png
The first input tag doesnt have a closing tag. Either a '/' at the end of that current tag or a '</input>'
Jeremy Giraudet
@3JTek
Hi Guys, I am looking for a Semantic UI /UX designer for a freelancing job $20 / hour. Anyone knows that guys?
1 reply
greenHermes
@greenHermes
@3JTek Not for such low pay
stephenflan
@stephenflan
image.png
anyone no why this is not running correctly and some of the script is red
Marco 'Lubber' Wienkoop
@lubber-de
The > is wrongly positioned. It should read <script>$('.ui.accordion').accordion();</script> instead of <script $('.ui.accordion').accordion();></script>
Спробуйте уявити предмет
@Lorfzlorf_twitter

Hi there! Sorry for the stupid question, I can find any information, is it possible to find a Semantic UI in Figma (not Sketch) file? My team using Semantic, and I as a designer want to support the consistency and component reusable.

I just found a 113kB .sketch file with few element, but it's not even a demo or preview, it's nothing.

Arif Cavadov
@CavadovArif_twitter
Hello, semantic should have a meal icon.
Marco 'Lubber' Wienkoop
@lubber-de
image.png
There are food icons when using the community fork Fomantic-UI which upgraded the included FontAwesome to 5.13 See https://fomantic-ui.com/elements/icon.html#/icon
stephenflan
@stephenflan
@lubber-de Thanks :)
Dragoș Străinu
@strdr4605
Hi, I have a doc page that has multiple sections and each section has steps.
I added permalinks using #section1, but was wondering if there is a easy way to navigate to specific step of the section!
Any idea on this use case? Thanks!!
Txopi
@Txopi
Adding #section1 seems an easy and simple solution to me :-)
Adam Collingburn
@adamcollingburn
Happy new year everyone - Does anyone else have any issue with modal callbacks not working
onShow works fine
But the rest (onHide, onHidden, onDeny, onApprove) don't do anything for me
Adam Collingburn
@adamcollingburn
Digging into it more - it looks like it's the elements that don't trigger the callbacks
page dimmer and deny/close icons both close the modal but don't trigger the any callbacks.... but pressing 'esc' does 🤦‍♂️
Marco 'Lubber' Wienkoop
@lubber-de
When using the community fork https://fomantic-ui.com i cannot reproduce your described behavior. All callbacks are working fine being triggered every time. See https://jsfiddle.net/lubber/3q1cmaon/3/
smartm0use
@smartm0use
hello, I would like to add a loader on segments container that contains some segments container as children. I see that adding "loading" class works for div with "segment" class. But this doesn't work for parent div, I mean the div with "segments" class. Any why to obtain the same loading effect on parent segments container?
Marco 'Lubber' Wienkoop
@lubber-de
You can add a dedicated loader div into the segments and toggle the active class
See the example using Fomantic-UI https://jsfiddle.net/lubber/gzup4s7c/3/
Mohanarangam
@rangam1004_twitter
Hi, I am creating java script library. How can I build semantic only for specific div id?
seamusrioux3
@seamusrioux3
Is it possible to set a max length on multiple additions for dropdown fields? https://react.semantic-ui.com/modules/dropdown/#usage-allow-additions
Paul McClelland
@pmcclelland
I am having trouble with a complicated form validation scenario. I have inputs for min and max for a range and I want to make it so you can't have a min bigger than a max or max smaller than a min. The problem is the value passed into the rule can change after the rule is set. What is the best way to handle this sort of thing?
Marco 'Lubber' Wienkoop
@lubber-de
Try $('.ui.form').form('refresh')
TPHo
@tpho216
Do you know why my semantic-ui-theming buttons.variable doesn't work when I override the background-color
smartm0use
@smartm0use
hello, I'm using Fomantic-UI Search module
I see that when user selects a result, onSelect is triggered
is it right?
if it does, how to trigger it programmatically?
I have tried to use $('.ui.search').search('set', 'test'); but it doesn't work
ElEmFurt
@ElEmFurt
I am stuck for more than a day with a weird problem, I have a dropdown with select and option tags, in which there are unique text items, but the values can be duplicated. And so the dropdown() event, automatically selects the last option with the value, is there some way to select the value by text?
for e.g I have option abc with value 1 and another option def with value also as 1
I need to be able to select it by text, as the selected attribute is correctly set on my select/option tag
ElEmFurt
@ElEmFurt

Here's my HTML

<div class="ui fluid dropdown ListQuestion selection" tabindex="0"><select id="Responses_35_ListTypeQuestion">
<option value="">Select an option</option>
<option value="1" data-text="Low - Please refer guidance document">Low - Please refer guidance document</option>
<option value="2" data-text="Medium - Please refer guidance document">Medium - Please refer guidance document</option>
<option value="3" data-text="High - Please refer guidance document" selected="">High - Please refer guidance document</option>
<option value="3" data-text="Unknown - Please refer guidance document">Unknown - Please refer guidance document</option>

</select><i class="dropdown icon"></i><div class="text">Unknown - Please refer guidance document</div><div class="menu hidden transition" tabindex="-1"><div class="item" data-value="" data-text="Select an option">Select an option</div><div class="item" data-value="1" data-text="Low - Please refer guidance document">Low - Please refer guidance document</div><div class="item" data-value="2" data-text="Medium - Please refer guidance document">Medium - Please refer guidance document</div><div class="item" data-value="3" data-text="High - Please refer guidance document">High - Please refer guidance document</div><div class="item active selected" data-value="3" data-text="Unknown - Please refer guidance document">Unknown - Please refer guidance document</div></div></div>

ElEmFurt
@ElEmFurt
can anyone help please?
ElEmFurt
@ElEmFurt
Nevermind, I got it working finally. I had the selected text in a hidden field outside the dropdown, so manually, set the text into the div.text and manually set the div.menu item as active selected for the UI to see it while rendering.