CODEWITHSUNDEEP
htmlcssreactjs
AnonSar
AnonSar

Reputation: 706

CSS styling changing when refreshing the page

I have done some styling to an element that happens to be on one of the pages of my ReactJS application. After adding the style this how it looks (and that's how it should be actually looking):

enter image description here

When I arrive on the page for the first time and it looks like the above image but when I do a refresh on the same page, it looks like this:

enter image description here

Below is the HTML code for the above-mentioned element:

<div className={Style["search-div"]}>
   <input
      // className="form-control"
      id={Style["search-bar-input-field"]}
      type="text"
      placeholder="Search for Departments "
      aria-label="Search"
      onChange={this.processSearchBarInput}
    />

   <button className={Style["search-btn"]}>Search</button>
 </div>

Below is the CSS code for the above mentioned element:

 .search-div {
     display: inline-flex;
     justify-content: space-between;
     border: 2px solid green;
     border-radius: 1rem;
     padding: 0.5rem;
}

#search-bar-input-field {
    height: 5vh;
    width: 45rem;
    border-radius: 1rem;
    font-size: 1.25em;
    border: 0.1rem solid green;
    padding: 1rem;
}

#search-bar-input-field:focus{
    outline: 0;
    box-shadow: 0 0 0 2pt skyblue;
}

.search-btn {
    border: 0.1rem solid green;
    width: 6rem;
    border-radius: 1rem;
    font-size: 1.15rem;
    margin-left: 1rem;
}

.search-btn:focus{
    outline: 0;
}

I have used this same search bar element on other pages of my application and the same thing is happening on those pages as well. I'm really not sure why this is happening.

Any help would be highly appreciated. Thanks.

Upvotes: 1

Views: 1367

Answers (1)

AnonSar
AnonSar

Reputation: 706

So after fidgetting with the code for a bit, I made a small change to my code which fixed the issue that I was facing.

The code that I was having earlier:

<div className={Style["search-div"]}>
    <input
      id={Style["search-bar-input-field"]}
      type="text"
      placeholder="Search for Departments "
      aria-label="Search"
      onChange={this.processSearchBarInput}
    />

    <button className={Style["search-btn"]}>Search</button>
</div>

The change that I made to the above code, was that I just wrapped the input and the button tag in div as follows:

<div className={Style["search-div"]}>
  <div>
    <input
      id={Style["search-bar-input-field"]}
      type="text"
      placeholder="Search for Departments "
      aria-label="Search"
      onChange={this.processSearchBarInput}
    />

    <button className={Style["search-btn"]}>Search</button>
  </div>
</div>

And that solved the issue. Not sure though regarding the cause of the issue in the first place and how adding a div tag solved the issue. Cheers!

Upvotes: 1

Related Questions