Implementing border-right leads to alignment problems

I'm currently working on creating a list with bootstrap-Accordion using react-bootstrap. I'm applying a background color and border left to the selected item.

The problem I'm facing is:

Whenever I activate a bar, the text shifts to the right, causing misalignment. I'm not sure how to fix this issue.

return (
<div>
  <div className={props.trigger_value ? "sidebar" : "sidebar_shrink"}>
    <hr></hr>

    <Accordion className="menue_group">
      {data_json.map((item, index) => (
        <>
          <CustomToggle
            eventKey={index}
            handleClick={() => {
              if (activeKey === index) {
                setActiveKey(null);
                setmenue_active(activeKey);
              } else {
                setActiveKey(index);
                setmenue_active(index);
              }
            }}
          >
            {item.menu}
            {item.submenu ? (
              activeKey === index ? (
                <i className="fas fa-angle-down float-right pr-3"></i>
              ) : (
                <i className="fas fa-angle-up float-right pr-3"></i>
              )
            ) : null}
          </CustomToggle>
          <div className="container-fluid">
            {item.submenu &&
              item.submenu.map((li, index1) => (
                <Accordion.Collapse eventKey={index}>
                  <div key={index1}>
                    <div
                      className={
                        index1 === activeKey_submenu
                          ? "submenue submenue_active container"
                          : "submenue container"
                      }
                      onClick={() => subMenue_click(index1)}
                    >
                      {li.menu}
                    </div>
                  </div>
                </Accordion.Collapse>
              ))}
          </div>
        </>
      ))}
    </Accordion>

    <button className="btn btn-primary" onClick={props.triger_sidebar}>
      test
    </button>
  </div>
</div>

);

Click here for the code on CodeSandbox

Answer №1

Consider the impact of borders on the size of an element. Any changes to the border width will affect the overall layout of the element. Here are a few alternatives to explore:

  1. Keep the border width consistent and simply change the color from transparent to your desired color.
.item {
  border: 4px solid transparent;
}

.item.active {
  border-color: red;
}
  1. Try using box-shadow instead of borders. This will maintain the element's size and, with zero blur, can replicate the effects of a border. Keep in mind potential issues with z-index when using shadows that aren't inset.
.item.active {
  box-shadow: inset 4px 0 0 red;
}

Hover over each example below to see the variations in action (border, box-shadow, box-shadow inset).

  • The border example is slightly wider due to the hidden 4px border.
  • The first box-shadow example places the "border" on the outside of the element.
  • The inset box-shadow example positions the "border" inside the element.

.item {
  background: aliceblue;
  max-width: 150px;
  padding: 4px;
  margin-bottom: 4px;
}

.border {
  border-right: 4px solid transparent;
}

.border:hover {
  border-right-color: red;
}

.shadow:hover {
  box-shadow: 4px 0 0 red;
}

.shadow-inset:hover {
  box-shadow: inset -4px 0 0 red;
}
<div class="item border">Border Color</div>
<div class="item shadow">Box Shadow</div>
<div class="item shadow-inset">Box Shadow Inset</div>

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

Error Received While Attempting to Log in using Ajax

Having an issue with logging in using ajax and php. I am able to log in successfully, but when trying to display an alert message and refresh the page upon login, it gives me an error without refreshing. However, upon manually refreshing the page, I can se ...

The submit option fails to appear on the screen in the JsonForm library

I've been using the JsonForm library ( https://github.com/jsonform/jsonform ) to define a form in HTML. I have set up the schema and form of the JsonForm structure, but for some reason, the "onSubmit" function that should enable the send button is not ...

When encountering an OR operator, Javascript will cease execution of the remaining conditions

This is a basic JavaScript form-validation I created. All the document.form.*.value references are present on my page, except for the document.form.dasdasdas.value ==''. In the code below, the purpose is to display an error if any of the forms a ...

What is the best way to merge 60 related jquery functions into a unified function?

I designed a webpage that serves as an extensive checklist. When you click on the edit button for a checklist item, a modal window opens up. This modal window contains a radio button to indicate whether any issues were found during the check. If "Yes" is s ...

What is the process for connecting an HTML page to a CSS file located in a parent directory?

Here's the problem I'm facing: I recently encountered some organizational issues with my website, so I decided to reorganize my files for better classification. The current folder structure looks like this: www resources images ... css de ...

