Solved

Setting the width of form columns for views sitting side by side each other

  • 13 March 2019
  • 6 replies
  • 225 views
J

There doesnt seem to be any ootb method to control a zone width on a form, has anyone found a way to do this with css/javascript?  I've searched here but only similar threads were from 2014 and no answers.

 

For example I want two views showing vertically next to each other on a form, 1 view to be 70% and the other to be 30%.  The form just splits them 50/50 which looks terrible :-(   Its very limiting when trying to lay out a complex form to appear user friendly.  

 

Thanks for any tips or tricks to achieve this, Julie :-)

 

icon

Best answer by RaymondJVR 13 March 2019, 13:26

View original

6 replies

RaymondJVR
Userlevel 4
Badge +13

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.



Step 1: Edit the form containing the two views


Step 2: Left click on the blank section of the form canvas to view the Forms propeties


Step 3: In the Form properties locate the width appearance option and change it to the desired width (I changed it to 70%)



Result:




 


Kind Regards


Raymond


 

P
Hi
I am also trying to create a form with multiple views (3 in total). The first view is a list view that will be dynamic and and will be set at 100%, the two views beneath this will be set at 50/50 and cannot get this to work at all. Either I'm misunderstanding one of the instructions or K2 Cloud doesn't allow for positioning of views within the form other than stacked? If anyone can provide me with some advice I'm all ears :)

Thanks
Phil
K

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.


 


 



N
Badge +4

Hi JulieBird,

 

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

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

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

Regards,

Nirav

V

Hi,

 

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

N

Hi  @velraj 

 

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

SideBySideViews.pngSample: 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");
    $("[name='" + sourceViewName + "']").closest(".view").detach().prependTo($("[name='" + 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

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings