CODEWITHSUNDEEP
javascriptjqueryhtmlcsssemantic-ui
Mazen Sharkawy
Mazen Sharkawy

Reputation: 439

Semantic overriding my dropdown menu making it big

I have a drop down menu that semantic-ui overrides as a semantic-ui drop down menu although i removed every class related to semantic-ui. It inserts a div to contain the whole and apply semantic styling. My problem is that semantic drop down is wide and i need it to be small, so I tried many workarounds to change the size or remove semantic's control all together. The only thing that seemed to work was using Jquery to remove the elements that semantic inserts. Which is a lousy way to do it, and which also my team condemned.

To give you some context, I am changing the navbar to make it responsive, that's why i'm removing semantic classes from the navbar and using custom css classes and I'm using it with Vue.js

Here's the source drop down code: 

<a style="padding:6px 0px !important;">
          <select class="language-select" id="locale-dropdown" v-model="locale">
            <option value="en">En</option>
            <option value="ar">ع</option>
          </select>
      </a>

Below is the actual code i got by using inspect in chrome:

<a data-v-65731896="" style="padding: 6px 0px !important;">
  <div class="selection ui dropdown" tabindex="0">
    <select data-v-65731896="" id="locale-dropdown" class="language-select">
      <option data-v-65731896="" value="en">En</option>
      <option data-v-65731896="" value="ar">ع</option>
    </select>
    <i class="dropdown icon"></i>
    <div class="text">En</div>
    <div class="menu" tabindex="-1">
      <div class="item active selected" data-value="en">En</div>
      <div class="item" data-value="ar">ع</div>
    </div>
  </div>
</a>

Jquery code used to remove elements:

    mounted () {    
    $('.ui.search.dropdown.selection').removeClass('ui search dropdown selection')
        $('.search').remove()
        $('.text').remove()
        $('.menu').remove()
        $('.dropdown.icon').remove()
    }

css that should be applied -but doesn't-:

.language-select{
    background-color:#fff;
    padding: 5px 5px;
    width: 20px;
  }

Upvotes: 1

Views: 1102

Answers (1)

Mazen Sharkawy
Mazen Sharkawy

Reputation: 439

The solution I found is as follows. The solution is to put the drop down menu inside a div with certain height and give the a class of 'fluid' to fill the container's size. And this would make it resizable.

  <a style="padding:6px 0px !important;">
        <div style="width: 70px">
          <select style="background-color:#e3e3e3; padding: 5px 5px;" id="locale-dropdown" class="fluid" v-model="locale">
            <option value="en">En</option>
            <option value="ar">ع</option>
          </select>
        </div>
      </a>

Credits go to Tarek AlQaddi

Upvotes: 1

Related Questions