cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Helper I
Helper I

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

justinridge_0-1599708921390.png

 

Your assistance would be appreciated.

 

5 REPLIES 5
Highlighted
Resolver II
Resolver II

Re: Portal CSS breaks easily

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.

Highlighted
Helper I
Helper I

Re: Portal CSS breaks easily

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

Highlighted
Community Support
Community Support

Re: Portal CSS breaks easily

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

9113.png

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,

 

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.
Highlighted
Helper I
Helper I

Re: Portal CSS breaks easily

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.

Highlighted
Super User II
Super User II

Re: Portal CSS breaks easily

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

OliverRodrigues_0-1600102479279.png

 


------------

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.

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

Watch Now

Experience what’s next for Power Apps

See the latest Power Apps innovations, updates, and demos from the Microsoft Business Applications Launch Event.

Power Platform ISV Studio

Power Platform ISV Studio

ISV Studio is designed to become the go-to Power Platform destination for ISV’s to monitor & manage published applications.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Users online (6,652)