Question

我有一个下拉菜单，语义ui覆盖了语义ui下拉菜单，尽管我删除了与semantic-ui相关的每个类。它插入一个div来包含整个并应用语义样式。我的问题是语义下拉很宽，我需要它很小，所以我尝试了很多变通方法来改变大小或一起删除语义控制。似乎唯一有用的就是使用Jquery来删除语义插入的元素。这是一种糟糕的方式，我的团队也对此表示谴责。

为了给你一些上下文，我正在更改导航栏以使其响应，这就是为什么我从导航栏中删除语义类并使用自定义css类并且我使用它Vue.js

这是源下拉代码：

import sys
from spotipy.oauth2 import SpotifyClientCredentials
import spotipy
import pprint

if len(sys.argv) > 1:
    search_str = sys.argv[1]
else:
    search_str = 'Radiohead'

client_id = "your_client_id"
client_secret = "your_client_secret"

client_credentials_manager = SpotifyClientCredentials(client_id=client_id, client_secret=client_secret)
sp = spotipy.Spotify(client_credentials_manager=client_credentials_manager)

result = sp.search(search_str)
pprint.pprint(result)

下面是我在chrome中使用inspect获得的实际代码：

<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>

用于删除元素的Jquery代码：

<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>

应该应用的CSS而不是 -

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

Answer 1

我找到的解决方案如下。解决方案是将下拉菜单放在具有一定高度的div中，并给出一类“流体”来填充容器的大小。这将使它可以调整大小。

  <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>

积分归Tarek AlQaddi

语义覆盖我的下拉菜单，使其变大

1 个答案: