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>
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).
– roger roger
@rogerroger takes the class
centeredof the table, and see if that’s what you need, so the texts will be aligned to the left– hugocsl
Right, the text is left, but not vertically aligned at the top of the cell, which is the big problem.
– roger roger
@rogerroger this is pq by default Materialize puts a
vertical-align: middle;on TD and TH, so you need to switch tovertical-align: top;. You’ll have to put in your CSS something liketd, th {vertical-align: top !important;}to ensure top alignment as you want– hugocsl
I changed the CSS to apply materialize formatting, but it didn’t work. See the PAGE CSS code above.
– roger roger
@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.
– hugocsl
Exactly what I needed. It worked fine, and I am running in separate files. Thank you very much.
– roger roger