Materialize css


#1

Hi,

I’m using a dynamic table (https://puravidaapps.com/table.php)
With the HTML doc, I find how to change the table form from Materializecss.com (stripered or bordered …) at the line :

    doc.getElementById("myTable").getElementsByTagName('table')[0].className = "bordered";

But I don’t know how to change the differents colors. Where do I have to write “card-panel teal lighten-2” if I want to change the background color for 1 line over 2 ?

Thank you


#2

No body has an idea?


#3

you probably will have more luck asking this question in a materializecss forum…
Taifun


#4

To help everyone :
That was only css problem!
In the html file you should add in the header : <style> </style>

Inside it you can add everything you want to do to your table
Fontsize, padding, text-align, border… (you can find everything on google)

If you write th => it means the first line of the table
and td => everything else

If you want to change the color of one line over two just add:
tr:nth-child(even) {background-color: #f2f2f2}

Hope that can help… I didn’t success for a long… but now it’s OK!!!


#5

Hello, I take the opportunity to ask you something that seems very difficult to achieve, can you show me how to make fixed (freeze) the header line of the table? thank you in advance


#6

I did not find the answer yet… tell me if you do


#7

as already suggested earlier

you probably will have more luck asking this question in a materializecss forum…

Taifun


#8

I have the code but I do not know where to place it, especially since it’s jquery it seems a little complicated for me:
$(‘selector’).fixedHeaderTable({ footer: true, cloneHeadToFoot: true, fixedColumn: false });


#9

this is a jquery solution, but the example we are talking about https://puravidaapps.com/table.php does not use jquery… so this will not help here…

feel free to adjust the example to your needs, use jquery and add your solution… then post your solution here… thank you

Taifun


#10

This is simple with pure css.
to set the table header,
just add the property “position: stick”; for the css selector

.striped thead tr th {position: sticky;}

    /*header fixed and color*/
        .striped thead tr th {
          box-shadow: 0 3px 2px 0 rgba(0,0,0,0.14), 0 0px 0px 0px rgba(0,0,0,0.12), 0 0px 0px 0 rgba(0,0,0,0.2);
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            background-color: #3F51B5;
            color: white;
            border-radius: 0px;
        }

To change the table row colors, even and odd:

/*color row even*/
table.striped>tbody>tr:nth-child(even) {
   background-color: #78909C;
    color: black;
}
/*color row odd*/
table.striped>tbody>tr:nth-child(odd) {
    background-color: #90A4AE;
    color: black;
}


obs: add in the header : <style> </style>


#11

thank you, I have applied codes but Unfortunately for me it does not work, the titles of the header parade always :confounded:


#12

Sorry, webview compatibility issues
add to css
position: -webkit-sticky;
works like charm

.striped thead tr th {
   box-shadow: 0 3px 2px 0 rgba (0,0,0,0.14), 0 0px 0px 0px rgba (0,0,0,0.12), 0 0px 0px 0 rgba (0,0,0,0,2);
       position: sticky;
position: -webkit-sticky;
       top: 0;
     background-color: # 3F51B5;
     color: white;
     border-radius: 0px;
}

obs: tested on android 5.1, 7.1, 8.1


#13

excellent! thank you!
Taifun


#14

Thanks for your work!

Unfornulately it does not seems to work for me…
May be you can share html file ? or your aia ?

Thank you


#15

To make it work, you have to remove it: .striped
Try with this:


#16

What model of your smartphone?
table3_with_header.aia (44,3 KB)


#17

@ERGY Merci
@Thiago_Kamikaze_Ofic Thanks!

I found the problem!
My Web Viewer was in a scroll arrangement (because I thought that was necessary… :man_facepalming:)

It is solved for me !


#18

And do you have any idea :
How to freeze the first column ?
Is it also possible ?

Thanks :slight_smile:


#19

add class="" class = “responsive-table” to your script

Add color to < style>:

table.responsive-table thead {
    color: white; 
    background-color: #3F51B5;
}

table3_responsive-table.aia (45,8 KB)

read https://materializecss.com/table.html