Pop up extension Chrome cutting text

Asked

Viewed 30 times

0

Hail! I’m doing a pop up for my Chrome extension but am finding a problem. When I click on the dropdown, the text is cut:

Dropdown cortado

I believe it’s because he’s going to right but Chrome does not allow expansion to the right, as it is coming at the end of the screen. , I did a lot of research on how to send the submenu to the left, tried to use float-right and other things but without result

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">

  <title>Opções</title>

  <!-- Bootstrap css -->
  <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">

  <!-- Bootstrap js -->
  <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>

  <!--css e js locais-->
  <link rel="stylesheet" href="options.css">
  <script src="options.js"></script>
</head>

<body>
  <!--container para automatizar o resize-->
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="form-group">
          <!--Drop Down de seleção-->
          <div class="dropdown pull-left">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Ação
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <button id="btnLixeiraAnalytics" class="dropdown-item"
                onclick="salvarConfiguração('LixeiraAnalytics')">Limpar Lixeira Analytics</button>
              <button id="btnArtigoDesk" class="dropdown-item" onclick="salvarConfiguração('AtualizarArtigo')">Atualizar
                Artigo</button>
              <button id="btnDesativar" class="dropdown-item"
                onclick="salvarConfiguração('LixeiraAnalytics')">Desativado</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

In short, the question is: What I do to make sure the dropdown menu doesn’t get cut?

html css twitter-bootstrap google-chrome-extension

1 answer

0


After much research I understood the problem. The bootstrap tries, in an intelligent way, to identify where it can expand. However, the Chrome extension increases or decreases in size dynamically after the bootstrap is executed, so the text is cut. To circumvent this set the size of the button that activates the drop down to take up a larger space and so the size that changes dynamically is just the height.

<head>
<!-- Bootstrap css -->
<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">
<!-- Bootstrap js -->
<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>
<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <!--Drop Down de seleção-->
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle btn-block" type="button" id="dropdownMenuButton" data-toggle="dropdown"
    aria-haspopup="true" aria-expanded="false">
    Ação
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <button id="btnLixeiraAnalytics" class="dropdown-item btn-sm">Limpar Lixeira Analytics</button>
    <button id="btnArtigoDesk" class="dropdown-item btn-sm">Atualizar Artigo</button>
    <button id="btnDesativado" class="dropdown-item btn-sm">Desativado</button>
  </div>
</div>

Browser other questions tagged html css twitter-bootstrap google-chrome-extension

You are not signed in. Login or sign up in order to post.