Jquery-Ui.css Css is blocking page elements

0

My elements are arranged on my screen. However due to the use of the jquery.Tab plugin css is blocking the elements of the page.

Index.phpCode

<!doctypehtml><htmllang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script>
  $( function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.fail(function() {
          ui.panel.html(
                "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                "If this wouldn't be a demo." 
            );
        });
      }
    });
  } );
  </script>


</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="paginas/detalhes.php">Detalhes</a></li>
    <li><a href="paginas/mapas.php">Mapas</a></li>
    <li><a href="paginas/cadastrodivices.php">Cadastrar Divices</a></li>
    <li><a href="paginas/alerta.php">Alerta</a></li>
  </ul>

</div>


</body>
</html>

Code Maps.php

<div>
<div id="topo" class="linha">

    <span>Tipo<span>
    <select name="tipo"> 
        <option value="" >-------- </option>
    </select>

    <span>Agendamento</span>
    <select name="agendamento"> 
        <option value="" >-------- </option>
    </select>

    <span>Online</span>
    <select name="online"> 
        <option value="" > Todos </option>
    </select>

    <span>Vinculados</span>
    <select name="vinculados"> 
        <option value="" > Todos </option>
    </select>

    <form action="busca.php" method="post">
        <input type="text" class="search-query" placeholder="Busca">
    </form>

    <button class="btn">
        <img src="./img/search.png" width="25" />
    </button>

    <button class="btn">
        <img src="./img/edit.png" width="25" />
    </button>

    <button class="btn">
        <img src="./img/deletar.png" width="25" />
    </button>

    <button class="btn">
        <img src="./img/add.jpg" width="25" />
    </button>
</div>


<div id="detalheMapa">
    <?php include "mapas/detalheMapa.php"; ?>
</div>

<div id="painelPonto">
    <?php include "mapas/painelPonto.php"; ?>
</div>

<div id="detalhePonto">
    <?php //include "mapas/detalhePonto.php"; ?>
</div>

<div id="rodape">
    <?php //include "mapas/rodape.php"; ?>
</div>

Here the code is running: JSfidle

    
asked by anonymous 15.06.2017 / 00:02

1 answer

0

Solved it just put the class in the tag from it that had the alignment break.

.linha{
   display: inline;
}

code: JSFiddle

    
15.06.2017 / 00:42