Waves Effect Causing Weird Issues With My Input Boxes


Topic: Waves Effect Causing Weird Issues With My Input Boxes

Christopher Stuart asked 7 years ago

I'm just trying to put a simple search box in my navbar.

For some reason the right hand side of the input box is not appearing and when i click the waves effect removes the bottom border.

In dev tools if i remove  the waves class, it doesn't have these issues.

This is code in right hand side of my nav where you can see the search form.

IS there a way to remove waves effect on an input--or is there something i'm doing wrong here?

<ulclass="navbar-nav navbar-right">
<liclass="nav-item mr-4">
<formmethod="get"action="{% url 'deals:deal-search' %}"accept-charset="utf-8"role="search">
<inputclass="form-control"type="search"placeholder="Search"name="q"id="searchbox"type="text">
</form>
</li>
{% if not user.is_authenticated %}
<liclass="nav-item"><aclass="nav-link"aria-pressed="true"href="{% url 'accounts:sign_in' %}">Login</a></li><liclass="nav-item"><aclass="nav-link"style="color:lightgrey;"aria-pressed="true"href="{% url 'accounts:sign_up' %}">Register</a></li>
{% else %}
<liclass="nav-item btn-group mt-1 mr-3">
<aclass="nav-link dropdown-toggle"id="navbarDropdownMenuLink"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"href="{% url 'accounts:profile' %}">
<iclass="fas fa-user-circle fa-lg"></i>
</a>
<divclass="dropdown-menu dropdown-menu-right"aria-labelledby="navbarDropdownMenuLink">
<aclass="dropdown-item"href="{% url 'accounts:profile' %}">My Account</a>
<aclass="dropdown-item"href="{% url 'accounts:favorites' %}">My Favorites</a>
<aclass="dropdown-item"href="{% url 'accounts:sign_out' %}">Sign Out</a>
</div>
</li>

{% endif %}

</ul>


Mikołaj Smoleński staff answered 7 years ago

Hello, I copied Your code and everything works fine. Do You have the last version of MDB (4.5.0)? If yes, please share here the whole navbar code. Regards

Christopher Stuart commented 7 years ago

okay thanks i upgraded to 4.5 from 4.4 and it seems to have fixed the issue..thank you!

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No