Отобразить выпадающее меню начальной загрузки справа - PullRequest
Новая
       21

Отобразить выпадающее меню начальной загрузки справа

0 голосов
/ 11 июля 2019

Мне нужно отобразить выпадающее меню начальной загрузки справа. По умолчанию это выглядит так, когда я помещаю кнопку выбора в конец строки таблицы:

enter image description here

Но мне нужно поставить опцию в начале строки, но это выглядит так:

enter image description here

Я уже использую dropdown-menu-right, но все еще не работает. Мой код такой: 

<div class="btn-group">
    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
        <span class="fa fa-caret-down"></span>
    </a>
    <ul class="dropdown-menu dropdown-menu-right text-right">
        <?php
            echo "<li><a class=\"open-AddRec\" data-pid=\"".$pid."\" data-sku=\"".$sku."\" data-pname=\"".$pname."\" data-pdesc=\"".$pdesc."\" data-unit=\"".$unit."\"  data-uprice=\"".$uprice."\" data-srpvat=\"".$srpvat."\" data-amt=\"".$amt."\" data-cost=\"".$cost."\" data-costvat=\"".$costvat."\" data-srp=\"".$srp."\" data-supp=\"".$supp."\" data-pack=\"".$pack."\" data-cat=\"".$cat."\" data-dater=\"".$dater."\" title=\"Add Receiving Record\" \"><i class=\"fa fa-arrow-circle-down\"></i> Add Receiving Record</a></li>";
            echo "<li><a class=\"open-AddDis\" data-pid=\"".$pid."\" data-sku=\"".$sku."\" data-pname=\"".$pname."\" data-pdesc=\"".$pdesc."\" data-unit=\"".$unit."\" data-pack=\"".$pack."\"  data-dated=\"".$dated."\" data-loc=\"".$loc."\" data-cat=\"".$cat."\" data-exp=\"".$exp."\" data-cost=\"".$cost."\" data-uprice=\"".$uprice."\" title=\"Add Dispatch Record\" \"><i class=\"fa fa-arrow-circle-up\"></i> Add Dispatch Record</a></li>";
            echo "<li><a class=\"open-AdjStock\" data-pid=\"".$pid."\" data-sku=\"".$sku."\" data-pname=\"".$pname."\" data-pdesc=\"".$pdesc."\" data-qty=\"".$qty."\" data-unit=\"".$unit."\" data-srpvat=\"".$srpvat."\" data-amt=\"".$amt."\" data-costvat=\"".$costvat."\" data-srp=\"".$srp."\" data-supp=\"".$supp."\" data-suppc=\"".$suppc."\" data-pack=\"".$pack."\" data-cat=\"".$cat."\" data-rl=\"".$rl."\" data-cl=\"".$cl."\" data-loc=\"".$loc."\" data-exp=\"".$exp."\" data-cby=\"".$cby."\" data-datec=\"".$datec."\" data-disc=\"".$disc."\" data-rem=\"".$rem."\" data-cost=\"".$cost."\" data-uprice=\"".$uprice."\"    data-now=\"".$now."\" title=\"Edit this row\" \"><i class=\"fa fa-clipboard fa-fw\"></i>Stock Adjustment</a></li>";
            echo "<li><a class=\"open-EditRow\" data-pid=\"".$pid."\" data-sku=\"".$sku."\" data-pname=\"".$pname."\" data-pdesc=\"".$pdesc."\" data-qty=\"".$qty."\" data-unit=\"".$unit."\" data-srpvat=\"".$srpvat."\" data-amt=\"".$amt."\" data-costvat=\"".$costvat."\" data-srp=\"".$srp."\" data-supp=\"".$supp."\" data-suppc=\"".$suppc."\" data-pack=\"".$pack."\" data-cat=\"".$cat."\" data-rl=\"".$rl."\" data-cl=\"".$cl."\" data-loc=\"".$loc."\" data-exp=\"".$exp."\" data-cby=\"".$cby."\" data-datec=\"".$datec."\" data-disc=\"".$disc."\" data-rem=\"".$rem."\" data-cost=\"".$cost."\" data-uprice=\"".$uprice."\"   title=\"Edit this row\" \"><i class=\"fa fa-pencil fa-fw\"></i>Edit</a></li>";
        ?>
    </ul>
</div>

Я бы хотел, чтобы он отображался, как показано ниже:

enter image description here

Ответы [ 4 ]

1 голос
/ 11 июля 2019 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <section>
    <div class="container">
      <div class="row">
        <div class="col">
          <!-- Default dropright button -->
          <div class="btn-group dropbottom">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropright
            </button>
            <div class="dropdown-menu">
              <h6 class="dropdown-header">Dropdown header</h6>
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
            </div>
          </div>

          <!-- Split dropright button -->
          <div class="btn-group dropright">
            <button type="button" class="btn btn-secondary">
              Split dropright
            </button>
            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="sr-only">Toggle Dropright</span>
            </button>
            <div class="dropdown-menu">
             <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Надеюсь, вы найдете решение по этому фрагменту

0 голосов
/ 11 июля 2019

