Align, bold, customize Quantity Gift Registry widget, etc.

  • lritter
    Asked on April 12, 2018 at 5:03 PM

    Hello!

    The attached image has notes that explain what I need. I'm still new at CSS and got this far. At the bottom on the right, my note is cut off. I need to create two drop downs for the last two products (auto scrubber and burnish pads). Thank you!

    1523566814JotForm Screenshot Equipment P Screenshot 10

    1523566798JotForm Screenshot Equipment P Screenshot 21

  • Elton Support Team Lead
    Replied on April 12, 2018 at 7:04 PM

    Inject this CSS code to make the important text bold as well as add spacing on the full name field.

    label#label_6:before,

    label#label_7:before {

        content: "IMPORTANT";

        position: absolute;

        font-weight: bold;

    }

    label#label_6,

    label#label_7{

    position:relative;

    width:70%;

    }

    [data-type="control_fullname"] .form-input-wide {

        max-width: none;

    }

    [data-type="control_fullname"] .form-sub-label-container:first-child {

        margin-right: 0;

    }

    [data-type="control_fullname"] .form-sub-label-container {

        width: 42%;

    }

    Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    For the Multiple Text Fields Widget, paste this into its Custom CSS tab under its settings. Do the same for the other similar widget.

    #inputsContainer label {

        font-weight: normal;

        font-size: 10pt;

    }

    For the Gift Registry Widget:

    .checklist label{

    font-size: 10pt;

    }

    span.items-left {

        display: none;

    }

    Unfortunately, the dropdown you mentioned isn't possible on the Gift Registry Widget. You might want to consider the Inventory Widget where it shows a dropdown quantity.

    Align, bold, customize Quantity Gift Registry widget, etc Screenshot 20


  • lritter
    Replied on April 16, 2018 at 1:27 PM

    Super! 

    I have a few more tweaks to make. See screen shot below...

    1523899625JotForm Screenshot Equipment P Screenshot 10

     

    How to adjust the font size on the time. I need help with the CSS for the font size, widget, etc. When I look at the Preview, the time 'runs off' and you can't see the minutes.

     

    You had suggested using the inventory widget so I could create dropdown lists for these last two categories. I tried this and I was able to create a dropdown, but I don't have an option for adding the quantities (small box on the left of the text). How do I create a dropdown and have the options to select the quantities?
  • Jan
    Replied on April 16, 2018 at 2:59 PM

    You can use the CSS code below to adjust or position the header:

    .httac {
    text-align: left;
    padding-left: 55px;
    }

    #subHeader_1 {
    padding-left: 26px;
    }

    Here's the result:

    152390481604 17 zbgu7 Screenshot 10

    For the next issues, please wait for my reply here. Thank you.

  • lritter
    Replied on April 16, 2018 at 4:10 PM

    Super!

    I'm trying to 'fix' these myself, but struggling with the right syntax. I appreciate your help.

  • Jan
    Replied on April 16, 2018 at 4:43 PM

    To prevent confusion, I created separate threads for your next issues. Please wait for our reply on the following threads:

    https://www.jotform.com/answers/1446373

    https://www.jotform.com/answers/1446374

    Thank you.