Questions tagged [semantic-ui]

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

Filter by
Sorted by
Tagged with
0 votes
2 answers
29 views

Semantic UI dropdown from ajax call back is not getting initialized after ajax success

I am using Semantic UI dropdown and DataTables in a Laravel controller function. I am sending an ajax request to a route and receive JSON data (containing a table row) with one of the keys (columns) ...
geekasso's user avatar
  • 406
0 votes
0 answers
25 views

Changing the pointing arrow of the error prompt in Semantic UI

I am trying to change the pointing arrow of the error prompt in Semantic UI. The defualt is above and I want it below. In React you can use pointing below but is doesn't work if not using React. That'...
Bran's user avatar
  • 221
-2 votes
0 answers
39 views

Why click event button don't work when the Dropdown React Semantic UI is opened?

The click event of button don't work when i click open dropdown menu of last item and i scroll down bottom. I think the event is blocked by library React Semantic UI when i scroll down the extra ...
TienDev's user avatar
0 votes
1 answer
22 views

Semantic UI Dropdown not Functioning in Rails 7 Application

I'm encountering an issue with a Semantic UI dropdown in my Rails 7 application that I'm developing using a CDN. Despite my efforts, the dropdown is not working as expected. Below is the relevant code:...
Afaq Khan's user avatar
0 votes
0 answers
17 views

React ThemeContext doesn't work for semantic UI for react Modal

I'm creating a dark theme for my site, and I used createContext from React to create it. Every element in my site is displayed as it should be in dark theme, except the semantic UI modal. The dark ...
RuLee's user avatar
  • 183
0 votes
0 answers
20 views

How to fix error at run time after upgrading react "^16.13.1" to "^18.2.0 " & semantic-ui-react "^0.88.2" to "^2.1.4"

To upgrading existing react app, where at ui library used semantic-ui-react... "react": "^16.13.1", ===> to ===> "react": "^18.2.0", "...
Taiseen's user avatar
  • 316
0 votes
1 answer
31 views

Change color of the calendar icon in Semantic ui react input

I'm using semantic ui react for my date input. I need to change the calendar icon color of the input. Is it possible ? here is my code <Input id="fromDate" name="fromDate" ...
RuLee's user avatar
  • 183
0 votes
1 answer
55 views

Google sheets multiple choice selection menu with persistent checked boxes display?

