CODEWITHSUNDEEP
javascriptjqueryhtmlcsssemantic-ui
user1946932
user1946932

Reputation: 602

Semantic dropdown 100% width (left=0px)?

http://jsfiddle.net/gL1xynzr/3/ works fine for the dropdown menu to be 100% of the screen width on mobile phones. 

<div id="heroes-dropdown" class="ui dropdown">
    <div class="text">Heroes</div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <a class="item"><i class="edit icon"></i> Edit Profile</a>
        <a class="item"><i class="globe icon"></i> Choose Language</a>
        <a class="item"><i class="settings icon"></i> Account Settings</a>
    </div>
</div>

.menu 
{ 
    width:100vw;
    max-width:440px;
}

However if I have other dropdowns to the left of the current one, the menu doesn't start at left=0px, e.g. http://jsfiddle.net/no7ta6zc/3/

<div id="heroes-dropdown2" class="ui dropdown">
    <div class="text">Heroes2</div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <a class="item"><i class="edit icon"></i> Edit Profile</a>
        <a class="item"><i class="globe icon"></i> Choose Language</a>
        <a class="item"><i class="settings icon"></i> Account Settings</a>
    </div>
</div>

<div id="heroes-dropdown3" class="ui dropdown">
    <div class="text">Heroes3</div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <a class="item"><i class="edit icon"></i> Edit Profile</a>
        <a class="item"><i class="globe icon"></i> Choose Language</a>
        <a class="item"><i class="settings icon"></i> Account Settings</a>
    </div>
</div>

Does anyone know how I can have the menu's width fill the whole screen for any of the dropdowns?

Upvotes: 1

Views: 194

Answers (1)

Pete
Pete

Reputation: 58432

You need to cancel the relative position of your dropdown div and then wrap all the dropdowns within another div and make that relative. Absolutely positioned items will be positioned based on the first positioned ancestor it comes to:

$('.ui.dropdown').dropdown();
.menu {
  Width: 100vw;
  max-width: 440px;
}

.dropdown-wrapper {
  /* make the wrapper relative */
  position: relative;
}

.dropdown-wrapper .ui.dropdown {
  /* cancel relative position if these divs */
  position: static;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.js"></script>
<!-- add this div -->
<div class="dropdown-wrapper">
  <div id="heroes-dropdown" class="ui dropdown">
    <div class="text">Heroes</div>
    <i class="dropdown icon"></i>
    <div class="menu">
      <a class="item"><i class="edit icon"></i> Edit Profile</a>
      <a class="item"><i class="globe icon"></i> Choose Language</a>
      <a class="item"><i class="settings icon"></i> Account Settings</a>
    </div>
  </div>

  <div id="heroes-dropdown2" class="ui dropdown">
    <div class="text">Heroes2</div>
    <i class="dropdown icon"></i>
    <div class="menu">
      <a class="item"><i class="edit icon"></i> Edit Profile</a>
      <a class="item"><i class="globe icon"></i> Choose Language</a>
      <a class="item"><i class="settings icon"></i> Account Settings</a>
    </div>
  </div>

  <div id="heroes-dropdown3" class="ui dropdown">
    <div class="text">Heroes3</div>
    <i class="dropdown icon"></i>
    <div class="menu">
      <a class="item"><i class="edit icon"></i> Edit Profile</a>
      <a class="item"><i class="globe icon"></i> Choose Language</a>
      <a class="item"><i class="settings icon"></i> Account Settings</a>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions