How do I remove the additional styling polymer attached to the paper label with the linked label?


hak8or

Now I have these two tab groups

<paper-tabs id="scrollableTabs" selected="2" scrollable link>
  <paper-tab> <a href="#link1">1</a> </paper-tab>
  <paper-tab> <a href="#link2">2</a> </paper-tab>
  <paper-tab> <a href="#link3">3</a> </paper-tab>
  <paper-tab> <a href="#top">Top</a> </paper-tab>
</paper-tabs>

<paper-tabs id="scrollableTabs" selected="2" scrollable >
  <paper-tab>1</paper-tab>
  <paper-tab>2</paper-tab>
  <paper-tab>3</paper-tab>
  <paper-tab>Top</paper-tab>
</paper-tabs>

This makes me look like I don't like the look and prefer the unlinkable style.

normal comparison

After messing around with css like this

  a {
    text-decoration: none;
    font-weight: 500;
  }

Gave me this better option, but I can't get the padding to work because I assume the padding is specified in the paper-tabs element when using the link attribute.

enter image description here

So, is there any way to get rid of the style added by the anchor tag in the polymer paper tab group when using the link attribute?

Justin XL

The link looks tall because the following CSS takes 100% of the space.

::content > a {
    height: 100%;
}

So the problem can be solved by setting heightback as default .auto

a {
    text-decoration: none;
    font-weight: 500;
    height: auto !important;
}

Or, if you don't want to !important, you can use /deep/or ::shadowupdate the Shadow DOM CSS. Here is an example using the latter.

paper-tab::shadow ::content > a {
    height: auto;
}

In Firefox the above ::shadowcode does not work, instead you can do

paper-tab .tab-content > a {
    height: auto;
}

Related


Polymer - Paper Input Floating Label Color

Václav Pavlíček How to change the color of a focused floating label in polymer? Thanks for your answer. lotus white The only way I've been able to fix this is: paper-input-decorator[focused] /deep/ .floating-label, paper-input-decorator[focused] /deep/ .label-

Polymer - Paper Input Floating Label Color

Václav Pavlíček How to change the color of a focused floating label in polymer? Thanks for your answer. lotus white The only way I've been able to fix this is: paper-input-decorator[focused] /deep/ .floating-label, paper-input-decorator[focused] /deep/ .label-

Polymer paper label input not added to form

Allen Try including an array field in a POST request with paper-tags-input . The table settings are as follows: <paper-dialog id="dialog" modal class="size-position"> <iron-form id="myForm" on-iron-form-response="_formResponse"> <form method="post" enctype="

Polymer - Paper Input Floating Label Color

Václav Pavlíček How to change the color of a focused floating label in polymer? Thanks for your answer. lotus white The only way I've been able to fix this is: paper-input-decorator[focused] /deep/ .floating-label, paper-input-decorator[focused] /deep/ .label-

Polymer paper mill not showing its label

Walid Ammar I've updated Polymer to v0.4.2; after this update, all paper-fablabels are gone and I can no longer display any text in them. Here is a demo Is there any way to bring them back? Jimmy Dough <polymer-element name="extended-fab" extends="paper-fab" a

Polymer - Paper Input Floating Label Color

Václav Pavlíček How to change the color of a focused floating label in polymer? Thanks for your answer. lotus white The only way I've been able to fix this is: paper-input-decorator[focused] /deep/ .floating-label, paper-input-decorator[focused] /deep/ .label-

Polymer - Paper Input Floating Label Color

Václav Pavlíček How to change the color of a focused floating label in polymer? Thanks for your answer. lotus white The only way I've been able to fix this is: paper-input-decorator[focused] /deep/ .floating-label, paper-input-decorator[focused] /deep/ .label-

Styling Polymer Paper Sliders

Ash So I'm essentially wrapping a standard element paper-sliderwith a custom element and would like to include some styling. Here is what I currently have: <dom-module id="my-slider"> <template> <style> /* Works */ paper-slider { --pape

How can I label the output and remove zeros?

Ed Jack Here is a program that simulates rolling a dice 20 times and marks the most consecutive numbers, the dice don't have 0, I don't know how to remove it, new to Java package diceroll; import java.util.Random; public class Roll { //public static void ma

How can I label the output and remove zeros?

Ed Jack Here is a program that simulates rolling a dice 20 times and marks the most consecutive numbers, the dice don't have 0, I don't know how to remove it, new to Java package diceroll; import java.util.Random; public class Roll { //public static void ma

Remove label section from paper text area

Justin I want to remove the extra space that the label takes up in the polymer text area. is it possible? Thank you. 16 --paper-input-container-label --paper-input-container-label-focus --paper-input-container-label-floating These three mixinscan be appli

In Polymer, how do I align paper toast top right

Franz Thomsen If I remember correctly, this has changed recently. Take a look at the example here: http://jsbin.com/fujasojilu/edit?html, output I want the same behavior as when it appears from the bottom left, but from the top right. How do I do this? Alan Dá

In Polymer, how do I align paper toast top right

Franz Thomsen If I remember correctly, this has changed recently. Take a look at the example here: http://jsbin.com/fujasojilu/edit?html, output I want the same behavior as when it appears from the bottom left, but from the top right. How do I do this? Alan Dá

How to remove label in userform?

wheelbarrow I have a UserForm with this function: Public MyVariable As String Private Sub UserForm_Initialize() [...my code...] End Sub To call my userform from a button, I do this: Sub CallUserForm_Appro() UserForm1.MyVariable = "Appro" UserForm1.Sh

How do I set a label for a route attribute?

and I have an action like this: [HttpGet] [Route("~/books/{id:int:min(1)}/{slug?}")] public ActionResult Book(int? id, string slug) { if (slug == null) { slug = "awesome-book"; return RedirectToAction("Book", new { id, slug }); }

How do I submit a form for an active label?

semkan My question: How can I use jquery/javascript to automatically submit the form for the "active" tag? I am using bootstrap. Label example: <ul class="nav nav-pills-homepage" id="tabsMenuID"> <li role="presentation" class="active"><a href="#firstTab" da

How do I set the path to the label file?

Maxim Gusev ctagsI am trying to set the path to the project file every time I close the *.c file and go to the terminal . I want the label file to be set when the code file is opened. Or, maybe... can I just set the label file for a special directory? Claudio

how do i change/update the label

Ahmed Arshad I'm trying to build a simple internet speed test application using pyqt5, I'm a beginner and trying to build a small application for learning GUI basics, so this is whenever I try to change the label text from the thread function The code indicati

how do i change/update the label

Ahmed Arshad I'm trying to build a simple internet speed test application using pyqt5, I'm a beginner and trying to build a small application for learning GUI basics, so this is whenever I try to change the label text from the thread function The code indicati