I am trying to modify the code given in another SO answer here (https://stackoverflow.com/a/72411940/8236733) which allows for google sheets to do multiple choice menu selection. Reproduced below for ...
lampShadesDrifter's user avatar
1 vote
1 answer
27 views

Semantic UI not validating dynamically generated dropdown

I have a dynamically added Semantic UI dropdown with the name "language2" and the validation rule: language2: { identifier: 'language2', rules: [ { type: 'empty', prompt: ...
Bran's user avatar
  • 221
0 votes
0 answers
29 views

Caching dynamic SVG Image with React

I want to be able to load multiple large and heavy SVG files (~2 MB per SVG when all referenced images/resources are counted) which the user can interact with and manipulate, and be able to swap ...
cancech's user avatar
0 votes
0 answers
47 views

Why is the first element returned taller than all other elements?

This is my first time asking a question here, so go easy on me! In my effort to learn React, I've created a simple search app that returns dummy data. Basically, you pick the department, and the ...
EnArkhe's user avatar
0 votes
1 answer
13 views

Semantic-UI-React "flud "attribute prevents full coverage of button inside of reavel

If I add "fluid" attribute to Semantic-UI buttons inside of the Semantic-UI reveal then reaval doesn't work as expected. Rather than covering the primary button and transitioning to reveal ...
Patrick Hume's user avatar
  • 2,109
0 votes
0 answers
8 views

SemanticUI Dropdown hidden input value set to undefined

I'm using SemanticUI and cell gem in a rails fullstack application. I am rendering a table of records with a cell (TableCell) Each row has a SemanticUI multiselect input and i'm using an other cell (...
Ludovic Baratier's user avatar
0 votes
1 answer
12 views

Why isn't my react app mapping my graphQL query?

I am working on a component to map all posts from a graphQL query on the client side using semantic UI. I am running it locally and the webpage is not showing any of the data even though this query ...
samira's user avatar
  • 3
0 votes
0 answers
10 views

Can I set multiple default values for Semantic UI's "Multiple Search Selection" type dropdown using HTML?

Using Semantic UI. I'm looking for a way to define the default selected values in HTML rather than using set selected([value1, value2]) with JS. I haven't found any documentation about how to ...
Dan Smith's user avatar
0 votes
0 answers
30 views

Strange characters are showing instead of bullet point in react semantic ui list element

I am using react semantic ui list bullet but after deployment bullet point showing like strange characters. I already included below code in index.html file <!DOCTYPE html> <html lang="...
SunilT's user avatar
  • 1
0 votes
0 answers
35 views

Semantic-UI dropdown onChange event

Can someone help and explain to me why this code works fine in JSFiddle, firing onChange event, and not in chrome or firefox ? In the browsers, dropdown works fine, but when I change the option, the ...
NIlton Chagas's user avatar
0 votes
0 answers
23 views

Semantic-ui multiple How about customizing the display?

I have created a multi-selection dropdown box, but I don't want it to increase by one every time I click on it. I envisioned that it would display no more than three values, and if it did, it would ...
李临波's user avatar
1 vote
0 answers
39 views

Cant understand how semantic UI elements work

I recently decided to use some semantic ui elements with react but I can't understand how it works. Here are some examples : I have this container element : .mainContainer{ align-items: center; ...
Thanos Rom's user avatar
1 vote
0 answers
13 views

Semantic UI in react: itemsPerRow={x} not working

First post, so I apologize if this lacks clarity, and very green programmer, so apologize for any ugly syntax. But I cannot, for the life of me, get itemsPerRow to actually assign semantic ui cards ...
Sean Stevens's user avatar
0 votes
0 answers
52 views

Input with type="date" does not support a placeholder attribute

Is there any way to display placeholder for input with type='date'. I'm using Semantic UI for react and here is my code. <Form> <Form.Group widths='equal'> ...
RuLee's user avatar
  • 183
0 votes
0 answers
56 views

Semantic UI React useState() messes with input range slider?

I'm trying to create a input slider with a text bubble next to it that displays what the current value is. I'm using the useState() function to track the position and update it in the bubble. ...
jw1685464's user avatar
0 votes
0 answers
29 views

Semantic ui changing the position of fullcalender popover?

I'm using the semantic ui and fullcalender cdn in the same file. According to fullcalender documentation popover position is absolute to the it's current table cell. like this one. but in my case ...
Maninder Singh's user avatar
0 votes
0 answers
100 views

Installation of semantic UI keeps failing

I am trying to install Semantic UI as a dependency in my project. I am getting this output in the terminal: C:\Frontend setup>npm install semantic-ui@latest npm WARN deprecated [email protected]: ...
Dusan Stojanovic's user avatar
0 votes
0 answers
56 views

React Semantic-UI Dropdown item with bold and underline

I'm trying to set a React-Semantic-UI dropdown title in bold and underline using this <Dropdown text={<strong><ins>About</ins></strong>} simple item style={{ lineHeight: '0' ...
Rego's user avatar
  • 1,118
0 votes
0 answers
72 views

Semantic UI sidebar scrolling issue

I have a website I have created using the framework Semantic UI where when you have a screen the size of a phone you have the option of using a sidebar. Currently it all works fine apart from when you ...
Arlo Hill's user avatar
0 votes
0 answers
27 views

Form Validation Prompt after .api response - Semantic Ui

i'm using semantic-ui form validation in my code. I'm sending a data to server for checking if is has the same value-or not. if server value has same with my sending data, writing a message, i want to ...
Nihat Özyedi's user avatar
0 votes
0 answers
119 views

how to change the color of loader sematic ui animation?

how to change the color of loader sematic ui animation? I tried to prescribe different parameters in style, but I found how to change the animation itself. Nothing works and I didn't find any ...
Екатерина's user avatar
1 vote
0 answers
100 views

How to use default Semantic UI React Dropdown keyboard navigation with custom styling?

I want to use default keyboard navigation from Semantic UI React Dropdown (arrows to move to prev/next item, enter to select etc.) with custom Dropdown styling. Everything was working until I added ...
sswwqqaa's user avatar
  • 1,575
4 votes
2 answers
726 views

Using semantic-ui-less in a Vite React project

I've been trying to install the semantic-ui-less package alongside semantic-ui-react, but upon running with npm run dev I get this error: [less] '../../theme.config' wasn't found. Tried - /home/antp/...
Anton P's user avatar
  • 41
0 votes
0 answers
69 views

Next 11 css-loader throws an error in build process inside Docker against fomantic-ui locally built files

I am using "next": "^11.1.4" and "fomantic-ui": "^2.9.2" within a project and I don't know how to go through the situation described below. Build process takes ...
ShiiRochi's user avatar
0 votes
0 answers
81 views

How to initialize Semantic UI multi-level dropdown with JavaScript only?

The documentation mentions only this, which is fine for a normal dropdown but I need a multi level dropdown like their example, but with only vanilla JavaScript. I went through all of the ...
A.G.'s user avatar
  • 314
3 votes
1 answer
36 views

Page Not Displaying

I am stuck on this problem for days and the solutions that I find on the web are not helpful. My routes are not working properly. The URI is updating, but the appropriate pages are not displaying ...
DESH's user avatar
  • 530
0 votes
1 answer
562 views

I am getting a require() of ES Module error using `npm install semantic-ui-dropdown` command

I just tried to install semantic-ui on two different machines and received the same error: `npm ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/petelombardo/node_modules/del/index.js from /...
obxPete's user avatar
  • 51
0 votes
1 answer
35 views

Vue element not loading on hidden modal

I am trying to display a Vue component onto a modal controlled by semantic ui, however, the vue element is not loading/mounting. I am using Laravel & JQuery mainly with some vue elements. I ...
Jake Butterfield's user avatar
0 votes
0 answers
19 views

get the status of a toggle button in semantic UI

I am trying to get the status of a toggle button in semantic UI but am having issues. The state and isChecked properties are coming back as undefined. Here is my sandboxed example: <script src="...
Luca's user avatar
  • 10.5k
0 votes
1 answer
139 views

how to handle icon on click with semantic UI

I am using semantic UI to create a basic front end and I am adding an icon as follows: <div class="ui one column grid"> <div class="column"> <div ...
Luca's user avatar
  • 10.5k
1 vote
0 answers
62 views

Semantic UI Dropdown not working correctly

I'm trying to use the semantic ui dropdown, but it does not appear correctly in the angular component even if i use all of implementations existing in the official page. my jquery version : "...
Abdellah AITMOMIN's user avatar
0 votes
1 answer
85 views

cannot set the default selection in semantic UI selection dropdown

I have a selection dropdown where I am trying to have a default value already selected and this is turning out to be quite difficult. So, my dropdown definition is as follows: <form class="ui ...
Luca's user avatar
  • 10.5k
0 votes
1 answer
143 views

Decrease padding between two row in Grid semantic ui react

I am using grid in semantic ui react and you are able to see in picture name and mob have padding i want to decrease these padding between them Code: import React from 'react' import { Grid, Image } ...
Ranga chimalgi's user avatar
1 vote
1 answer
136 views

Semantic UI and flask

I am trying to use semantic UI within my flask application template code and trying to display a text area as follows: <div class="ui container"> <div class="html ui ...
Luca's user avatar
  • 10.5k
0 votes
0 answers
48 views

Rendering jsx:element for semantic-ui dropdown

I am new to using react.js, using a C# API, and trying to use the semantic-UI dropdown that allows HTML in the content of the dropdown items. I'm having trouble returning the "content" field ...
Dave's user avatar
  • 4,969
2 votes
0 answers
281 views

How to override the semantic UI Form Input Color?

I have been trying to override a semantic UI CSS property in a form input element. I want to change the background color in the input field to white. It keeps showing yellow. I just am testing out ...
meglynn22's user avatar
1 vote
1 answer
78 views

Semantic UI Sidebar Issue ( Sidebar separating line is not visible)

I have Home, Contact and About menu in sidebar and I want a separation line between these menus. In semantic UI react showing these separations but on screen not showing. My React code is below import ...
Ranga chimalgi's user avatar
0 votes
2 answers
362 views

Main (html tag) containing header

I'm confusing. I read diferents opinions about main. The first one says that main (as it's the principal section) could contain header and footer as direct children. <main> <header><...
STUCKED's user avatar
  • 63
0 votes
1 answer
46 views

Customizes Semantic UI in react

I am mentioning link below This is semantic UI in react and i want to remove spaces between side menu and Tab Content Semantic UI sandbox link: https://z3omnz.csb.app/ Current Look: Want to this type:...
Maddy_07's user avatar
-1 votes
1 answer
83 views

When click on sidebar menu in right side routes page display

I have sideNavbar and when click on side bar menu return menu componetns on the right side. Below i have mention the image just look same output want. Sandboxlink:https://m7tqt3.csb.app/ SideNavbar.js ...
Ranga chimalgi's user avatar
0 votes
1 answer
62 views

Angular 4 Semantic UI Tabs only work after i click on them

I have some semantic UI tabs set up in my app.component.html like this: <div class = "ui container"> <h1>Header/h1> <hr> <div style = "background-color: ...
Stefan Drljevic's user avatar
0 votes
1 answer
82 views

Implementing links in a Semantic UI Menu

I would like to link between the pages music (default), novel and cinema. Using a semantic-ui Menu, which I have already made below. Currently the menu shows up, but no links function. The url changes,...
ati's user avatar
  • 81
1 vote
1 answer
40 views

Show loading icon in SemanticUI Message after button press until API response

I am making an app that uses an API to create a title and put it in a Semantic UI Message. As soon as I press the button, I want a loading icon to appear and then disappear once titleText.length > ...
ati's user avatar
  • 81

1
2 3 4 5
55