Jump to content

Disable mobile functionality (inline insert) for one datapage report only

Recommended Posts

Hello I am trying to disable the responsive Caspio behaviour for inline editing for mobiles on a tabular report.
On my tabular report I have only one inline insert field to capture. Below a width of 580px the input box is not available, when larger it returns. In table or desktop mode the user can enter the text whilst being able to see all the other records on the screen and it feels more intuitive.

In mobile view it replaces this with a single button. Then this navigates to a form for entry. The Caspio website states this as:


Specifically from the above link I want to stop the following happening:

For mobile screens:

  • Search and Inline Insert options are displayed as buttons (do not want!)

I want it to behave like tablet mode when sized for mobile for the inline insert. As above I only have one inline insert entry field. If this has to be applied to all data pages for my app, then no massive issue there.

Any help/ guidance is welcome. Happy to write any overriding CSS or JS to achieve this result.

Link to comment
Share on other sites

  • 2 weeks later...

Thanks, @SushiPizza, it's a very valid approach.  When turning off responsive the submit button for inline insert in a tabular datapage report does seem to hog its own column (even though there is nothing above it for each data row as I am not using in-line row level edit).

I think I will live with this for the moment. Appreciate your help.

Link to comment
Share on other sites

Hi @Joe90

Using CSS, you can redefine the look of different page elements based on the screen width of the device. Here is an example of the CSS code that will force desktop view of inline edit for mobile devices:


.cbColumnarReport div[data-cb-name=RACtnr] > a, section.cbCalendarReport div[data-cb-name=RACtnr] > a, table[class^="cbResultSetTable"] > tbody > tr[data-cb-name="data"] > td.cbResultSetActionCell > a, table[class^="cbResultSetTable"] > tbody > tr[data-cb-name="data"] > td.cbResultSetActionCell > span {
display: inline-block!important;


table[class^="cbResultSetTable"] > tbody > tr[data-cb-name="data"]:not([class~=Edit]) > td.cbResultSetActionCell {
background-image: none!important;
@media only screen and (max-width: 575px) {
article .cbResultSetActionsLinks {
     font-size: 12px!important; 

You can add it to the header of your tabular report with inline edit.

Let me know if it works as you expect

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.

Reply to this topic...

×   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...