Issue with border styling in Material-UI vertical ToggleButtonGroup

In my current front-end project, I have implemented the React Material UI ToggleButtonGroup.

For a Multiple Selection example with vertical styling, you can refer to this code snippet: https://codesandbox.io/s/eyk66?file=/demo.js

However, I encountered an issue where the left border of buttons disappears when I select two or more buttons. I tried adding border color to each Toggle Button individually, but to no avail. The problem persists as shown here: https://i.sstatic.net/2oDKj.png Can someone please assist me in resolving this?

cssreactjsmaterial-ui

Answer №1

After some experimentation, I managed to figure out the solution on my own.

 style={{outlineColor: 'red', outlineWidth: '1px', outlineStyle: 'solid', margin: '2px'}}

Instead of using style={{borderColor: 'red'}}, I opted for outlined CSS styles which displayed the borders perfectly.

By applying the above style to every ToggleButton, all borders became visible.

<ToggleButtonGroup value={formats} orientation="vertical" onChange={handleFormat} aria-label="text formatting">
  <ToggleButton value="bold" aria-label="bold" style={{outlineColor: 'red', outlineWidth: '1px', outlineStyle: 'solid', margin: '2px'}}>
    <FormatBoldIcon />
  </ToggleButton>
  <ToggleButton value="italic" aria-label="italic" style={{outlineColor: 'red', outlineWidth: '1px', outlineStyle: 'solid', margin: '2px'}}>
    <FormatItalicIcon />
  </ToggleButton>
  <ToggleButton value="underlined" aria-label="underlined" style={{outlineColor: 'red', outlineWidth: '1px', outlineStyle: 'solid', margin: '2px'}}>
    <FormatUnderlinedIcon />
  </ToggleButton>
  <ToggleButton value="color" aria-label="color" disabled style={{outlineColor: 'red', outlineWidth: '1px', outlineStyle: 'solid', margin: '2px'}}>
    <FormatColorFillIcon />
    <ArrowDropDownIcon />
  </ToggleButton>
</ToggleButtonGroup>

https://i.sstatic.net/3dYdl.png

I appreciate everyone's assistance in this matter!

Answer №2

There appears to be a bug in the styling for the selected state of vertical toggle buttons. The issue has been documented on this GitHub page: https://github.com/mui-org/material-ui/issues/22779. Essentially, the problem lies in the fact that the selected state is inheriting style adjustments meant for horizontally oriented toggle buttons:

