Jump to content
  • 0

I Want To Share Solution With Two Responsive Tabulars On A Webpage


Xiang

Question

Hi everyone,


I hope you are doing well.


I like solution for Responsive Tabular DataPages, but if I deploy two DataPages on a webpage, names of the second DataPage replace names of the first.

I've found the solution and want to share it:

Edit the second DataPage, go to the "Configure Results Page Fields" step, go to the header of the second DataPage, find the part:

#tabular table[class^=cbResultSetTable] td:nth-of-type(1):before { content: "Insert Label Here"; font-weight: bold; }
#tabular table[class^=cbResultSetTable] td:nth-of-type(2):before { content: "Insert Label Here"; font-weight: bold; }
#tabular table[class^=cbResultSetTable] td:nth-of-type(3):before { content: "Insert Label Here"; font-weight: bold; }
#tabular table[class^=cbResultSetTable] td:nth-of-type(4):before { content: "Insert Label Here"; font-weight: bold; }
}
</style>
<div id="tabular">
<!-- Responsive Code End -->


And replace all "#tabular" and "tabular" to "#myID" and "myID", then the whole code will be like follows:

#myID table[class^="cbResultSetTable"] td:nth-of-type(1):before { content: "Insert Label Here"; font-weight: bold; }
#myID table[class^="cbResultSetTable"] td:nth-of-type(2):before { content: "Insert Label Here"; font-weight: bold; }
#myID table[class^="cbResultSetTable"] td:nth-of-type(3):before { content: "Insert Label Here"; font-weight: bold; }
#myID table[class^="cbResultSetTable"] td:nth-of-type(4):before { content: "Insert Label Here"; font-weight: bold; }
}
</style>
<div id="myID">
<!-- Responsive Code End -->

If you have any problems - feel free to ask, I'll be glad to help.

Have a nice day!

 

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Thanks for sharing. That is absolutely correct. Using this div: <div id="tabular">  you are giving an ID to the DataPage content since it opens in header and closes in footer. If you have more than one DataPage in one web page then all the codes are on the same page and you end up having more than one div with the same ID which confuses the system. you need to make sure you are having unique ID for each section.

Link to comment
Share on other sites

  • 0
On 11/30/2015 at 6:58 AM, Xiang said:

Hi everyone,


I hope you are doing well.


I like solution for Responsive Tabular DataPages, but if I deploy two DataPages on a webpage, names of the second DataPage replace names of the first.

I've found the solution and want to share it:

Edit the second DataPage, go to the "Configure Results Page Fields" step, go to the header of the second DataPage, find the part:

#tabular table[class^=cbResultSetTable] td:nth-of-type(1):before { content: "Insert Label Here"; font-weight: bold; }
#tabular table[class^=cbResultSetTable] td:nth-of-type(2):before { content: "Insert Label Here"; font-weight: bold; }
#tabular table[class^=cbResultSetTable] td:nth-of-type(3):before { content: "Insert Label Here"; font-weight: bold; }
#tabular table[class^=cbResultSetTable] td:nth-of-type(4):before { content: "Insert Label Here"; font-weight: bold; }
}
</style>
<div id="tabular">
<!-- Responsive Code End -->


And replace all "#tabular" and "tabular" to "#myID" and "myID", then the whole code will be like follows:

#myID table[class^="cbResultSetTable"] td:nth-of-type(1):before { content: "Insert Label Here"; font-weight: bold; }
#myID table[class^="cbResultSetTable"] td:nth-of-type(2):before { content: "Insert Label Here"; font-weight: bold; }
#myID table[class^="cbResultSetTable"] td:nth-of-type(3):before { content: "Insert Label Here"; font-weight: bold; }
#myID table[class^="cbResultSetTable"] td:nth-of-type(4):before { content: "Insert Label Here"; font-weight: bold; }
}
</style>
<div id="myID">
<!-- Responsive Code End -->

If you have any problems - feel free to ask, I'll be glad to help.

Have a nice day!

 

   Hi,

Jus to add, you may refer to this link on how to do any stylings to multiple sibling elements all at once:

 

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.

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

Loading...
×
×
  • Create New...