What measures can be taken to stop links from disrupting the style of a Polymer site?

In Polymer, it seems that many styles are inherited from the surrounding document.

For example, the code snippet below will display the icon and button with a white foreground color and adjust spacing:

<paper-toolbar>
  <paper-icon-button icon="book"></paper-icon-button>
  <span class="title">Polymer Starter Kit</span>
  <paper-button id="signin-button">Sign In</paper-button>
</paper-toolbar>

However, adding a link can break the style inheritance, as shown in this snippet:

<paper-toolbar>
  <a href="/"><paper-icon-button icon="book"></paper-icon-button></a>
  <span class="title">SkillCraft</span>
  <paper-button id="signin-button">Sign In</paper-button>
</paper-toolbar>

Does anyone know how to properly address or handle this issue?

csspolymer

Answer №1

It is important to note that the Polymer components were not originally intended for use within an href element. To simulate similar functionality, one can opt to add a click event to the component in order to extract the URL from a unique attribute.

<paper-icon-button class="link" icon="book" href="/"></paper-button>

<script>
  document.querySelectorAll('.link').addEventListener('click', function(e) {
    window.location.href = e.target.getAttribute('href');
  })
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Parallax Effect Slows Down When Scrolling In Web Page

Currently in the process of creating a website with a scrolling parallax effect using Stellar.js on the header and three other sections. However, I'm experiencing lag when scrolling, especially at the top of the page. I've attempted to reduce la ...

javascriptjqueryhtmlcssparallax

Unable to get the splash screen to display at 100% height using CSS

Here is an example of a splash screen I have created. HTML <div id="spalsh"> <span> <img src="{% static 'dbexplorer/img/loading.gif' %}" style="height: 100px;" > </span> </div> CSS #spalsh{ width: 98%; ...

css

Preventing clicks underneath in Internet Explorer with CSS overlay

I am currently working on creating an overlay that is specifically designed to display in versions of Internet Explorer lower than 9, prompting users to upgrade their browsers. The overlay and message are functioning correctly, but I am facing an issue wit ...

css

The background image allows the top images and headers to overlay, while ensuring that the other images and headers remain below

As a novice in HTML and CSS, I'm facing a puzzling issue while learning at school. The first header and two images within the container where my background image is placed are overlapping the background image, creating a large gap. Strangely, the subs ...

htmlcss

Avoid creating a line break directly after the header, however allow for a line break

I find myself in a scenario where I require a paragraph that has a specific format: An Emphasized Title Some relevant information regarding the subject... I am looking to insert a new line before the title, ensuring it seamlessly integrates with the re ...

htmlcssheaderjekyll

Issue with the Navigation in CSS and jQuery

I'm struggling to understand a problem with the desktop navigation on this website, specifically in Safari on certain pages. The issue seems to only occur on Safari for Windows, Mac Desktop, and Mac Laptop. Interestingly, the navigation works perfect ...

jqueryhtmlcsssafarinavigation

What are the best ways to ensure text stays center aligned and prevent position absolute elements from overlapping?

I'm currently working on a project that involves center-aligning the page title within the parent div. However, I have run into an issue with an overlapping back button when the page title is too long due to its absolute positioning. Can anyone provid ...

htmlcss

What is the best method for serving static files within a nested EJS view directory?

Assuming I have the directory structure below: |--Views/ | --partial/ | --links.ejs | |--assets/ | --css/ | --styles.css | |--server.js Code for links.ejs <link rel="stylesheet" type="text/css" href="css/forms/switches.css"& ...

javascripthtmlcssnode.jsexpress

Tips for achieving seamless scrolling with the combination of javascript and css

Looking for a solution to achieve smooth scrolling on an HTML page without using the #id_name to scroll to a specific div. Instead, I want to scroll to a particular point, such as having a button that scrolls down the webpage smoothly by 250px when press ...

javascripthtmlcss

Center and align pictures within a stationary container

I am working on a simple webpage that has a fixed footer. In this footer, I want to have 5 images centered with equal distances between them. Below is my HTML/CSS : Footer div : div.fixed { position: fixed; bottom: 0; right: 0; width: ...

htmlcss

Can the CSS of an iframe be modified if the iframe is located on a different domain?

Is it feasible to modify the CSS of an iframe if the iframe is not located on the same domain? If so, what are some ways to apply and alter CSS for this situation? Any assistance would be greatly appreciated. <iframe id="frame1" width="100%" height="35 ...

javascriptjqueryhtmlcssiframe

Bootstrap allows you to create a responsive grid

I need assistance with making my bootstrap grid responsive for multiple input search filters on mobile devices. Currently, the layout is not showing correctly on mobile phones. On desktop, the output looks fine: https://i.stack.imgur.com/bKPUv.png Howev ...

htmlcssbootstrap-4

The scroll bar in the main window vanishes as the popup window expands in size

When the popup expands in size, the bottom portion becomes inaccessible even with a scrollbar present. Ideally, the scrollbar on the parent window should adjust automatically as the popup grows, allowing users to scroll and view the entire content. ...

htmlcss

How to place a scrollable content below a fixed flexbox navigation menu

I am struggling with a certain snippet (best viewed in full screen mode) where I need to position the <main> element directly underneath the <header> element. The <header> is set in a fixed position to remain at the top of the screen whil ...

htmlcsscss-positionfixed

The issue with ng-bind-html causing the disappearance of paragraph spaces

Is there a way to preserve paragraph breaks when using ng-bind-html to display text on the screen? I am having an issue where all the text appears as one big chunk if there are paragraph breaks in the data pulled from the database. Not sure what is causing ...

cssangularjs

Tips for including a line within a circular canvas

My progress bar crafted with css, javascript and html looks great (left image). However, I'm facing a challenge in adding white color dividers to enhance the appearance of the progress bar as shown in the image on the right. Despite my various attemp ...

javascripthtmlcsscanvas

The background image fails to display

Having some trouble with setting an image as the background using CSS. When I directly input the image URL, it shows up fine with this code: background: url('images/image1.jpg); However, I would prefer to use this CSS code instead: .masthead { m ...

htmlcssweb

adjusting the background with repeat-y pattern placement

I'm having an issue with setting a background image as a wrapper for the main content of my page. Currently, I've set the background image like this: #background { background: url("../image/bg.png") repeat-y 133px 50px; color: #000000; ...

cssbackground-image

Selecting specific elements based on their position within a parent element using

I can't seem to figure out the strange behavior of the nth-child selector. After calling the function BackColor1(), my visual appears different than expected: Something seems off. However, when I call BackColor2(), everything looks normal again. Co ...

jquerycss

JavaScript-generated div not recognizing CSS in Internet Explorer

Once again, dealing with Internet Explorer has become a major headache. On headset.no, we have incorporated a small blue search field. However, when you input "jabra" into the field, it should generate suggestions in a div underneath. This feature operates ...

javascripthtmlcssinternet-explorer