InfoPath Dev

Hi I have 2 Lists which have Parent-Child relations. Both lists have 2 different List forms created for New Item. These forms are embaded on single form (i.e. child form is embaded in Parent form) using InfoPath Webpart. However when its used by user, there is major space between 2 Web Parts or forms. UI looks bit separate and user can't consider it as single form. Please suggest any way ahead to minimize this space between 2 List forms. See below SS kind regards Bhushan

Hi, Do this, edit the infopath form webpart and insert a margin bottom/above css style. But first get the webpart I'd by pressing the F12(developer tool). Let me know if the issue still persisting.

Could you pls provide more details about how to insert margin bottom CSS Style? I am bit new to web part implementation

 Once you get the web part ID, insert a script editor web part on the same page then click on the edit source icon in Markup section then copy paste the following code to the box.

Note: you have to modify the web part ID and change the pixels to your needs  

<style type="text/css">

#WebPartWPQ2{
margin-bottom:-10px;    //to push the top section form to the bottom

margin-top:-10px;   //to pull the bottom section form to the top

} 

</style> 

I implemented exactly as suggested, however I can't the space between 2 web parts is changed. See the SS of what I did.

Suggestion one: You have to move the script editor web part out of the middle of the two. Edit the script editor web part and drill down the layout link and change the web part zone to 0, so that way you can move it to the top of the form.

Suggestion Two: Did you find the exact web part ID for your InfoPath form web part? I saw in your screenshot that you copy pasted my script with the web part ID and the margin size, which seems not right. Again check the ID, that is very important.  

Thanks for your reply, Now I have implemented as mentioned above. Moved script editor - web part with Zone 0 at the Top of form. also corrected the Web Part ID in script where I mentioned ID of 1st Web Part. Please see below Screen shot which shows current picture of form. Let me know if something is still incorrect?

Below are a couple of screen shots if that help. I noticed one thing on your screen shot that you would need to use either margin-top or margin-bottom(I suggest to modify the top form using its ID and margin-bottom style, set it to -15px). Let me know if that helps.

 

 

I did above suggested change however does not see any difference. The space between both the Web Parts on my form is still same, and does not get reduced.

thank you, It worked well.