export const styles = (theme) => ({
  /* Styles applied to the root element. */
  root: {
    '&$selected': {
      '& + &': {
        borderLeft: 0,
        marginLeft: 0,
      },
    }
  }
}

To address this issue, the borderLeft alteration needs to be reversed (the marginLeft change can remain at zero for vertical orientation), and the corresponding modifications should be made to the "top" instead of "left". Using double ampersands increases specificity to ensure these custom styles take precedence over the default ones.

import MuiToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
import { withStyles, fade } from "@material-ui/core/styles";

const ToggleButtonGroup = withStyles((theme) => ({
  groupedVertical: {
    "&&.Mui-selected + &&.Mui-selected": {
      borderLeft: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
      borderTop: 0,
      marginTop: 0
    }
  }
}))(MuiToggleButtonGroup);

https://codesandbox.io/s/togglebuttongroup-vertical-selected-k8f7e?fontsize=14&hidenavigation=1&theme=dark

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

How can I retrieve the current background color and revert it back after a .hover event?

I am trying to use the .hover function to change the background color of a menu. Each menu item has a different background color, so I want it to return to its original color when the user hovers off. In other words, I want the script to read the current b ...

jquerycssajax

Combining HashRouter and anchor navigation in React: A guide to seamless page navigation

I am currently utilizing the HashRouter functionality from the library react-router-dom. The issue I am facing is when attempting to link to a specific div on the same page using an anchor tag: <a href="#div-id"> Link to div </a> In ...

javascriptreactjsroutesreact-routerreact-router-dom

React Component State in JavaScript is a crucial aspect of building

What happens when the expression [...Array(totalStars)] is used within a React Component? Is the result an array with a length of 5, and what are the specific elements in this array? We appreciate your response. class StarRating extends Component { ...

javascriptreactjs

Assign the path parameter to the component key in the Route

One of the routes in my application is defined as shown below: <Route exact path="/licenses/:type?" component={Licenses} /> I want the component to re-render every time the type parameter changes. According to react-router documentation, I ...

javascriptreactjsreact-router

Designing a webpage - patterns in the background and images layered on top

I've been tasked with creating a webpage that resembles a theatrical stage. The design calls for the following layout: [curtain repeat][left curtain][stage][right curtain][curtain repeat] The left curtain, stage, and right curtain should maintain a ...

htmlcss

Unable to implement a design on a button during its click event

I successfully implemented a dynamic button in HTML5 and Javascript. The button has a click event assigned to it, so when clicked, its content and background color are supposed to change. However, while the content changes correctly, the background color d ...

htmlcssdom

Building a matrix of checkboxes

I am looking to design a grid of checkboxes that are displayed in columns, with 5 checkboxes in each column. <ul class="checkbox-grid"> <li><input type="checkbox" name="text1" value="value1" /><label for="text1">Text 1</lab ...

css

Div content with a unique angle

I need to create a website with slanted div elements that must meet the following criteria: The sections should have a height of approximately 400px when displayed side by side, and about 800px when they stack vertically. It would be ideal if this could ...

htmlcssrotation

The type '{ }' does not include the properties 'params', 'isExact', 'path', 'url' from the 'match<Identifiable>' type

Currently, I am utilizing react router and typescript in order to extract the id variable from a route for use in a component. However, typescript is raising an issue: The type '{}' lacks the following properties found in type 'match' ...

javascriptreactjstypescript

Div sliding out of view

I'm encountering a slight issue with this template: essentially, my goal is to implement a feature where clicking on a box will expand it while simultaneously sliding the other boxes off-screen. However, instead of just sliding the div off-screen, it ...

javascriptjqueryhtmlcss

Error loading CSS file on Google App Engine

I attempted to add a CSS file as a static file in my project just to experiment with how it functions, but encountered difficulties right from the start. The content of the CSS file is: body { background:#00FF00; } In addition, here is my configurat ...

htmlcssgoogle-app-engine

How do I implement an array of objects using an interface in React and Typescript?

I'm working with an array of objects where the data is stored in a JSON file. Here's a glimpse of the JSON file: [ { "_id": "62bd5fba34a8f1c90303055c", "index": 0, "email": "<a href="/cdn-cgi/l/emai ...

reactjstypescript

Jquery Parallax causing scrolling problems across different browsers

Could you please take a look at the following link in both Chrome and Firefox? I am encountering some unusual issues. Primary Concern The scrolling function works smoothly in Firefox, but it seems to be malfunctioning in Chrome. Secondary Problem Whe ...

jqueryhtmlcss

Having trouble getting the styles property to work in the component metadata in Angular 2?

Exploring Angular 2 and working on a demo app where I'm trying to apply the styles property within the component metadata to customize all labels in contact.component.html. I attempted to implement styles: ['label { font-weight: bold;color:red } ...

htmlcssangulartypescript

Prevent automatic scrolling to anchors when using router.push() in Next.js

When using the latest version 10.2 of next, every time a URL with a hash is pushed to the router, next.js automatically jumps to the anchor element. import {useRouter} from 'next/router' router.push('/contact#about-us'); This behavior ...

javascriptreactjsnext.js

Issues with the inheritance functionality in styled components are causing errors

The issue arises when I try to customize the styling of my PrimaryButton component, separate from the DefaultButton. Despite writing style properties for it, the changes do not take effect. Here is the folder structure: https://i.stack.imgur.com/0KjyH.pn ...

reactjstypescriptnext.jsstyled-components

The background image is not displaying correctly on mobile devices

I'm struggling to make the image fit the entire screen on a mobile device using the code below. Interestingly, it displays correctly on my personal computer. #topContainer { height:1048px; width: 100%; padding: 0; margin: 0; } #div1 { ...

htmlcsstwitter-bootstrap-3

How to apply new CSS styles to override the existing ones for an element

I have a website with custom CSS styling applied to an <A> tag, including styles for A:hover. However, I need to remove these hover effects for one specific instance of the tag. Is there a way in CSS to set a property so that it does not change? Let ...

htmlcsshover

Changing the background color with a switch function in ReactJS

After clicking a link, a view is rendered based on the "id" from a JSON. To enhance the user experience, I want to add a background color when a particular view renders and also toggle the style. This code snippet illustrates how the crawl is displaye ...

javascriptcssreactjs

Building adaptable divs using bootstrap technology

I'm playing around with bootstrap and here is the code I came up with: <!doctype html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet ...

htmlcsstwitter-bootstrap