Page alignment css materialize

Asked

Viewed 353 times

0

I’m using materialize as a framework for an application. I’m having a little problem with its interface. I cannot make the table that displays the data from the database (a gdocs spreadsheet), located at the bottom of the screen (with borders) align with the other fields (of registration) as shown below. I’ve changed the css file in every way and it doesn’t align. Below are the materialize files that display the page and the css file. And in this link is the project, with the spreadsheet Spreadsheet and all related codes (GAS and html/materialize). https://docs.google.com/spreadsheets/d/1GQx3CRWF2KQpQcJaENfEX5HdHG7PhP2waziRy5fXCmo/edit#gid=0

PAGE MATERIALIZE:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <?!= include("page-css"); ?>

  </head> 
  <body>

  <div class="container">
  <h1><?= title; ?></h1>

   <div class="row">
      <div class="input-field col s6">
         <select id="app">          
          <option disabled selected>Auditor Responsável</option>
          <?!= list; ?>
         </select>
        <label>Auditor</label>
      </div>  
      <div class="input-field col s6">
      <input id="prefDate" type="text" class="datepicker">
      <label for="prefDate" class="active">Prazo(se houver)</label>
    </div>

  <div class="row">
        <div class="input-field col s6">
          <input placeholder="Ex.:Achado 1.1. Falhas nas contratações de TI" id="fn" type="text" class="validate"> 
          <label for="fn">Achado</label>
        </div>
        <div class="input-field col s6">
          <input placeholder="Ex.: Discorda-se da conclusão de auditoria pelas razões: " id="ln" type="text" class="validate">
          <label for="ln">Manifestação do Auditado</label>
        </div>
      </div>  <!-- Close row -->


     </div><!-- Close row -->             

       <div class="row">
        <div class="input-field col s6">
          <input id="zip" type="text" class="validate"> 
          <label for="zip">Conclusão de Auditoria</label>
        </div>
        <div class="input-field col s6">
          <input disabled id="est" type="text" class="validate">
          <label for="est" class="active">Estimativa</label> 
        </div>
      </div>  <!-- Close row -->

      <div class="row">
          <button id="btn" class="waves-effect waves-light btn-small"><i class="material-icons left">access_alarm</i>Enviar</button>

      </div><!-- Close row -->

  <div class="container">

  <div class="row">
 <table class = "bordered striped centered highlight responsive-table"> <h5> DADOS CADASTRADOS </h5>
        <thead>
          <tr>
              <th>ACHADO</th>
              <th>MANIFESTAÇÃO AUDITADO</th>
              <th>CONCLUSÃO AUDITORIA</th>
              <th>ESTIMATIVA</th>
              <th>PRAZO</th>

          </tr>
        </thead>

        <tbody><script><? var data = getData(); ?></script>
        <? for (var i = 1; i < 100; i++) { ?>
          <tr>
            <td><?= data[i][1] ?></td>
            <td><?= data[i][2] ?></td>
            <td><?= data[i][3] ?></td>
            <td><?= data[i][4] ?></td>
            <td><?= data[i][5] ?></td>
          </tr><?}?>
        </tbody>
      </table>

 </div>
      </div>  <!-- Close row -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

   <?!= include("page-js"); ?>

  </body>

</html>

PAGE CSS

<style> 
    .table-display th {
    height: 20px;
    font-size:13px;
    text-align:center;
  vertical-align: top !important;}

.table-display td {
    height: 20px;
    font-size:13px;
    text-align:center;
  vertical-align: top !important;}

 </style>

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

javascript css materialize google-app-engine

1 answer

0


Your problem is that you put a div with class container with the form etc, and within that container, you put another div with class container with the table... you put two container, one inside the other, so it gave problem!

Note that the official documentation says that the container is about 70% the width of the screen. So when you put a container inside the other, the container from the inside is about 70% of the width of the container father...

The container class is set to ~70% of the window width. It helps you center and contain your page content. We use the container to contain our body content.

Source: https://materializecss.com/grid.html

Just removing the class container of div that has the table within already resolved.

inserir a descrição da imagem aqui

