Wie erhalte ich in der konfigurierbaren Liste die selbe CSS wie das Standard Template

  • Profile Image
    formdesigner458
    Asked on June 09, 2021 at 06:00 AM

    Hallo,

    können Sie mir die aktuelle CSS für die konfigurierbare Liste schicken, sodass es es übereinstimmt mit der Standard CSS.

    Es sollten die Felder der Liste, auf dieselbe Breite, Höhe und Design matchen.


    Zusätzlich springt der Bootstrap Schalter jedesmal an den Rand wenn er angeklickt wird. Dies möchte ich gerne fixen und den Schalter statisch am Rand haben. Die CSS dafür benötige ich ebenfalls.


  • Profile Image
    Nik_M
    Answered on June 09, 2021 at 08:15 AM

    Please add the following CSS code in the Configurable List widget:

    input.translatable, input.stepper {

      height: 38px;

      width:290px!important;

      border-color: rgba(18, 69, 141, 0.75);

    }

    Related Guide: How to Inject CSS Codes to Widgets

    Result:

    1623239686_60c0ac067f675_conf.PNG

    I created a new thread for your other issue: https://www.jotform.com/answers/3149773

  • Profile Image
    formdesigner458
    Answered on June 09, 2021 at 09:41 AM

    Thank you, it works fine! Could you also share the CSS to customize the "+" Button and the "-" Button

  • Profile Image
    formdesigner458
    Answered on June 09, 2021 at 10:02 AM

    Have you an idea how I can get this list responsible and the Number Input with the same size?

    1623247272_60c0c9a82bb16_Bildschirmfoto

  • Profile Image
    Nik_M
    Answered on June 09, 2021 at 11:46 AM

    You can increase the size adn add border color to add and remove buttons with this CSS code:

    .add, .remove {

      height: 30px;

      border-color: rgba(18, 69, 141, 0.75);

    }

    To resolve the other 2 issues add this CSS code as well:

    input.translatable, input.stepper {

      font-size: 15px!important;

      padding-left: 10px;

    }

    @media screen and (max-width:480px) {

       input.translatable, input.stepper {

       width:250px!important;

    }

    }

    Result:

    1623253448_60c0e1c835960_conf1.PNG