Widgets overlaying each other

  • Profile Image
    menstrom
    Asked on October 02, 2017 at 08:41 AM

    I have built some configurable list widgets into my form.  For a couple of them, I need the first line to have some things pre-entered, and I couldn't figure out how to do that with the standard widget.  So I had the bright idea to create two widgets and push the second one up to just below the first one so they look like one chart.  If you look at the first one I did on the first page, the top one has "Self" and "Wheaton College" pre-entered, and the one below it does not, and does not have labels at the top.  What I discovered is that, when I do it this way, the top blank area of the lower one lays over the top of the first one and so the first line is visible but you can't enter data into it.  Is there a way to put these two widgets next to each other without making it impossible to enter data into the first one?  Or is there a way to use just one widget and enter some data into the first line that doesn't repeat in the other lines?

    Thanks,

    Marilyn


  • Profile Image
    Chriistian
    Answered on October 02, 2017 at 10:37 AM

    Currently, there is no option that will allow you to add a default value on your configurable list widget fields. On your workaround, to fix the entering data on the first row, please add this custom CSS code in your form:

    #id_494 {

    z-index: 1000;

    }

    To add custom CSS code to your form, just follow the instructions provided in this article: How to Inject Custom CSS Codes.

  • Profile Image
    menstrom
    Answered on October 02, 2017 at 11:20 AM

    That fixed the problem on the first line.  But now I can't enter data on the second line (which is technically the first line of the second widget).  So whatever fixed line 1 then broke line 2.

    Any other ideas that will allow data entry on each line of each of the two widgets?

    Thanks,

    Marilyn

  • Profile Image
    Chriistian
    Answered on October 02, 2017 at 12:16 PM

    I noticed that there some other custom CSS code that you have added to your form. Please remove the height on the #id_494 CSS code.

     

    Then adjust the margin-top CSS code of the #id_495.

    Here is the updated custom CSS code:

  • Profile Image
    menstrom
    Answered on October 02, 2017 at 12:31 PM

    Nope, now I can't enter data in line 1 again.  So I'm back to the original problem.

    Thanks,

    Marilyn

  • Profile Image
    Chriistian
    Answered on October 02, 2017 at 12:49 PM

    I have updated the CSS code to your form to fix the issue. I have set again a height of 80px and added the z-index to #id_494. Adjusted the margin-top of the #id_495.

    Please check the form and see if this is now working properly on your end.

  • Profile Image
    menstrom
    Answered on October 02, 2017 at 01:18 PM

    Okay, we're getting close now!  At this point, I just have an issue that the top half of the second boxes are overlaid by the #cid_494 div.hover area of the boxes above them, so when you try to click in the second boxes down, you can't click unless your cursor is near the bottom of the boxes.  Is there a way to decrease the bottom hover area of the first boxes?  I tried margin-bottom, height, etc., and nothing affected it.

    Thanks,

    Marilyn

  • Profile Image
    BDAVID
    Answered on October 02, 2017 at 01:59 PM

    Please try using this code:

    #cid_494 {

        z-index: 0 !important;

    }

    Let us know if that helps.

  • Profile Image
    menstrom
    Answered on October 02, 2017 at 02:16 PM

    That didn't appear to make a difference.


  • Profile Image
    Chriistian
    Answered on October 02, 2017 at 02:44 PM

    From my end, it looks fixed. Here is what it looks from my end.


    Can you please clear your browser cache? If the issue persists, please post a screenshot of how it appears from your end.

  • Profile Image
    menstrom
    Answered on October 02, 2017 at 03:04 PM

    It's not how it looks, it's how the cursor behaves.  Try clicking in the First and Last Name column, second box down.  First, try clicking if your cursor is near the top of the box.  You can't get the cursor to change to allow you to click in the box until you are near the bottom of the box.  By contrast, if you want to click in the first or third boxes down, your cursor can be anywhere within the box and it will let you click in the box.  If you look at it in Designer, it's easy to see why:

    The bottom of the first widget overlays the top half of the second widget.  That's what I can't seem to resolve.

    Marilyn

  • Profile Image
    BDAVID
    Answered on October 02, 2017 at 04:19 PM

    I have cloned your form, and got it fixed by injecting this code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    #customFieldFrame_494{

        height: 50px !important;

    }

    You can try my clone version: https://form.jotformpro.com/72746766064971 

  • Profile Image
    menstrom
    Answered on October 02, 2017 at 08:57 PM

    That did the trick!

    Thanks,

    Marilyn