Questions tagged [semantic-ui]
Semantic UI is a development framework for creating responsive layouts using human-friendly HTML and Javascript.
2,703
questions
0
votes
0
answers
19
views
Show/Hide a div based to its data-value from dropdown selection
I'm requiring your help today. I put a country dropdown from Semantic UI and I'm looking for a HTML/JS code to hide/show div based on the data-value.
For example :
You choose country "Albania&...
1
vote
0
answers
28
views
JSX element type 'Header' does not have any construct or call signatures.ts(2604). Can someone help me fix this?
I'm using the Header comp from Semantic-ui like this, and I'm having this error for some components, not only Header. All of the components are imported but some of them are not working.
import ...
0
votes
2
answers
40
views
The Semantic HTML way for a buttons list?
Let's say I have a list of buttons that filter content by category
<nav>
<p>Please select your category:</p>
<ul>
<li>
<button>Cats</button>
...
0
votes
1
answer
43
views
how to insert multiple checkbox values into database?
So, I have a form in that i have two check boxes and both can be checked but when i check both the data is not going into database only the first value is inserting.
I tried using getParameterValues, ...
0
votes
1
answer
50
views
How to use setup menu(values) behavior of Semantic ui to populate a dropdown with values from database
So I have a form created by using JSP and Servlet in that form i have a dropdown which i am trying to populate with the values which are in my database by using semantic UI behavior [enter link ...
3
votes
1
answer
830
views
I can't install " npm install semantic-ui-react semantic-ui-css", what should I do?
C:\reactcamp\camp-project> npm install semantic-ui-react semantic-ui-css
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: camp-project@0....
0
votes
0
answers
29
views
how to style menu.item on semantic ui React <input> search bar precisely
The code is the menu style of semantic ui available for React including a search input i want to increase the size of the search input and also change the color.
<Menu secondary>
<...
1
vote
1
answer
28
views
Default multiple labels with semantic UI react drop down
I am using the semantic react dropdown and I am trying to get it so the options are already in the drop down as multiple labels but I cant seem to add them as default values then I want to be able to ...
0
votes
1
answer
51
views
How to retrieve the dropdown value in edit form with jquery?
So,i have a form with a country dropdown in it so when i am adding the counrty it is inserting into database
but when i click on edit i am fetching the values of all other fields except the dropdown ...
0
votes
1
answer
48
views
How to fetch the dropdown value in edit form using jquery?
I have a form with dropdown in it and when I am adding the data it is going to database. When I click on edit I can fetch the values of all other fields but the drop down is not showing the value ...
0
votes
0
answers
17
views
Semantic UI React getting input value by input name
Is there a way to get a semantic ui react input's value by name in React? For example, I have the following code:
ids.map((id) => <>
<Input name={id}></Input>
</>
)
<...
0
votes
0
answers
22
views
React semantic ui card group warning - Encountered two children with the same key
I put a map index in key elemental to have their own unique key.
Items looks have their unique key.
When I put address.id as key, same warning returns...
This is my code.
import React from 'react'
...
0
votes
1
answer
40
views
Disabled dropdown option didn't work in semantic UI
This is my Cshtml
<div class="field">
@Html.LabelFor(modelItem => modelItem.plateNumber)
@Html.DropDownListFor(m => m.plateNumber, new SelectList(ViewBag.PlateNoList, &...
0
votes
1
answer
30
views
React dropdown not being populated with values from Supabase response
I am attempting to show a dropdown with a list of books in React using Semantic UI. The list of books is fetched from a Supabase table. The response seems to be coming through correctly however the ...
1
vote
1
answer
18
views
Dynamic Table updates "too late" ReactJS
my problem is, that I have a table which should update everytime when the user chooses something from a dropdown component. The problem now is that my table updates "too late" in the ...
0
votes
1
answer
77
views
Put two icons inside of an input field
How do I put two icons inside an input element? Both icons should be clickable. I have installed both react-semantic-UI and uikit if it would be useful. Thank you.
0
votes
1
answer
27
views
Semantic UI multiple select dropdown - close event
I am trying to get the values selected in a multiple select dropdown - just once, because I am populating a cascading dropdown depending on the selected values in the original dropdown, and don't want ...
0
votes
1
answer
370
views
Error with npm install semantic-ui-react semantic-ui-css using React
Error shown with the semantic UI installation using npm install
how to solve this?
0
votes
0
answers
29
views
can't get semantic UI javascript to function
I'm creating a React app, and I want to use Semantic UI as my theming tool, the CSS is showing, and the fonts, however, the javascript is not, what could cause this problem?
note: I copied the Jquery ...
0
votes
1
answer
51
views
React Semantic UI Dropdown open on bottom
<Dropdown
text={employeeOptions.find((e) => e.key === selectedEmployee)?.text as string || t('roomDetails.selectEmployee')}
value={selectedEmployee}
selectOnBlur={false}
...
0
votes
1
answer
30
views
Semantic UI dropdown values cannot be accessed
This is an issue related to Semantic UI's dropdowns at https://semantic-ui.com/modules/dropdown.html.
I have a bunch of multiselect dropdowns defined and have declared the line
$('.ui.dropdown')
....
2
votes
1
answer
53
views
Semantic-UI-react: How to make background un-tabbable behind modal
I have a working modal using semantic-ui-react, but I'm realizing that even with props closeOnDimmerClick and closeOnEscape set to false, that my content is tabbable in the background.
How can I ...
0
votes
0
answers
31
views
How to add tooltip to dropdown items of multiple selection in Semantic UI
I have a multiselect dropdown in Semantic-UI and I want to show tooltip for each dropdown item on hover as below. For example, if the user hovers the item with name "MA (Protein_90...)", the ...
1
vote
0
answers
46
views
Application.js is not working as expected in rails 5.2.6 and ruby-2.6.6 with semantic-ui
I am new to ruby on rails. Currently I am using the above specified version of rails and ruby. While following an old ruby on rails course for building a project. I am facing issues with the semantic-...
0
votes
0
answers
19
views
Semantic UI React Dimmer not showing on a label component
I am trying to add a dimmer to a label with some content on the dimmer. The behavior should be when the mouse enters the label, the dimmer shows on the label with some content on it. I am not very ...
1
vote
2
answers
67
views
Meteor + Semantic React
LAST EDIT :
never use npm raw command in meteor. always meteor npm. That is the reason why everything broke.
AND do upgrade step by step , version to the nearest version.
I think that's all that ...
0
votes
0
answers
75
views
Custom theme for semantic-ui in nextJs results in Cannot set property 'styles' of undefined
I have been following this tutorial to try use a custom theme for semantic-ui in NextJS.
However when I start my dev server (npm run dev) i get the following:
TypeError: Cannot set property 'styles' ...
1
vote
0
answers
138
views
Installing semantic-ui-css/semantic.min.css is not working in react app
I am trying to use semantic-ui-react in my react-app, but the moment I import the following statement it takes a lot of time to compile and then ultimately throws an error.
I did the following steps:
...
0
votes
0
answers
15
views
how can i delete unattached text in dropdown textbox
I wrote the 9.5.1.8 ip address Then I want the 9.5.1.8 ip address to be deleted when I press the spaces or the button. How can I do that
var ipList = [];
ipDropdown.dropdown({
...
0
votes
0
answers
28
views
Semantic UI Popup in DataTables position way off
I am trying to add some custom filter controls for a DataTables table using Semantic UI Popup.
The table is being built server-side by an ASP.NET application, and I was asked to add sorting and ...
-1
votes
1
answer
393
views
Semantic ui React css file not compiling/working with webpack 5
I am making a basic CRA app and wanted to use semantic-ui i followed the steps to the same but as soon as I import the CSS file in the index.js the app starts compiling and finishes it with two errors ...
3
votes
0
answers
27
views
how to autoselect by ip format in semantic ui and how to prevent autoslect of added ones in dropdown
Setting the forceSelection property to false fixes this problem
but then when I manually add it myself as 5.5.5.5 it is not selected
When I enter 5.5.5.5 and click anywhere I want it to be added.
how ...
0
votes
0
answers
68
views
Semantic UI multiselect searchable dropdown not working with comma-separated texts
I'm running into a very weird issue with a Semantic UI multi-select searchable dropdown.
Basically, I'm able to add and delete items from the dropdown without any problem. However, while adding items ...
0
votes
0
answers
29
views
When more than one semantic ui modal is opened, the first opened modal does not close
When more than one semantic ui modal is opened, the first opened modal does not close
my first mod will open
#shareModal Code
<div class="ui modal test" id="share-modal">
<i class="...
0
votes
0
answers
208
views
Cannot find module '@semantic-ui-react/craco-less' when install semantic ui theming
I'm building a semantic-ui project with theming. Here is their tutorial https://react.semantic-ui.com/theming
The problem I met is, I followed all the way of its operation, and I finally got
Error: ...
0
votes
0
answers
53
views
Semantic UI Dropdown with required attribute is not being marked
I have a form in Semantic UI (no react) with a select / dropdown that is required.
But when users trying to send the form without having selecting something from the dropdown, the form is not showing ...
0
votes
1
answer
42
views
Formatting React Semantic UI List 'Field Name' and 'Value'
How do I format the React Semantic UI list element (https://react.semantic-ui.com/elements/list/) similar to style used by default React Semantic UI form (https://react.semantic-ui.com/collections/...
0
votes
0
answers
49
views
Issue with installing django2-semantic-ui=1.2.2 using pip
I am trying to locally run an existing django application and install django2-semantic-ui==1.2.2 using the command: pip install django-semantic-ui=1.2.2. Here is the error I am getting:
Using cached ...
0
votes
0
answers
26
views
Semantic UI dropdown in iframe only working when console open in Chrome
Something very weird is happening. I have made a landing page where other pages are integrated in a lightbox using an iframe.
In that iframe a Semantic UI dropdown is being used.
The dropdown is ...
1
vote
1
answer
391
views
React Hook Form Multiple Dropdown Validation
Currently I am using semantic ui css multiple dropdown validation. How do I validate the dropdown so that user has to choose at least ONE option before submitting ?
Right now the current output is ...
0
votes
0
answers
47
views
react semantic ui icons do not vertically center
The icons of semantic UI are deviating from the vertical center.
You can see this in the below image. The two on the left 2 are icons. The three on the right are images. Images do center. But the ...
0
votes
0
answers
35
views
How can I generate Semantic UI dynamic popup
First I create my dynamic table and add the data-content to the table. Then I add my popup code but it is not working. How can I solve this problem?
var attachmentList = $("#newTable");
var ...
0
votes
1
answer
43
views
How can i make dynamic 2 column list
I am using semantic ui framework. I add or remove from this list with jquery.
how can i make it with 2 columns.
first Column=1 2 3 4 5
Second Column= 6 7 8 9
or
first Column=1 2
Second Column= 3
can i ...
0
votes
0
answers
71
views
Semantic UI react dropdown: Can you dynamically set the value?
I'm using a dropdown from semantic-ui-react. The semantic-ui dropdown is in my Artists component and that component is being used its parent component, App.
Right now the dropdown is working fine, if ...
2
votes
1
answer
39
views
Setting Values for State in React
Good Afternoon,
I am having an issue setting an object via useState and I really do not understand why. Below is the input that I am using to display the information from the database based on the ?: ...
0
votes
0
answers
17
views
is it possible to only install *some* icons from a front end framework like bootstrap or fomantic ui?
I have this in my package.json: "fomantic-ui": "^2.8.8"
It installs the required css/js in another folder called webpacker. When I run rails webpacker:compile it doesn't take too ...
0
votes
0
answers
61
views
semantic-ui-react theming error "Cannot read properties of undefined"
I have freshly created a react project with CRA with typescript template
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": &...
10
votes
7
answers
8k
views
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-...
0
votes
0
answers
33
views
React Semantic UI bug on simple Grid example?
I have recreated an example of React Semantic UI:
import _ from 'lodash'
import React from 'react'
import { Grid } from 'semantic-ui-react'
const columns = _.times(3, (i) => (
<Grid.Column ...
0
votes
0
answers
65
views
Semantic UI Multiple Search Selection not wokring
I currently create a web app using Flask and Semantic UI. I want to use the Multiple Search Selection from Semantic UI as it can be seen here: https://semantic-ui.com/modules/dropdown.html#/definition....