Portal CSS breaks easily

[justinridge]

Hi there.

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

I am using code from the W3Schools website - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs

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

HTML

<h2>Tabs</h2>
<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>

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

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

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

CSS

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 button.active {
background-color: #ccc;
}

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

Javascript

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.

[ragavanrajan]

Hi @justinridge , 

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

https://powerusers.microsoft.com/t5/Power-Apps-Portals/HTML-Javascript-and-CSS-Limitations/m-p/68065... 

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.

[justinridge]

Thanks.

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.

Thanks

[v-yutliu-msft]

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 :

https://powerusers.microsoft.com/t5/Power-Apps-Portals/Show-Hide-Button-based-on-Dropdown-selection-...

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 :

https://powerusers.microsoft.com/t5/Power-Apps-Portals/Javascript-not-working-on-WebPage/m-p/631173

Best regards,

[justinridge]

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.

[OliverRodrigues]

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 make.powerapps.com --> 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.