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.
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.
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
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 :
https://powerusers.microsoft.com/t5/Power-Apps-Portals/Javascript-not-working-on-WebPage/m-p/631173
Best regards,
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 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.
Power Pages Super User | MVP