セマンティックポップアップリストの幅が小さすぎます

Question

私はセマンティックUIで作業しており、メニューバーの通知メニューの実装に固執しました。

私はリストを使ってポップアップをセットアップできますが、私は縦に絞った小さなリスト項目を取得しています。私はそれらを水平にリラックスさせる必要があります。

以下は、私が協力しているhtmlです。

<div class="ui fixed stackable menu"> 
    <a class="item" href="index.php"> <img src="logo.png" class="image"></a> 
    <a class="item">My Project</a> 
    <div class="right menu"> 

    <div class="item"> 
    <i class="bell outline icon"></i> 
    <div class="ui teal circular mini label">4</div> 
    <div class="ui wide notification popup bottom transition "> 
    <div class="ui link celled selection list"> 
     <div class='item'> 
     <div class='content'> 
      <a class='header'>Millan kumar</a> 
      <span class='time'>2 hrs ago</span>   
      <div class='description'>Commented on <a><b>Your Post </b></a> with <a><b>Following content</b></a></div> 
      <div class='extra'>Thanks you for your support</div> 
     </div> 
     </div> 
    </div> 

    </div> 
</div> 

<a class="item" href="profile.php">Profile</a> 
<a class="item" href="logout.php">Logout</a> 
</div> 
</div> 

Javascriptを：

$('.teal.label') 
     .popup({ 
     on: 'click' 
     }); 

JSフィドル： https://jsfiddle.net/jfk4wkb1/2/

私はJSフィドルに物事を入れて試してみましたが、そこにポップアップでさえも来ていないが、私の地元で環境ポップアップはOKですが、それは垂直に絞られています。このよう

Answer 1

：Fiddle link

あなたのフィドル外部リソースにjqueryのを追加しませんでした。また、私はいくつかのパディングと幅が良いように追加します。

<div class="ui link celled selection list" style ="padding: 20px;width: 300px;"> 

HTML：

<div class="ui fixed stackable menu"> 
     <a class="item" href="index.php"> <img src="logo.png" class="image"></a> 
     <a class="item">My Project</a> 
     <div class="right menu"> 

     <div class="item"> 
     <i class="bell outline icon"></i> 
     <div class="ui teal circular mini label">4</div> 
     <div class="ui wide notification popup bottom right transition "> 
     <div class="ui link celled selection list" style ="padding: 20px;width: 300px;"> 
      <div class='item'> 
      <div class='content'> 
       <a class='header'>Millan kumar</a> 
       <span class='time'>2 hrs ago</span>   
       <div class='description'>Commented on <a><b>Your Post </b></a> with <a><b>Following content</b></a></div> 
       <div class='extra'>Thanks you for your support</div> 
      </div> 
      </div> 
     </div> 

     </div> 
    </div> 

JS：

$('.teal.label') 
     .popup({ 
     on: 'click' 
     });