Bootstarp-4 имеет еще три ориентированных на направление класса для меню, и они .dropup, dropleft и dropright. Они работают только в том случае, если на стороне достаточно места для отображения меню. Например, .dropright работает, только если на правой стороне достаточно места.В противном случае меню отображается с левой стороны.

Активировать раскрывающиеся меню справа от элементов, добавив .dropright к родительскому элементу.- Bootstrap 

body {
  padding-top: 100px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
 <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div class="container my-5">
  <div class="row">
    <div class="col">
      <div class="dropdown">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" 
           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>
    </div>
        <div class="col">
      <div class="dropup">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" 
           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropup
        </a>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="dropright">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" 
           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropright
        </a>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="dropleft">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" 
           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropleft
        </a>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>
    </div>
   
  </div>
</div>
0 голосов
/ 11 июля 2019

Вы можете попробовать это. Для загрузки значка настройки требуется некоторое время. Надеюсь, это поможет вам. 

#ico-wrapper {
  color: #fff;
  margin-right: 10px;
}

.btn-settings {
  background-color: #95c0e2 !important;
  color: #fff !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/411a1ecc41.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="btn-group">
  <button type="button" class="btn btn-settings dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span id="ico-wrapper"><i class="fas fa-cog"></i></span>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
0 голосов
/ 11 июля 2019

Добавить класс .dropdown к родительскому div 

  <div class="btn-group dropdown">
                           <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
                                    <span class="fa fa-caret-down"></span></a>
                                    <ul class="dropdown-menu dropdown-menu-right text-right">
                                        <?php
                                        echo "<li><a class=\"open-AddRec\" data-pid=\"".$pid."\" data-sku=\"".$sku."\" data-pname=\"".$pname."\" data-pdesc=\"".$pdesc."\" data-unit=\"".$unit."\"  data-uprice=\"".$uprice."\" data-srpvat=\"".$srpvat."\" data-amt=\"".$amt."\" data-cost=\"".$cost."\" data-costvat=\"".$costvat."\" data-srp=\"".$srp."\" data-supp=\"".$supp."\" data-pack=\"".$pack."\" data-cat=\"".$cat."\" data-dater=\"".$dater."\" title=\"Add Receiving Record\" \"><i class=\"fa fa-arrow-circle-down\"></i> Add Receiving Record</a></li>";
                                        echo "<li><a class=\"open-AddDis\" data-pid=\"".$pid."\" data-sku=\"".$sku."\" data-pname=\"".$pname."\" data-pdesc=\"".$pdesc."\" data-unit=\"".$unit."\" data-pack=\"".$pack."\"  data-dated=\"".$dated."\" data-loc=\"".$loc."\" data-cat=\"".$cat."\" data-exp=\"".$exp."\" data-cost=\"".$cost."\" data-uprice=\"".$uprice."\" title=\"Add Dispatch Record\" \"><i class=\"fa fa-arrow-circle-up\"></i> Add Dispatch Record</a></li>";
                                       echo "<li><a class=\"open-AdjStock\" data-pid=\"".$pid."\" data-sku=\"".$sku."\" data-pname=\"".$pname."\" data-pdesc=\"".$pdesc."\" data-qty=\"".$qty."\" data-unit=\"".$unit."\" data-srpvat=\"".$srpvat."\" data-amt=\"".$amt."\" data-costvat=\"".$costvat."\" data-srp=\"".$srp."\" data-supp=\"".$supp."\" data-suppc=\"".$suppc."\" data-pack=\"".$pack."\" data-cat=\"".$cat."\" data-rl=\"".$rl."\" data-cl=\"".$cl."\" data-loc=\"".$loc."\" data-exp=\"".$exp."\" data-cby=\"".$cby."\" data-datec=\"".$datec."\" data-disc=\"".$disc."\" data-rem=\"".$rem."\" data-cost=\"".$cost."\" data-uprice=\"".$uprice."\"     data-now=\"".$now."\" title=\"Edit this row\" \"><i class=\"fa fa-clipboard fa-fw\"></i>Stock Adjustment</a></li>";
                                       echo "<li><a class=\"open-EditRow\" data-pid=\"".$pid."\" data-sku=\"".$sku."\" data-pname=\"".$pname."\" data-pdesc=\"".$pdesc."\" data-qty=\"".$qty."\" data-unit=\"".$unit."\" data-srpvat=\"".$srpvat."\" data-amt=\"".$amt."\" data-costvat=\"".$costvat."\" data-srp=\"".$srp."\" data-supp=\"".$supp."\" data-suppc=\"".$suppc."\" data-pack=\"".$pack."\" data-cat=\"".$cat."\" data-rl=\"".$rl."\" data-cl=\"".$cl."\" data-loc=\"".$loc."\" data-exp=\"".$exp."\" data-cby=\"".$cby."\" data-datec=\"".$datec."\" data-disc=\"".$disc."\" data-rem=\"".$rem."\" data-cost=\"".$cost."\" data-uprice=\"".$uprice."\"    title=\"Edit this row\" \"><i class=\"fa fa-pencil fa-fw\"></i>Edit</a></li>";
                                        ?>
                                    </ul>
                                </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...