Lista configurável na vertical

  • Profile Image
    ppgeducacao.uepg
    Asked on February 03, 2021 at 08:48 AM

    Gostaria de saber se existe alguma maneira de configurar as caixas de inserção da Lista Configurável para colocar elas uma embaixo da outra e não lado a lado (como na imagem abaixo). Para que essa barra de rolagem horizontal não apareça.
    É possível fazer isso no CSS?

    Desde já obrigado1612360033_601aa96198b7a_Capturar.JPG

  • Profile Image
    Eduardo_H
    Answered on February 03, 2021 at 10:33 AM

    Olá, ppgeducacao.uepg

    Para alinhar verticalmente os itens do widget Lista Configurável siga os passos abaixo:


    1) Insira o seguinte código CSS customizado em seu formulário:

    [data-widget-name="Configurable List"] > iframe {

        width: 100% !important;

    }

    Veja aqui as instruções:

    Guia: Como-inserir-codigos-css-personalizados


    2) Insira o seguinte código CSS customizado em seus widgets de Lista Configurável

    #list tbody:first-child > tr:first-child {

            display: none;

        }

        #list {

            width: 100%;

            border-collapse: collapse;

        }

        #list tbody:first-child > tr > td{

            display:block;

            padding: 6px 0;

        }

        #list tbody:first-child > tr + tr + tr {

            border-top: 1px solid #ccc;

        }

        #list > tbody:first-child tr td.col1 {

            padding-top: 20px;

        }

        .mobileColumnName {

            display: inline-block;

            padding-bottom: 4px;

            width: 40%;

            box-sizing: border-box;

        }

        .mobileColumnName + input,

        .mobileColumnName + textarea,

        .mobileColumnName + select,

        .mobileColumnName + .radio-container,

        .mobileColumnName + .checkbox-container,

        .mobileColumnName + .dateContainer {

            width: 60%;

            display: inline-block;

            box-sizing: border-box;

            vertical-align:top;

            box-shadow:none;

        }

        .buttonsColumn {

            text-align: right;

        }


    Veja aqui as instruções (em inglês):

    Guide: How-to-inject-css-codes-to-widgets


    Precisando de qualquer assistência neste processo estamos à disposição.

  • Profile Image
    ppgeducacao.uepg
    Answered on February 05, 2021 at 12:10 PM

    ajudaram demais, muito obrigado mesmo!