Jump to content
  • 0

Display elements within several sections on same line



I have a submission form that cascades data results in several virtual fields. The virtual fields reside within sections that either hide or display those elements depending on their results.
What I would like to do is have all the elements that are not hidden display on the same line. Unfortunately only the elements within each section have the advanced option to “continue next element on the same line”.  Is there a way to display all elements and submit button all on the same line?

I tried removing the sections thus allowing me to display all elements on the same line, but with some elements being hidden the table that displayed the elements would jump around. For example.. if virt1,virt4, and virt5 are displayed on a search, then on the next search virt4 and virt5 were hidden and only virt1 and virt15 are displayed, virt15 is displayed on the far end several spaces away from virt1. Providing an undesirable result of the table cells jumping around with each search.   

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

To have the button on the same row you need to hide the default button and create your custom button. To get the button code, open the page on browser, right click on button and choose inspect element. remove the ID value of the button. Hide the button in the style look for : cbSearchButton under Buttons and add display:none;

How do you hide fields on your search page?

Link to comment
Share on other sites

  • 0

Thank you for your response MayMusic, along with your suggestion I found the procedure to place the submit button at the end of the row in the thread titled “Move Submit Button In-Line With Text Fields?." http://forums.caspio.com/index.php?/topic/4803-move-submit-button-in-line-with-text-fields 

The virtual fields are hidden by condition rule within the web form.
For example, Virtual1 is a dropdown of a lookup table that labeled “Search for..” then displays the lookup table items from the “search” field (customers, jobs).
Virtual2 is a cascading dropdown from Virtual1 labeled “by..” that displays the search criteria for the “type” value from the cascading parent “search” field. For example if customer is selected in the parent, Virtual2 displays “by” and the lookup table items from the “type” field (last name, phone number, customer ID) in the dropdown. If jobs is selected the dropdown would display (Job Number, City, ZipCode)
Ok, now the rest of the virtual elements pass the value of the selection from Virtual2. For example virtual3 displays (autoselect) the values of last_name from the customer table and passes the selected last_name as a parameter on exit, then Virtual4 and 5 with the corresponding values of phone_number and customer_id.  With these three virtual elements in section2. Then a conditional rule declaring  “if Virtual1 does not contain ‘Customer’ then section2 is hidden, then individual rules stating “if Virtual2 is not ‘last_name make virtual3 hidden, and so on for each individual element.

This works great and saves me from having to create individual search forms for customers and jobs and any other search fields put into the search lookup table.
As stated earlier I would like to display all elements on the same line (row). Unfortunately there is no option to display sections on the same row. If I remove the sections and show/hide the virtual fields 3 through however many, the cells in the table jump around on the line with each search.
I am thinking that I need a JavaScript to grab all displayed elements, and hide all the form elements on the page, then display the previously unhidden elements on a separate line.


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...