Questions tagged [semantic-ui]
Semantic UI is a development framework for creating responsive layouts using human-friendly HTML and Javascript.
2,740
questions
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) ...
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'...
-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 ...
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:...
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 ...
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",
"...
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"
...
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 ...
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: ...
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 ...
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 ...
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 ...
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 (...
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 ...
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 ...
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="...
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 ...
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 ...
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;
...
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 ...
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'>
...
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. ...
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 ...
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]: ...
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' ...
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 ...
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 ...
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 ...
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 ...
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/...
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 ...
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 ...
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 ...
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 /...
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 ...
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="...
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 ...
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 : "...
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 ...
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 } ...
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 ...
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 ...
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 ...
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 ...
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><...
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:...
-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
...
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: ...
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,...
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 > ...