How to increase the width of the button and setup a condition for 'Image Upload Preview” widget?

  • Profile Image
    unruhfurniture
    Asked on December 20, 2018 at 07:28 AM

    I have two questions about this form and I put the details in an attached Screenshot to better explain.


    Here's the CSS I already added for the “Image Upload Preview” Widget:

    .btn-upload {

    display:none

    }


    .btn-select {

        height: 60px;

        padding: 0 30px;

        color: #6b6b6b;

        font-size: .9rem;

        border-radius: 2px;

        border: solid 1px #1c3549;

        background: #fff;

    }


    .progress {

        width: 100%;

        background: #d7d7d7;

        position: relative;

        display: none;

    }


    Here's the Main CSS I already edited for the Form:


    .form-label.form-label-auto {

        display : block;

        float : none;

        text-align : center;

        width : 100%;

    }


    .form-required {

        color : #ffffff;

    }


    .form-line-error .form-error-message {

        background-color : #1D3648;

    }


    .form-line-error .form-error-message .form-error-arrow {

        border-bottom-color : #1D3648;

    }


    .form-line-error {

        background-color : #ffffff;

    }


    body, .form-all {

        background : none !important;

    }


    .form-all {

        margin-left : 100 !important;

    }


    .jotform-form {

        padding : 0!important;

    }


    .form-line-error .form-error-message {

        background-color : none;

    }


    .form-line-error .form-error-message .form-error-arrow {

        border-bottom-color : #ffffff;

    }


    .form-line-error {

        background-color : #ffffff;

    }


    .supernova .form-all {

        border : 0 !important;

        box-shadow : none !important;

        -moz-box-shadow : none !important;

        -webkit-box-shadow : none !important;

    }


    .form-line.form-line-active {

        background-color : #ffffff;

    }


    .form-buttons-wrapper {


    }


    .form-pagebreak {

        border-top : none;

    }


    .form-pagebreak {

        border-top : none;

        background : none;

    }


    #form-pagebreak-back_16 {

        display : none;

    }


    input#input_18_1000,  input#input_18_1000 + label {

        display : none;

    }


    .form-submit-button:hover {

        background : #1c3549 !important;

    }


    .form-submit-button:active {

        -moz-box-shadow : 0 0px #000 inset;

        -webkit-box-shadow : 0 0px #000 inset;

        box-shadow : 0 0px #000 inset;

    }


    .form-textbox {

        max-width : 400px;

        margin-left : 10px;

    }


    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

        .form-all {

            width : 100%!important;

        }


        .form-textbox {

            margin-left : initial !important;

        }


        .form-all .form-submit-button {

            width : 100% !important;

        }


    }


    }


    .form-label-top {

        display : none;

    }


    .form-error-message {

        color : #E5C181 !important;

        background-color : #ffffff !important;

    }


    #input_2 {

        letter-spacing : 4px;

    }


    .form-line-error .form-error-message {

        background-color : #ffffff!important;

        font-size : 13px !important;

        font-weight : 300 !important;

        color : #e5c181;

        box-shadow : none;

        padding-top : 0!important;

        padding-bottom : 20!important;

    }


    .form-line-error .form-error-message .form-error-arrow {

        border-bottom-color : #ffffff;

    }


    .form-line-error {

        background-color : #ffffff;

    }


    .form-line-error input:not(#coupon-input), .form-line-error select, .form-line-error textarea, .form-validation-error {

        border : 1px solid black !important;

        box-shadow : 0 0 2px transparent !important;

    }


    .form-button-error {

        color : #e5c181;

        font-size : 15px !important;

        font-weight : 300 !important;

        display : inline;

        text-align : left;

    }


    div.form-error-arrow {

        display : none;

    }


    .form-error-message img {

        display : none;

    }


    #label_13 {

        display : none;

    }


    #cid_22 div.qq-upload-button {

        width : 100%!important;

        height : 50px!important;

        padding : 20px 10px 0px 10px!important;

        color : #6b6b6b!important;

        font-size : 17px!important;

        border-radius : 2px!important;

        border : solid 1px #1c3549!important;

        background : #fff!important;

    }


    #label_20 {

        display : none;

    }


    #label_19 {

        display : none;

    }


    #label_16 {

        display : none;

    }



  • Profile Image
    Kiran
    Answered on December 20, 2018 at 11:02 AM

    Please try adding the following CSS code the Custom CSS section of the widget to increase the width of the button of the widget.

    #pickImage {

        width: 400px;

    }

    154532084120122018_211211_7.png

    Please add the following CSS code to the form to set the width of the textarea field.

    #id_21 {

        width: 575px;

        margin-left: 10px;

    }

    It seems the Show/Hide conditions are not working with the widget. This could be due to the widget is being loaded in an iFrame. Let me check this further and get back to you if I could find any workaround in this regard.

    Thanks!

  • Profile Image
    unruhfurniture
    Answered on December 20, 2018 at 11:43 AM
    Thanks. That corrected the issue on Desktop, but on Mobile both the Button
    Fields and Tex Area Field now overflow the bounderies (see attached
    screenshots).
    Could you please help me to correct it on mobile?
    Thanks!
    Sam
    *Sam Unruh*
    Owner, Unruh Furniture
    cell: 816.808.5259
    ...
  • Profile Image
    Kiran
    Answered on December 20, 2018 at 01:15 PM

    Please try replacing the CSS code injected earlier to the custom CSS section of the widget with the following.

    .button-container {

        width: 100%;

    }

    Additionally, please add the following CSS code to the form so that the text field shall be displayed responsive.

    @media screen and (min-width: 10px) and (max-width: 540px){

        #cid_21 {

            width: 55% !important;

        }

    }

    It looks like that you have attached the screenshot to the reply email. Please note that the images attached to the reply email cannot be posted back to the forum post. If you need to attach the screenshot to the forum post, we request you to open this thread using the URL https://www.jotform.com/answers/1679187 and see the image below to attach the images to the post.

    1545328017ForumScreenshotUpload.png

    Thanks!

  • Profile Image
    unruhfurniture
    Answered on December 20, 2018 at 05:43 PM
    Thanks so much!
    *Sam Unruh*
    Owner, Unruh Furniture
    cell: 816.808.5259
    ...
  • Profile Image
    unruhfurniture
    Answered on December 20, 2018 at 06:43 PM
    Any luck figuring out the conditional logic question?
    Sam
    *Sam Unruh*
    Owner, Unruh Furniture
    cell: 816.808.5259
    ...
  • Profile Image
    Kiran
    Answered on December 21, 2018 at 02:32 PM

    I have checked the form again to set the condition using the Upload preview widget. However, the widget doesn't seem to be returning any value before submitting the form to work with the conditions. The condition shall be working normally with the normal file upload field.

    Thanks!

  • Profile Image
    unruhfurniture
    Answered on December 21, 2018 at 05:43 PM
    Thanks for checking.
    *Sam Unruh*
    Owner, Unruh Furniture
    cell: 816.808.5259
    ...