Modify the design of the button in the CSS code

I am facing an issue with the layout of the Visible Columns button and unable to standardize it like the buttons above using CSS

enter image description here

The code snippet for the Visible Columns button is as follows:

import React, { useState, useEffect } from 'react';
import * as utils from '../../utils';
import { Multiselect } from 'multiselect-react-dropdown';

export default function TblApprovedTimesheetReport(props) {

  // code continues...
}

Below is the code for the other buttons:

import React, { useState } from 'react'
import Button from '@atlaskit/button';

// additional code...

And here is the corresponding CSS:

label {
    right: 2px;
    position: relative;
}

.hdrtimesheets-container {
    background-color: white;
    display: flex;
    flex-direction: row;
    padding: 5px;
    vertical-align: middle;
    border-bottom: 1px solid rgb(221, 232, 241);
}

// more styles....

If there's anyone who could assist me in making these modifications, I would greatly appreciate it.

Answer №1

To follow best practices, the class name in the css file should be "searchWrapper" instead of "search_wrapper". Below is the updated css code:

.hdrtimesheets-element-button {
  background-color: white;
  margin: 5px;
  text-align: center;
  display: flex;
  max-width: 30%;
}

.hdrtimesheets-element-button .searchWrapper {
  border: 1px solid gray;
  border-radius: 0;
  padding: 0px;
}

.hdrtimesheets-element-button input.searchBox {
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.73);
  padding: 10px 5px;
  box-shadow: 0 0 1px rgba(0,0,0,0.1), 0 2px 4px 1px rgba(0,0,0, .18);
  box-sizing: border-box;
  outline: none;
  margin-top: 0;
}

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

Having issues with 'direction' in React withStyles causing errors

I am experiencing an issue with my React website where I am using the withStyles feature to apply styles to a material-ui Grid element. Specifically, when attempting to use direction: "column" in the style, I encounter the error message provided below. Th ...

Trigger a complete page re-render with just one change in a child component

When working with two text boxes, one using hooks and the other the old style, I noticed that in Hook mode, whenever a user input changes the textbox value, the entire page gets rendered. However, with the old style, only the text box is re-rendered withou ...

The ancient oracle of Delphi and the modern login portal of Microsoft

I need to login to a site that utilizes . To streamline the process for end-users, I want to store credentials in an .ini file and inject them into a two-stage JavaScript online prompt. Is there a way to have Delphi run a program with a browser that auto ...

SweetAlert2 not displaying properly in Ionic6 - troubleshooting the issue

My current project is an Ionic 5 Angular project with SweetAlerts2 popups. Recently, I decided to upgrade to Ionic6 and encountered an issue where the SweetAlerts2 popups are not displaying correctly. The alert seems to only show up in the header, leaving ...

Choose an input element from an iframe using jQuery

Can anyone assist me with selecting an input field from an iframe using jQuery? The structure of the iframe is as follows: <iframe src="https://checkout.klarna.com" id="klarna-checkout-iframe" name="klarna-checkout-iframe" class="kloading" scrolling="n ...

Is it possible to integrate a Neo4j Graph Visualization running on a virtual machine into my flask user interface?

My current setup involves running Neo4j on an Azure Virtual Machine and accessing the graph visualization through a web browser. In addition, I have developed a UI using Python with Flask that is currently running locally. I am interested in embedding th ...

Is it possible to bring in the library "next/image" under a different alias?

I am facing a dilemma in one of my components where I require both of the following functionalities: import Image from 'next/image'; (from NextJS) Image() (from TypeScript) Unfortunately, these two are conflicting with each other. Is there an ...

displaying the identical image from various perspectives

I have an arrow image that I need to display in different angles - top, left, bottom, right. I was considering what would be the best approach: 1: Changing the image direction via CSS and loading the main image <img src="a.png"> <img src="a.png" ...

Issue with grunt-crx task detected

In my Gruntfile, I've integrated the grunt-crx task as shown below: crx: { packExtension: { src: "../build/unpacked", dest: "../build/dist" } } Whenever I execute the crx task on its ow ...

Guide on how to automatically direct users to a page upon successful login in ReactJS

How can I redirect to the homepage after a successful login in ReactJS? Also, how can I display an error message when a user enters incorrect credentials? I have attempted the following code, but it does not successfully redirect to the homepage or show ...

Having trouble with CSS and javascript files not resolving after moving app to a new Windows 7 development machine

I have recently migrated my ASP.Net 3.5 web site from my old XP sp3 machine to a new Win 7 64-bit dev machine. The web application utilizes Master Pages, App_Themes with style sheets and images, as well as an image folder located off the main root. Additio ...

Checkbox selection limitation feature not functioning correctly

Having trouble with my checkbox question function - I want to limit the number of checkboxes that can be checked to 3, but it's still allowing more than that. I suspect the issue lies with latestcheck.checked = false; This is my typescript function: ...

Form aligned to the right

Is there a way to align the form to the right in this code? HTML @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@500&display=swap'); * { font-family: "Noto Sans", sans-serif; font-weight: 500; } .no-outline { ...

Tips for sending information into the useState function using useEffect - next.js (SWR hook for retrieving and storing data)

Having trouble passing data into my useState with the useEffect function in React... This is my current setup const PublicationsHome = ({ data: allPubs }) => { // All pubs const { data: Publications }: thePublication = useSWR( `${process.env.U ...

Upgrade button-group to dropdown on small screens using Bootstrap 4

I am currently developing a web application and incorporating Bootstrap 4 for certain components such as forms and tables. Within the design, I have included buttons grouped together to display various actions. Below is an example code snippet: <li ...

Arranging two list items (<li>) side by side in HTML code

I am currently designing a form with a side navigation bar that will display around 15-20 elements. Each element is represented by an <li> containing a link to open a modal when clicked. This is the current structure of my code: <div id="sidebar ...

Multiple file uploads are causing the issue of req.file being undefined

After going through all the suggested solutions, I am still struggling to identify the root cause of my issue. The problem arises when trying to upload multiple files and form inputs - the req.file is always undefined and the image data ends up in the req. ...

The initial state value for useState in React is not being set as expected from the props

I'm experiencing an issue with my Avatar component where the initial value of avatarPath is not being set to the non-null url that is passed in. Despite assigning the value of url to avatarPath, it remains null. import { useState } from "react&qu ...

The Ajax function effortlessly receives the returned value and smoothly transitions to the error handling stage

When trying to retrieve data from an ajax request, my function needs to receive the returned data as an array of strings. During debugging, I am able to see the response, but at the same time, the error function is triggered. This is how my code looks: ...

Transforming Json data into an Object using Angular 6

https://i.stack.imgur.com/JKUpL.png This is the current format of data I am receiving from the server, but I would like it to be in the form of an Object. public getOrder(): Observable < ORDERS > { return this._http.get < ORDERS > (`${thi ...