Issue: The use of destructuring props is required by eslint, and I'm currently working with a combination of react and types

I typically work with React in JavaScript, and I recently encountered an error message stating "Must use destructuring props at line 14" while trying to define a button for use in a form. Here is the code snippet in question: import React from 'react& ...

Refresh selected items after inserting data via ajax in CodeIgniter

I have a select list on my view that allows users to add new items using a plus button. However, when a new item is added, the list does not refresh. I don't want to refresh the entire page with an ajax query. Instead, I am trying to implement a metho ...

What is the best way to ensure there is only one instance of a React component visible at any given time?

In my current project with React, I am working on implementing a specific functionality. The challenge I am facing involves three components: ComponentA, ComponentB, and ComponentC. The twist is that ComponentC can be rendered as a child of either Compone ...

Transforming a file with a node module that lacks a .js class into a browseable format

I am currently working on browserifying my module. One of the dependencies I have is on this https://www.npmjs.com/package/chilkat_win32. It is present in my node_modules folder and here is how the structure looks: https://i.stack.imgur.com/uw9Pg.png Upo ...

What is the method to display HTML code using JavaScript within a span element in a JSP page?

While working on a jsp file, I came across a span tag with the following code: <span id="divBasicSearchResults" style="height:100%;"></span> Below is the Javascript function that generates HTML content for this span: function renderBasicSear ...

Stopping the continuous re-sending of a script via Ajax when a key is pressed

My script is set up to save messages into a database when the enter key is pressed. <textarea class="comment" name="comment" id="comment" onKeyPress="return checkSubmit(event)" onKeyDown="return checkTypingStatus(event)" >Comment/Reply</textarea& ...

Tips for updating CSS styles for multiple innerHTML elements using a JavaScript for loop

<div id="test"></div> <script type="text/javascript"> window.names=["jin kazama", "nina williams"]; window.values=[25, 37]; len=names.length for (var i = 0; i < len; i++) { document.getElementById('test').innerHTML+ ...

Is there a callback or event that can be used to ensure that getComputedStyle() returns the actual width and height values?

Currently, I find myself in a situation where I need to wait for an image to load before obtaining its computed height. This information is crucial as it allows me to adjust the yellow color selector accordingly. Question: The process of setting the yello ...

Disabled screen rotation -> hidden background

I tried implementing a media query to "lock" the orientation on my mobile site, but unfortunately, my background image isn't displaying at all. After adding the media query, I included my stylesheet using the link: CSS body { padding:0; marg ...

I have a task to execute an Ajax request to retrieve and display data from my database table. My approach involves utilizing Perl CGI and attempting to invoke a Perl script using JavaScript

Encountering an issue in the web console with an error in the document.ready function showing an uncaught syntax error unidentified identifier. This CGI script contains JavaScript that calls a Perl script (TestAj.pl) which returns JSON data. I'm atte ...

Problematic response design

On my responsive website, I am utilizing the hr tag in various places. However, I have noticed that some lines appear with different thicknesses, as shown in the example below. For a demonstration, you can view a sample on this fiddle: http://fiddle.jshel ...

What advantages does em have over px in the Zurb Foundation's responsive grid system?

The Zurb Foundation Media Queries are specified in em units: $small-range: (0em, 40em); /* 0, 640px */ $medium-range: (40.063em, 64em); /* 641px, 1024px */ $large-range: (64.063em, 90em); /* 1025px, 1440px */ $xlarge-range: (90.063em, 120em); /* 1441px, 1 ...

Creating a CSS layout with three columns where the first column's width is unspecified and the second

I am looking to create a three column layout with specific width requirements. The first column should adjust based on content, the second column should fill the space between the first and third columns, and the third column should have a fixed width. Add ...

Calling GraphQL mutations in ReactPGA

I encountered a 400 Error when making a call from the client to server, and I'm not sure where to start troubleshooting. Oddly enough, when I only include the "id" parameter in the request, everything works fine. However, as soon as I add the additio ...

How can you swap out a forward slash in vue.js?

I am facing a coding issue that I need help with: <template slot="popover"> <img :src="'img/articles/' + item.id + '_1.jpg'"> </template> Some of the numbers in my item.id contain slashes, leadin ...