Show the Select component in a grid format with a list view, displaying three items per row

Within my react Dropdown component, there is currently a list view displayed when an item is selected. However, I am looking to modify it so that the items are arranged in a grid format with 3 items per row.

Sample Code:

import { Dropdown } from 'primereact/dropdown'

<Dropdown
  options={companyOptions}
  onChange={this.handleCompanyChange}
  value={this.state.selectedCompanyTemp}
  placeholder='---'
  filter
  className='filterbutton-company'
  filterPlaceholder='Search company'
/>

For more information, please refer to: https://i.sstatic.net/1wsmT.png

cssreactjs

Answer №1

UPDATE | Utilizing Primereact library:

If you are incorporating the primereact library, consider applying the following code snippet to your CSS file. Ensure it is placed after the library code is loaded. If necessary, utilize !important.

.p-dropdown-panel .p-dropdown-items {
    padding: 0.75rem 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

Customize the width of the select field div according to your needs. Test your code using the Browser Development window and experiment with different adjustments. https://i.sstatic.net/OjVmD.jpg

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for including footer content on a site that only has a masthead?

Is there a way to incorporate footer-type text with copyright disclaimer into a masthead-only website? I keep trying to add a footer, but it ends up getting stacked outside the masthead, causing the screen to become scrollable. My goal is to include the co ...

htmlcsstwitter-bootstrapresponsive-designfooter

Typescript is throwing an error when trying to use MUI-base componentType props within a custom component that is nested within another component

I need help customizing the InputUnstyled component from MUI-base. Everything works fine during runtime, but I am encountering a Typescript error when trying to access the maxLength attribute within componentProps for my custom input created with InputUnst ...

javascriptreactjstypescriptmaterial-ui

Divide the screen evenly with a split, where one side is filled with an image

As a newcomer, I'm curious about how to split the screen in half with a form on the left and an image taking up the full height on the right. Is there a simple way to achieve this? For reference, here is a link showing exactly how I envision it: Exam ...

cssbootstrap-4

The child element extends beyond the boundaries of its parent container in HTML

Have you ever encountered a situation where the inner div element is wider than the outer div? It can be a bit frustrating, but there are ways to address this issue. So, what causes this to happen in the first place? And more importantly, how can we ensur ...

htmlcss

Managing empty functions as properties of an object in a React, Redux, and Typescript environment

I'm feeling a little uncertain about how to properly test my file when using an object with a function that returns void. Below are the details. type Pros={ studentid: StudentId pageId?: PageID closeForm: () => void } When it comes to creating ...

javascriptreactjstypescriptredux

Troubleshooting Problems with CSS Before Selector and Margins

Currently, I am attempting to utilize the before selector in order to replicate some list item behavior for elements. Due to constraints where I cannot use list items, it is crucial that I find a way to make styles work effectively. If you would like to s ...

csshtml

Ways to conceal a dynamically generated div upon page load?

I am currently facing a scenario where I need to dynamically create a div. My initial approach was to create it on the document ready event, but the requirement is for it to be displayed only upon selection. The problem I am encountering is that the empty ...

javascriptjqueryhtmlcss

Phonegap - Retaining text data in a checklist app beyond app shutdown

This is my first time developing an app with Phonegap. I am looking to create a checklist feature where users can input items into an input field. However, I am struggling with figuring out how to save these items so that they remain in the checklist even ...

javascriptjqueryhtmlcsscordova

Thenceforth, the combination of NextJS and Redux prohibits the use of thunk

I'm currently attempting to use thunk for making asynchronous calls to an API, but I keep encountering the following error: Unhandled Runtime Error: Actions must be plain objects. Use custom middleware for async actions. Below is my customized _app ...

reactjsreduxreact-reduxnext.js

Customize the Underline Color in MaterialUI Select Component

I'm experimenting with MaterialUI and trying to figure out how to customize the underline and text color of the Select component when an item is selected. Currently, the underline and label appear blue after selection with a gray background. Is there ...

cssreactjsmaterial-ui

Using MaterialUI to create a GridListTile with two IconButtons

I'm working with a GridListTile and trying to add a second button, but I'm having trouble getting both buttons to display. Even though I've attempted to include two ActionIcons, only one of them is showing up. Here's the code snippet: ...

javascripthtmlcssreactjsmaterial-ui

Using CSS to align a <li> element in the center

Do you have a question? I am trying to center a menu using the <li> tag, and I also have two buttons. .subiectele-zilei { width:100%; padding-left: 25px; overflow:hidden; padding-bottom:8px; background-color:#f5f5f5; margin ...

htmlcsshtml-listscenter

Create a webpage layout using Bootstrap that features a left-aligned image within a div, with

Is there a way to achieve this layout using Bootstrap? View the desired design I am looking to create a div with an image on the left (float:left) and text (which could be one or multiple lines) along with a button aligned to the bottom right. The goal i ...

csstwitter-bootstrapcss-floattwitter-bootstrap-2

Add the application's logo image to the Ionic header along with a side menu

When attempting to place the app logo image in the center or left of the Ionic header with vertical alignment, it seems to shift to the top instead. The code I am currently using to display the logo is causing some issues: <ion-view view-title="<im ...

htmlcssionic-frameworkcss-position

Change the color of the menu icon based on the specified HTML class or attribute

I'm trying to create a fixed menu that changes color depending on the background of different sections. Currently, I am using a data-color attribute but I am struggling with removing and adding the class to #open-button. Adding the class works fine, ...

javascriptjqueryhtmlcss

Issues arising from script tags causing disturbances in CSS

As a newcomer to the world of web design, I recently embarked on a journey with Bootstrap and also started exploring the platform Codepen. However, after working on a project in Codepen and attempting to transfer my code to Sublime, some unexpected changes ...

csstwitter-bootstraphead

Unable to load CSS background image and update code

After writing the code in my CSS file, /*The code I initially wrote*/ .wrapper::before { content: ""; position: absolute; bottom: -30%; left: 0; height: 100%; width: 100%; background: url(../img/homeTrans2.svg) no-repe ...

htmlcss

Tips for updating the color, background, and height of the particle background using react-tsparticles

Is it possible to customize color and background in react-tsparticles? Below is an example of a particle configuration file named particle-config.js const particlesConfig = { background: { color: { value: "#232741", }, posi ...

javascriptreactjsreact-particles-js

Setting focus on an input within a hierarchical tree structure using ReactJS

Currently, I have a deep tree structure implemented in ReactJS that is endless. Each node in the tree follows this model: const tree = { id:"x", name: "node 1", children : [ { id:"y", name:"sub node 1", children : [] ...

reactjstreeview

Utilize setState to showcase data fetched from AJAX request

Currently, I am in the process of developing a web application using the GitHub search API. My goal is to have detailed information about each repository displayed below its corresponding entry. Specifically, I want the content retrieved from the AJAX re ...

ajaxreactjs