Apply responsiveness

Question

Apply responsiveness

Asked 5 years, 6 months ago

Viewed 76 times

0

As we can see in the first picture with the extended screen is right but when I resize the screen the tables leave the organization, can help me to keep the tables resizing according to the screen size?

{
html {
    margin: 0;
    height: 100px;
}



body {
    font-family: "Verdana",Times,serif;
    background: #f8f8f8;
    height: 55em;
    margin: 0.5em;
    font-size: 15px;
}

textarea {
    width: 90%;
    height: 100%;
    margin-left: 20%;
    font-family: "Verdana", Times, serif;
    font-size: 100px;
}

img {
    border-radius: 10px;
    padding: 7px;
    max-width: 100px;
    max-height: 70px;
    width: auto;
    height: auto;
    margin-left: 3.8%;
}


.header {
    width: 100%;
    background: #ffffff;
    height: 4.5em;
    box-shadow: 1px 1px 1px rgba(100, 100, 100, 0.49);
    margin: auto;
}


.menu {
    border-radius: 5px;
    width: 100%;
    background: rgb(00, 87, 147);
    height: 2.5em;
    margin-bottom: 1em;
    box-shadow: 1px 3px 5px 1px rgba(0,0,0,0.37);
    color: #d5d1d1;
}

#usuario {
    line-height: 3.5em;
    margin-right: 7em;
    font-size: 0.8em;
    width: 10%;
    height: 100%;
    float: right;
    display: inline-flex;
}

.menu ul {
    padding: 2px;
    margin-bottom: 0px;
    margin-left: 6.3%;
    margin-top: 0px;
    float: left;
}

    .menu ul li {
        display: inline-flex;
        color: white;
    }

        .menu ul li a {
            padding: 8px 20px;
            color: #d5d1d1;
            text-decoration: none;
        }

            .menu ul li a:hover {
                color: #fff;
                background: #4698ca;
                border-top-color: #5db1e0 !important;
                border-left-color: #5db1e0;
            }



.content {
    background: #ffffff;
    width: 100%;
    height: 46em;
    margin: 0.5em;
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.5);
}


.content2 {
    background: #ffffff;
    width: 100%;
    height: 1em;
    margin: 1em auto;
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.5);
}


.footer {
    width: 98%;
    background: #ffffff;
    height: 13%;
    margin-left: 1em;
    margin-bottom: 0em;
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.5);
    color: #333333;
}

.button {
    background-color: rgb(00, 87, 147);
    border-radius: 4px;
    color: white;
    padding: 5px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    width: 173px;
}

.button2 {
    background-color: rgb(00, 87, 147);
    border-radius: 4px;
    color: white;
    padding: 5px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    width: 237px;
}

#buttonConsulta {
    background-color: rgb(00, 87, 147);
    border-radius: 4px;
    color: white;
    padding: 5px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    width: 237px;
    margin-left: 5%;
}

    #buttonConsulta:hover {
        color: #fff;
        background: #4698ca;
        border-top-color: #5db1e0 !important;
        border-left-color: #5db1e0;
    }

.button:hover {
    color: #fff;
    background: #4698ca;
    border-top-color: #5db1e0 !important;
    border-left-color: #5db1e0;
}

.button2:hover {
    color: #fff;
    background: #4698ca;
    border-top-color: #5db1e0 !important;
    border-left-color: #5db1e0;
}

.campos-texto {
    border: 1px solid rgba(100, 100, 100, 0.49);
    width: 165px;
    color: #333333;
    padding: 3px;
    margin-right: 4px;
    margin-bottom: 8px;
    font-family: tahoma, arial, sans-serif;
    margin-top: 5px;
}

.campos-texto2 {
    border: 1px solid rgba(100, 100, 100, 0.49);
    width: 230px;
    color: #333333;
    padding: 3px;
    margin-right: 4px;
    margin-bottom: 8px;
    font-family: tahoma, arial, sans-serif;
    margin-top: 5px;
}

.editor-label {
    margin-top: 10px;
}

.form {
    position: relative;
    display: inline-block;
    margin-top: 60px;
    margin-left: 80px;
    float: left;
}

.form2 {
    margin-top: 30px;
    margin-left: 80px;
}

p {
    font-family: "Verdana", Times, serif;
    font-size: 20px;
}

.conteudo {
    height: 47%;
    width: 75%;
    margin-left: 9%;
    background: red;
}

.configuracoes {
    margin-left: 70px;
    font-size: small;
}

