Widgets overlaying each other

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

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.

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

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:

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

Thanks,

Marilyn

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.

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

Please try using this code:

#cid_494 {

    z-index: 0 !important;

}

Let us know if that helps.

That didn't appear to make a difference.

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.

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

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 

That did the trick!

Thanks,

Marilyn