Twitter Bootstrap Question posted in

Twitter bootstrap – Materialize select input shows two carets

I’ve just integrated Materialize into my Rails project through the gem 'materialize-sass'. For some reason, the select inputs are showing two carets instead of 1.

enter image description here

The code for the select input is basically a fork of the example on their website.

<div class="input-field">
    <select name="tutor_profile[dob_month]" id="tutor_profile_dob_month">
        <option value="" disabled selected>Choose your month</option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
    <label>Birthday</label>
</div>

I’ve tried tweaking the CSS styling for the select button in the Developers Console with no success. There are no additional stylings to any of the elements within the select input.

Other CSS frameworks I’m using are bootstrap, bootstrap-tagsinput, twitter-typeahead, and jquery-ui. I was wondering if anyone has experience something similar.

Tags:

4

Answers


  1. 0

    I have exactly same problem.
    The reason is we combining bootstrap and materializecss fm, if you unload one of them, works right.
    But the solution for them work together, i dont know =(

    Login or Signup to reply.
  2. 0

    This is not the best answer. But i did this with JQuery.
    I read the html generated in the console, then i noticed that those arrows are in one $(".caret").hide() Try this!

    Login or Signup to reply.
  3. 0

    Short answer:

    Add this to your css

    .caret {
  border-color: transparent !important;
}

    Long answer:

    Bootstrap implements the caret using css borders (right, top, left),
    and materializecss implements the caret using the text “▼” as the inner html of the element.

    Forcing a transparent border will cause bootstrap’s caret to disappear, and will solve your problem.

    If you insist on using bootstrap’s caret, you will have to edit materializecss’s javascript files, which is not recommended.

    Login or Signup to reply.
  4. 0

    Remove the previous span with "caret" class before executing material_select,
    this will restart the select tag in materializecss:

    $(".caret").remove();
$('select').material_select();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search