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

[Joe90]

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:

https://howto.caspio.com/datapages/responsive-datapages/responsive-behavior-on-tablet-and-mobile/

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.

[SushiPizza]

Hi @Joe90,

You can uncheck "Enable responsive" to achieve this:

You may also check some options in styles: https://howto.caspio.com/datapages/responsive-datapages/modifying-styles-for-tablet-and-mobile/

Regards,
SP

[Joe90]

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.

[Volomeister]

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:

 

<style>
.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; 
}
}
</style>

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

Let me know if it works as you expect