의미 팝업 목록 너비가 너무 작습니다.

Question

나는 semantic 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> 

자바 스크립트 :

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

JS 바이올린 : https://jsfiddle.net/jfk4wkb1/2/

내가 JS 바이올린에 물건을 넣어했지만,이 팝업에서 한도오고,하지만 내 지역에 있지 않습니다 환경 팝업은 괜찮지 만 수직으로 압착됩니다. 이처럼

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' 
     });