"View Details" link location, gallery report, mobile version

[LilyInTech]

Hi

I want to change location of "View Details" link in the mobile version. Right now the link located in the right top corner (i guess it's default location), I want to locate the link at the buttom left corver (see the screenshot) in my gallery report. Could anybody help with me with CSS Codes that can be used to control the location of the "View Details" on mobile/tablet? 

Thank you!

Lily

 

[TellMeWhy]

Is this a List DataPage or Gallery? This needs JavaScript, but let me know first what specific type of DataPage, maybe I can help you.

Here's an example in a Gallery Report
WEB
https://c2aby549.caspio.com/dp/83ff800011ea20ceac2f4bc18328 


MOBILE

 

[futurist]

 Hi, 

Just wanna share this customization solution I came up with if you want to make gallery report datapages look more appealing:

 

[autonumber]

Hi! Just to add, you may achieve this using custom CSS coding. Paste the code to the header of your DataPage:

<style>
@media only screen and (min-width: 320px ) and (max-width: 567px ){

.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{
display: inline-block !important;
}
img[title="View Details"]{
margin-left: 10px !important;
}

section.cbCalendarReport div[data-cb-name=RACtnr], .cbColumnarReport div[data-cb-name=RACtnr]{
width: 0px !important;
background-image: none !important;
height: 30px !important;
}
}

@media only screen and (min-width: 580px ) and (max-width: 1024px){

.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{
display: inline-block !important;
}
img[title="View Details"]{
margin-left: 10px !important;
}

section.cbCalendarReport div[data-cb-name=RACtnr], .cbColumnarReport div[data-cb-name=RACtnr]{
position: inherit !important;
background-image: none !important;
height: 30px !important;
}
}
</style>