Search code examples
csshtmltwitter-bootstrapbootstrap-4materialize

materializecss search bar is not working properly in chrome

I was creating the design of a website using materializecss with no problems in firefox, until i checked it again in Chrome.

Well, everything is working fine except the search bar, i am using the navbar mentioned in the documentation so i guess nothing is wrong with the code, and it works in firefox.

Firefox Screenshot:

enter image description here

Chrome Screenshot:

enter image description here

HTML code:

  <form class="hide-on-med-and-down">
    <div class="input-field">
      <input id="search" type="search" required>
      <label class="label-icon" for="search"><i class="material-icons">search</i></label>
      <i class="material-icons">close</i>
    </div>
  </form>

I did change the CSS of the search bar to this (i found that in a solution to a similar problem in here):

nav .nav-wrapper form, nav .nav-wrapper form .input-field{
height: 100%;
}
Solution

  • css:

    .nav-wrapper {
  width:100%;
  background:blue;
  /* this will automatically make the items it contains stretch verically */
  display:flex; 
  justify-content:space-between;
}

/* the form is in your float right unordered list (ul) so add this to fix the chrome layout issue */
.nav-wrapper ul[class="right"] {
  display:flex;
}

form {
  /* don't let the blue bleed through */
  background:white;
}

 /* if you want it to be responsive pick your number and add this css */
@media only screen and (max-width: 480px) {
  flex-direction:column;
}

    link about flex layouts: https://css-tricks.com/snippets/css/a-guide-to-flexbox/