Currently, I am utilizing the Semantic UI React CSS library and find myself in need of changing the background color of dropdowns once an option is selected.
https://i.sstatic.net/yZBK7.png to https://i.sstatic.net/LxTtT.png
<Dropdown
placeholder='Name'
selection
search
options={names}
className='filter-dropdown'
/>
Ensure the style changes for each dropdown item upon selection
Check out the code snippet provided below
const [selected, setSelected] = useState(null)
const originalOptions = [
{
index: 1,
text: "Davey Jones",
value: "userone",
style: { backgroundColor: 'red'}
},
{
index: 2,
text: "Gengar",
value: "usertwo",
style: selected ? { backgroundColor: 'red'} : null
},
{
index: 3,
text: "Frank Booth",
value: "fbooth",
style: { backgroundColor: 'red'}
}
];
const displayOptions = originalOptions.map(option => {
return
{
...option,
style: selected === option.index ? { backgroundColor: 'red'} : null
}
})
Implement this in your Dropdown component as shown below
<Dropdown
placeholder='Name'
selection
search
className='filter-dropdown'
options={displayOptions}
onChange={(value)=>setSelected(value.index)}
...
/>
Can someone help me create a border like the one shown in this image? https://i.stack.imgur.com/b0GIa.png .child::before { content: ""; position: absolute; width: 13px; height: 13px; left: -1px; background: transparent; border-bott ...
I am currently working on incorporating a feature that generates a highlighted and condensed preview of a provided text. Below is the code snippet I have so far: <div> Search: <input value='vestibulum' disabled/> </div> < ...
My goal is to save several objects into an array. Specifically, I have five objects named obj1, obj2, obj3, obj4, and obj5. ...
I experimented with generating dynamic content in turn.js using the sample provided here. This is an excerpt of the code I have written: <body> <div id="paper"> </div> </body> <script type="text/javascript"> $(win ...
Is there a way to keep two fixed elements aligned with their sibling element on window resize? <div class="left-img"> IMAGE HERE </div> <!-- fixed positioned --> <div class="container"> Lorem ipsum... </div> <div class=" ...
Is there a way to restrict user input to only numbers with a maximum length of 3 in Material UI? <TextField id="score" label="score" className={classes.textField} name="totalScore" margin="normal" defaultValue={score} /> We specifically ...
As I work on creating a mobile version of my website, I've come across a challenge: The entire site fits perfectly on the computer at a browser width of 480px, but when viewed on my mobile phone (regardless of the browser used), it leaves space on the ...
I am facing an issue with my Vue instance where I need to pass JSON data from the backend without using HTTP requests because the data is constant. I attempted to achieve this using props, but encountered some challenges... In the DOM, it appears as <d ...
A website can be accessed not just by a user through a browser, but also by programs, bots, and crawlers. I have a website hosted on Google App Engine with Python that features non-static HTML pages generated by a Python program by manipulating strings. Th ...
Here is the code for my custom filter that includes a parameter called viewbookoption, which is a dropdown value. Depending on the selected value from the dropdown, the data will be displayed in a grid. I have used a forEach loop in this filter, but it see ...
I have created a large PHP generated table from a database and now the customer is requesting for it to be sortable. Below is a sample of the table's contents: ID BRAND KIND DESCRIPTION PRICE The customer wants to sort by price, and also have the a ...
I'm currently working on a project for a client and I have encountered an issue that I would appreciate some guidance on. My task involves printing the contents of a specific div on the website. After finding a solution in a previous post, I implement ...
Currently, I am striving to achieve a "conflict free" two-row fixed-top navbar in Bootstrap 3. I am unsure if it necessitates two separate "navbars" according to the official Bootstrap definition. While I possess decent coding skills, my knowledge of the B ...
I have a homepage that features a popup window. <textarea class="form-control item"></textarea> <button type="button" class="btn btn-primary" name="name">Send</button> Additionally, there is a secondary page at (/conclusion/main) ...
Worked tirelessly on this script all night still unable to fix the bug. The issue is that when I select an image and click upload, it uploads the current image file. Then, if I select another image and click upload, it uploads two new files along with the ...
I have successfully dockerized my reactjs app and express app. Check out the docker-compose.yml file I used: version: "3" services: client: image: react-app build: ./client ports: - "3000:3000" volumes: ...
Encountering an error indicated in the image for the following code: handlechange(event) { this.setState (prevState => { return( checked : !prevState.checked );}); } Interestingly, changing the round brackets after "return" to curl ...
I am currently designing a map that features points with tooltips. When hovered over, the tooltips function correctly. I am interested in exploring the possibility of making the tooltips interact with an external navigation bar. My goal is to have specifi ...
Encountering a problem with the Select Component from Material UI. It seems to be rendering differently in Chrome on Windows compared to Mac. On Mac, everything works as expected but on Windows, it appears differently as shown in the attached image. If I ...
My material-ui menu currently has the following setup: <span> <Link to="/issues"> <Button style={isActive(history, "/issues")}>Issues </Button> </Link> <Link to="/users"> <Button style={isActive(his ...