Hi JulieBird

Based on what I understand, your are looking for a way to display two view vertically next to each other in a single form with one being 70% in width and the other being 30% in width. This can be done out of the box, please see the steps below on how to do this.

Step 1: Add both views to the form

Step 2: Select the view and locate the General width property, changing this property will set the view to the amount specified (I set View01 to 70% and View02 to 30%)

Result:

In addition to the above, if the views are now too widley spread horizontally and you want to make them look a little smallermore centered instead, then you can apply the following steps as well.

Kind Regards

Raymond

Hi Philbird,

If I understand Correctly you have the similar case as the above query with a form of 3 views (1 on top as 100% and below it has a side by side views of 50% each). You can still use the solution that  @RaymondJVR  posted to adjust the properties of the views in the form. 

As for the 3 views what you can do is Drag the 1st view onto the top of the form design canvas. Drag the 2nd view below it. and do the same for the third. As you drag views you will notice that on your design canvas there will be a box layout for you there so you can position your views so that your 2nd and 3rd view can be put vertically side by side with a 50% width properties. 

Please check the attached photos. Hope this helps

Should you feel that this post is of use and or an accurate solution to the raised question, I kindly encourage you to mark it as such using the 'Mark as Solution', 'Kudo' andor ‘Me Too’ options.

Best Regards,

Kate

K2 will not accept any liability for any issues arising from actions taken in respect of the information provided by any forum member.

Hi JulieBird,

In case you want multiple views on one side like shown in image, then let me know.

------------------

------------------

Regards,

Nirav

Hi,

   I wants to set side by side views in form.Left side 1 view and right side multiple views ,can you help?

Hi  @velraj 

In K2 Form, there is a requirement at times to show views side by side like this:

Sample: Left side – one view; Right side – multiple views

We’ll go step by step. Estimated time of implementation: 15 mins.

Step 1:

Keep your form ready. I suppose you will have some what below layout:

(We will add in below steps if you haven’t already)

Initial Form Design

Identification:

A: Your left side view

B, C, D: Your right side view

E: DataLabel which will hold JavaScript and put views right-side (We will add in below steps)

Step 2:

A, B, C, Give the views’ internal names in properties:

Give Internal name to views

View internal names sample: ListView_SideView1, View_SubView1, View_SubView2, View_SubView3

• E: Add new DataLabel right side to the List view (your left side view) & give name: “dlbPrependTo“; Make it literal.

Step 3:

Add new expression: “exPrependHereDiv” and assign it to DataLabel dlbPrependTo.

Add below JavaScript in expression by replacing with your internal view names

<script>
  function prependToDiv(sourceViewName, destPrependToDiv) {
    $($(")name='" + destPrependToDiv + "']").closest('.formcontrol')).css('margin-top', "0px");
    $("pname='" + sourceViewName + "']").closest(".view").detach().prependTo($("cname='" + destPrependToDiv + "']").closest('.formcontrol'));
}
/* Order Descending - Last view first */
prependToDiv('View_SubView3', 'dlbPrependTo'); /* Replace your view internal names here */
prependToDiv('View_SubView2', 'dlbPrependTo'); /* Replace your view internal names here */
prependToDiv('View_SubView1', 'dlbPrependTo'); /* Replace your view internal names here */
</script>

• Note: Add view names in reverse order. Last view first. This is to respect JavaScript execution order.

Step 4:

Output:

Output – Side by Side

You can check the full post with advance tweaks / side by side views on both sides: https://nworktools.home.blog/2020/04/07/how-to-add-side-by-side-views-multiple-on-right-side-on-k2-smartform/

Rgds,

Nirav