Giving border-right causing miss alignment issue

Question

I am making list with bootstrap-Accordion using react-bootstrap, and to the selected one I am giving background color and some border left

Issue is

When I am doing this so at the time of active bar the text is shifting to right, i.e some miss alignment is happening, I don't know what I need to do

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>

);

Code sand box code

Answer 1

Borders factor into an element’s size, so if you change a border width it’s going to affect the layout. You have a couple of options:

1. Set the border width to a consistent value and switch the color from transparent to your active color.

.item {
  border: 4px solid transparent;
}

.item.active {
  border-color: red;
}

2. Use box-shadow instead of border, which does not change the element’s size and when used with zero blur can often achieve the same effect as a border. Possible snags here with z-index if shadows aren’t inset. (Subsequent elements are in front and may obscure the shadow of the previous element.)

.item.active {
  box-shadow: inset 4px 0 0 red;
}

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

• The border example is slightly wider due to the invisible 4px border.
• The first (non-inset) box-shadow example places the "border" outside the element.
• The inset box-shadow example places 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>