textarea {
    resize: none;
}

.form fieldset {
    float: left;
    border: none;
}

}

Excuse me ignorance, I ask for help and I thank you.

here the rest of the code:

ViewBag.Title = "Index";
Layout = "~/Views/Shared/_LayoutPageHome.cshtml";

var grid1 = new WebGrid(Model.inciAnalista, canPage: true, rowsPerPage: 7, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent2");
var grid2 = new WebGrid(Model.gmudAnalista, canPage: true, rowsPerPage: 7, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent2");
var grid3 = new WebGrid(Model.demandaAnalista, canPage: true, rowsPerPage: 7, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent2");
var grid4 = new WebGrid(Model.problemaAnalista, canPage: true, rowsPerPage: 7, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent2");
var grid5 = new WebGrid(Model.totalAnalista, canPage: true, rowsPerPage: 7, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent2");
var grid6 = new WebGrid(Model.totalAnalista, canPage: true, rowsPerPage: 7, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent2");
var grid7 = new WebGrid(Model.totalAnalista, canPage: true, rowsPerPage: 7, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent2");

int r1, r2, r3, r4, r5, e1, e2, e3, e4, e5, a1, a2, a3, a4, a5, h1, h2, h3, h4, h5, f1, f2, f3, f4, f5, l1, l2, l3, l4, l5, c1, c2, c3, c4, c5;
r1 = Model.totalAnalista[0].umMes;
r2 = Model.totalAnalista[0].duasSemanas;
r3 = Model.totalAnalista[0].noPrazo;
r4 = Model.totalAnalista[0].planejada;
r5 = Model.totalAnalista[0].incidente;

e1 = Model.totalAnalista[1].umMes;
e2 = Model.totalAnalista[1].duasSemanas;
e3 = Model.totalAnalista[1].noPrazo;
e4 = Model.totalAnalista[1].planejada;
e5 = Model.totalAnalista[1].incidente;

a1 = Model.totalAnalista[2].umMes;
a2 = Model.totalAnalista[2].duasSemanas;
a3 = Model.totalAnalista[2].noPrazo;
a4 = Model.totalAnalista[2].planejada;
a5 = Model.totalAnalista[2].incidente;

h1 = Model.totalAnalista[3].umMes;
h2 = Model.totalAnalista[3].duasSemanas;
h3 = Model.totalAnalista[3].noPrazo;
h4 = Model.totalAnalista[3].planejada;
h5 = Model.totalAnalista[3].incidente;

f1 = Model.totalAnalista[4].umMes;
f2 = Model.totalAnalista[4].duasSemanas;
f3 = Model.totalAnalista[4].noPrazo;
f4 = Model.totalAnalista[4].planejada;
f5 = Model.totalAnalista[4].incidente;


l1 = Model.totalAnalista[5].umMes;
l2 = Model.totalAnalista[5].duasSemanas;
l3 = Model.totalAnalista[5].noPrazo;
l4 = Model.totalAnalista[5].planejada;
l5 = Model.totalAnalista[5].incidente;

c1 = Model.totalAnalista[6].umMes;
c2 = Model.totalAnalista[6].duasSemanas;
c3 = Model.totalAnalista[6].noPrazo;
c4 = Model.totalAnalista[6].planejada;
c5 = Model.totalAnalista[6].incidente;
}

the rest:

{
(document).ready(function () { $("#gridContent tbody tr").each(function (i, row) { var $actualRow = $(row); if ($actualRow.find('td').eq(3).text() > 0 && $actualRow.find('td').eq(4).text() 0 && $actualRow.find('td').eq(3).text()



    .webGrid {
        margin: 20px;
        margin-left: 110px;
        border-collapse: collapse;
        width: 40%;
        background-color: #ffffff;
        text-align: left;
        font-size: 13px;
        float: left;
    }

    .webGrid2 {
        margin: 10px;
        margin-left: 990px;
        border-collapse: collapse;
        width: 30%;
        background-color: #ffffff;
        text-align: left;
        font-size: 13px;
    }

    .headerGrid a {
        color: rgb(00, 87, 147);
        text-decoration: none;
    }

    .comentario {
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
    }

    .grafico {
        float: right;
    }

    #chartContainer,
    #chartContainer2 {
        display: inline-block;
        margin: 0px;
        float: left;
        margin-left: 10%;
    }

    #chartContainer3,
    #chartContainer4 {
        display: inline-block;
        margin: 0px;
        float: left;
        margin-left: 10%;
    }

    #chartContainer5 {
        display: inline-block;
        margin: 0px;
        float: left;
        margin-left: 10%;
    }

    #chartContainer6,
    #chartContainer7 {
        display: inline-block;
        margin: 0px;
        float: left;
        margin-left: 10%;
    }

    @*@foreach (var item in Model.totalAnalista) {}

    *@ @grid1.GetHtml(tableStyle: "webGrid", headerStyle: "headerGrid", alternatingRowStyle: "alt", selectedRowStyle: "select", columns: grid1.Columns( grid1.Column("analista", " Analista"), grid1.Column("incidente", "Incidentes"), grid1.Column("noPrazo", "No Prazo"), grid1.Column("duasSemanas", "Mais De 2 Semanas"), grid1.Column("umMes", "Mais De 1 Mês"), grid1.Column("planejada", "Planejada"))) @grid2.GetHtml(tableStyle: "webGrid", headerStyle: "headerGrid", alternatingRowStyle: "alt", selectedRowStyle: "select", columns: grid2.Columns( grid2.Column("analista", " Analista"), grid2.Column("incidente", "G.M.U.Ds."), grid2.Column("noPrazo", "No Prazo"), grid2.Column("duasSemanas", "Mais De 2 Semanas"), grid2.Column("umMes", "Mais De 1 Mês"), grid2.Column("Planejada"))) @grid3.GetHtml(tableStyle: "webGrid", headerStyle: "headerGrid", alternatingRowStyle: "alt", selectedRowStyle: "select", columns: grid3.Columns( grid3.Column("analista", " Analista"), grid3.Column("incidente", "Demandas"), grid3.Column("noPrazo", "No Prazo"), grid3.Column("duasSemanas", "Mais De 2 Semanas"), grid3.Column("umMes", "Mais De 1 Mês"), grid3.Column("planejada", "Planejada"))) @grid4.GetHtml(tableStyle: "webGrid", headerStyle: "headerGrid", alternatingRowStyle: "alt", selectedRowStyle: "select", columns: grid4.Columns( grid4.Column("analista", " Analista"), grid4.Column("incidente", "Problemas"), grid4.Column("noPrazo", "No Prazo"), grid4.Column("duasSemanas", "Mais De 2 Semanas"), grid4.Column("umMes", "Mais De 1 Mês"), grid4.Column("planejada", "Planejada"))) @grid5.GetHtml(tableStyle: "webGrid2", headerStyle: "headerGrid", alternatingRowStyle: "alt", selectedRowStyle: "select", columns: grid5.Columns( grid5.Column("analista", " Analista"), grid5.Column("incidente", "Totalidade"), grid5.Column("noPrazo", "No Prazo"), grid5.Column("duasSemanas", "Mais De 2 Semanas"), grid5.Column("umMes", "Mais De 1 Mês"), grid5.Column("planejada", "Planejada"))) var randomScalingFactor=function () {
        return Math.round(Math.random() * 100);
    }

    ;
    var config= {
        type: 'pie',
        data: {
            datasets: [ {
                data: [ @r1, @r2, @r3, @r4 ], backgroundColor: [ "#de4e3a", window.chartColors.yellow, window.chartColors.blue, window.chartColors.green, ], label: "Romulo Cano"
            }
            ],
            labels: [ "1 Mês +",
            "2 Semanas +",
            "No Prazo",
            "Planejada"],
        }
        ,
        options: {
            title: {
                display: true, text: 'Romulo Cano Total: '+@r5
            }
        }
    }

    ;
    var config2= {
        type: 'pie',
        data: {
            datasets: [ {
                data: [ @e1, @e2, @e3, @e4 ], backgroundColor: [ "#de4e3a", window.chartColors.yellow, window.chartColors.blue, window.chartColors.green, ], label: 'Dataset 1'
            }
            ],
            labels: [ "1 Mês +",
            "2 Semanas +",
            "No Prazo",
            "Planejada"]
        }
        ,
        options: {
            responsive: true
        }
        ,
        options: {
            title: {
                display: true, text: 'Ericles Silva Total: '+@e5
            }
        }
    }

    ;
    var config3= {
        type: 'pie',
        data: {
            datasets: [ {
                data: [ @a1, @a2, @a3, @a4 ], backgroundColor: [ "#de4e3a", window.chartColors.yellow, window.chartColors.blue, window.chartColors.green, ], label: 'Dataset 1'
            }
            ],
            labels: [ "1 Mês +",
            "2 Semanas +",
            "No Prazo",
            "Planejada",
            ]
        }
        ,
        options: {
            responsive: true
        }
        ,
        options: {
            title: {
                display: true, text: 'Anderson Litri Total: '+@a5
            }
        }
    }

    ;
    var config4= {
        type: 'pie',
        data: {
            datasets: [ {
                data: [ @h1, @h2, @h3, @h4 ], backgroundColor: [ "#de4e3a", window.chartColors.yellow, window.chartColors.blue, window.chartColors.green, ], label: 'Dataset 1'
            }
            ],
            labels: [ "1 Mês +",
            "2 Semanas +",
            "No Prazo",
            "Planejada"]
        }
        ,
        options: {
            responsive: true
        }
        ,
        options: {
            title: {
                display: true, text: 'Henrique Giopato Total: '+@h5
            }
        }
    }

    ;
    var config5= {
        type: 'pie',
        data: {
            datasets: [ {
                data: [ @f1, @f2, @f3, @f4 ], backgroundColor: [ "#e13f3a", window.chartColors.yellow, window.chartColors.blue, window.chartColors.green, ], label: 'Dataset 1'
            }
            ],
            labels: [ "1 Mês +",
            "2 Semanas +",
            "No Prazo",
            "Planejada"]
        }
        ,
        options: {
            responsive: true
        }
        ,
        options: {
            title: {
                display: true, text: 'Francisco Melo Total: '+@f5
            }
        }
    }

    ;
    var config6= {
        type: 'pie',
        data: {
            datasets: [ {
                data: [ @l1, @l2, @l3, @l4 ], backgroundColor: [ "#e13f3a", window.chartColors.yellow, window.chartColors.blue, window.chartColors.green, ], label: 'Dataset 1'
            }
            ],
            labels: [ "1 Mês +",
            "2 Semanas +",
            "No Prazo",
            "Planejada"]
        }
        ,
        options: {
            responsive: true
        }
        ,
        options: {
            title: {
                display: true, text: 'Lucas Silva Total: ' +@l5
            }
        }
    }

    ;
    var config7= {
        type: 'pie',
        data: {
            datasets: [ {
                data: [ @c1, @c2, @c3, @c4 ], backgroundColor: [ "#e13f3a", window.chartColors.yellow, window.chartColors.blue, window.chartColors.green, ], label: 'Dataset 1'
            }
            ],
            labels: [ "1 Mês +",
            "2 Semanas +",
            "No Prazo",
            "Planejada"]
        }
        ,
        options: {
            responsive: true
        }
        ,
        options: {
            title: {
                display: true, text: 'Caroline Muniz Total: '+@c5
            }
        }
    }

    ;
    window.onload=function () {
        var ctx=document.getElementById("chart-area").getContext("2d");
        window.myPie=new Chart(ctx, config);
        var ctx2=document.getElementById("chart-area2").getContext("2d");
        window.myPie=new Chart(ctx2, config2);
        var ctx3=document.getElementById("chart-area3").getContext("2d");
        window.myPie=new Chart(ctx3, config3);
        var ctx4=document.getElementById("chart-area4").getContext("2d");
        window.myPie=new Chart(ctx4, config4);
        var ctx5=document.getElementById("chart-area5").getContext("2d");
        window.myPie=new Chart(ctx5, config5);
        var ctx6=document.getElementById("chart-area6").getContext("2d");
        window.myPie=new Chart(ctx6, config6);
        var ctx7=document.getElementById("chart-area7").getContext("2d");
        window.myPie=new Chart(ctx7, config7);
    }

    ;

    }

}

And the HTML Cade??

– hugocsl

2019/05/14 at 19:19
Sorry, posted the rest now

– user149301

2019/05/14 at 19:33

1 answer

Browser other questions tagged css responsive

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

by Everton Gouveia • **278** points · Answer 1 · 2019-05-14T20:22:16+00:00

0

Try to use:

@media (min-width: 1200px)
.container {
    max-width: 1200px;
    background: #ffffff;
    margin: 0.5em;
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.5);
}

You can take a closer look here: /a/383840/79242

1

Good morning @Evertongouveia, I had done this before and it did not work, when the screen is resized the tables continue to get disordered,

– user149301

2019/05/15 at 13:09
You can also try to pass on to the bootstrap, may it help you too..

– Everton Gouveia

2019/05/15 at 13:28