Showing results for 
Search instead for 
Did you mean: 
Helper II
Helper II

Portal CSS breaks easily

Hi there.

I am using HTML, CSS and Javascript code to create horizontal tabs.

I am using code from the W3Schools website -


I am inserting the HTML code in the code editor (in the portal designer)

I am inserting the CSS and Javascript in the Edit -> Options section of the live page.


My code is as follows: (this is a template from the w3schools website)


-------------- CODE SNIPPIT ------------------------------



<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>

<div id="London" class="tabcontent">
<p>London is the capital city of England.</p>

<div id="Paris" class="tabcontent">
<p>Paris is the capital of France.</p>

<div id="Tokyo" class="tabcontent">
<p>Tokyo is the capital of Japan.</p>




body {font-family: Arial;}

/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;

/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;

/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;

/* Create an active/current tablink class */
.tab {
background-color: #ccc;

/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;



function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";



Once this is all added the page works 100%.

The issue is that as soon as I make one little change to the HTML, the tabs do not work anymore. (i.e. I cannot click on the tabs, nor do I see any tab content)
e.g. I wanted to add an entity list in the first Tab.


CSS & Java:



Your assistance would be appreciated.


Super User
Super User

Hi @justinridge , 


 @OliverRodrigues  has answered this already for you. Please refer this post 


Due to the nature of Jquery and InBuilt bootstrap you may experience CSS Overrides very often when you make changes in your page. 


Hope it helps. 



If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.



The CSS works fine now when changes are made to the HTML, but the javascript still breaks/gets overriden

Please where to to add Javascript to the page (so that it doesn't get overriden.



Hi @justinridge ,

1)If you want to customize Web Form, you could put JavaScript code here:

Go to Web Form Step -> Click on 'Form Options' tab -> Add  code in JavaScript Section


Please check the similar issue :


2)If you want to customize WebPage, you could put JavaScript code here:

Open your web page, scroll down to localized content subgrid and open the listed record, then go to Advanced and custom javascript. 

Please check the similar issue :




Best regards,


Community Support Team _ Phoebe Liu
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Hi there. Thanks.


I use Entity forms and not web forms.
How would this work in this case?

When I put the Javascipt into the Custom Javascript section it seems to work until I make any change to the HTML.

Hi @justinridge 


I am just trying to understand what you are doing here

You want to add this custom tab control + add an entity form, is that it?


if that's the case I wouldn't add the JS against the Entity Form, as it is not really related to the Entity Form, I would add against the Web Page


navigate to --> apps --> portal management --> on the left menu go to Web Pages and open your Web Page

within your Web Page, you will find a Localized/Content subgrid containing a related Web Page, open that one, as that is the one you need to add your CSS/JS




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Pages Super User | MVP

Oliver Rodrigues


Helpful resources

Carousel Community Blog

Check out the Community Blog

Read all about the most recent blogs in the community!

Community Call Conversations

Introducing the Community Calls Conversations

A great place where you can stay up to date with community calls and interact with the speakers.

Carousel News & Announcements

What's New in the Community?

Check out the latest News & Events in the community!

Users online (3,567)