How to border bottom the div content on click

user_11176682 0
Viewed 774

I am working on react to display some images at the top with labels, and when I click on any of the I mage I want to show a border-bottom.

I am successfully doing this but the issue with the styling CSS

When I am showing css it is not showing at the bottom but at all image bottom it is showing up, which is breaking the alignment

I am using bootstrap for better UI

My code

<div className="App">
  <div className="form-inline">
    {d.map((li, index) => (
       <div key={li.name} onClick={() => img_click_handler(index)}>
         <img src={li.url} alt={li.name} className="image_class" />
         <div className="label_name text-left">{li.name}</div>
         <div className={index === index_id ? "test" : ""} />
         </div>
    ))}
  </div>
</div>

CSS

.App {
  min-height: 17.6vh;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 10px #00000040;
  opacity: 1;
}

.image_class {
  height: 7vh;
  width: 4vw;
  margin-right: 5rem;
}

.label_name {
  padding-top: 1rem;
  width: min-content;
}

.test {
  border-bottom: 4px solid gray;
  background-color: red;
}

Issue

The issue is the border bottom I want to show to the end of the bar div but it is showing up to image bottom

Please check this Code sandbox for working example

** I want border bottom should come to the ending of the bar I don't know what I am doing wrong**

reactjs css html javascript
2 Answers

Here is a changed Codesandbox

I added d-flex instead of form-inline and d-flex flex-column for each column div. For the bottom line i added an auto margin with mt-auto. To have a margin on the top i added mt-3 to the image.

There may be a better solution but it works.

user_68936600

You can add absolute position to test div to achieve your requirement.

Please add following css

.test {
  border-bottom: 4px solid gray;
  background-color: red;
  position: absolute;
  bottom:0;
  width: 100%;
}
.form-inline {
  align-items: stretch;
}

Test link here: https://codesandbox.io/s/funny-jackson-ogqco

user_8224490
Related