Run on "full page"

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <style>
    table {
    border-collapse:collapse;
    border:4px solid #CCC;
}

#tabela tr {
    border:4px solid #CCC;
}

#tabela td {
    width:4000px;
    height:40px;
    padding:100px;
    border:4px solid #CCC;
}

/*alinha conteúdo da tabela no topo*/
td, th {vertical-align: top !important;}

    </style>

  </head> 
  <body>

  <div class="container">
  <h1>h1</h1>

   <div class="row">
      <div class="input-field col s6">
         <select id="app">          
          <option disabled selected>Auditor Responsável</option>
          <?!= list; ?>
         </select>
        <label>Auditor</label>
      </div>  
      <div class="input-field col s6">
      <input id="prefDate" type="text" class="datepicker">
      <label for="prefDate" class="active">Prazo(se houver)</label>
    </div>

  <div class="row">
        <div class="input-field col s6">
          <input placeholder="Ex.:Achado 1.1. Falhas nas contratações de TI" id="fn" type="text" class="validate"> 
          <label for="fn">Achado</label>
        </div>
        <div class="input-field col s6">
          <input placeholder="Ex.: Discorda-se da conclusão de auditoria pelas razões: " id="ln" type="text" class="validate">
          <label for="ln">Manifestação do Auditado</label>
        </div>
      </div>  <!-- Close row -->


     </div><!-- Close row -->             

       <div class="row">
        <div class="input-field col s6">
          <input id="zip" type="text" class="validate"> 
          <label for="zip">Conclusão de Auditoria</label>
        </div>
        <div class="input-field col s6">
          <input disabled id="est" type="text" class="validate">
          <label for="est" class="active">Estimativa</label> 
        </div>
      </div>  <!-- Close row -->

      <div class="row">
          <button id="btn" class="waves-effect waves-light btn-small"><i class="material-icons left">access_alarm</i>Enviar</button>

      </div><!-- Close row -->



  <div class="row">
 <table class = "bordered striped highlight responsive-table"> <h5> DADOS CADASTRADOS </h5>
        <thead>
          <tr>
              <th>ACHADO</th>
              <th>MANIFESTAÇÃO AUDITADO</th>
              <th>CONCLUSÃO AUDITORIA</th>
              <th>ESTIMATIVA</th>
              <th>PRAZO</th>

          </tr>
        </thead>

        <tbody>
            <!-- <script><? var data = getData(); ?></script>
        <? for (var i = 1; i < 100; i++) { ?> -->
          <tr>
            <td>lorem</td>
        <td>Lorem ipsum dolor sit.</td>
        <td>Lorem ipsum dolor sit amet consectetur.</td>
        <td>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet.</td>
        <td>123</td>
          <!-- </tr><?}?> -->
          </tr>
        </tbody>
      </table>


      </div>  <!-- Close row -->

</div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!--  <?!= include("page-js"); ?> -->

  </body>

</html>

  • It seems to have corrected. There is only one detail: does the table’s contents have no relation to its width? It still appears all centered and in the middle of each table cell, rather than at the top. The "Find" column, for example, has a content, but as it is in the middle of the cell, it doesn’t even appear on the table, only if I roll it down. Note: it is formatted as at the top in the vertical alignment of the spreadsheet Spreadsheet, which is the data source See image of the original content (edited).

  • @rogerroger takes the class centered of the table, and see if that’s what you need, so the texts will be aligned to the left

  • Right, the text is left, but not vertically aligned at the top of the cell, which is the big problem.

  • @rogerroger this is pq by default Materialize puts a vertical-align: middle; on TD and TH, so you need to switch to vertical-align: top;. You’ll have to put in your CSS something like td, th {vertical-align: top !important;} to ensure top alignment as you want

  • I changed the CSS to apply materialize formatting, but it didn’t work. See the PAGE CSS code above.

  • @rogerroger edited the response code, run it on whole page to see if this is the result you need, in CSS I left commented where I applied the style to align the content at the top.

  • Exactly what I needed. It worked fine, and I am running in separate files. Thank you very much.

Show 2 more comments

Browser other questions tagged javascript css materialize google-app-engine

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