search

PolymerElements / iron-autogrow-textarea

Textarea that grows in height as more lines of input are entered
https://webcomponents.org/element/PolymerElements/iron-autogrow-textarea
19 stars 48 forks source link

Question: Styling textarea scrollbar #60

Open emiliedebra opened 8 years ago

emiliedebra commented 8 years ago

After a few hours of trying multiple combinations, including using mixins (--iron-autogrow-textarea) I could not find a way to style the scrollbar of this element using webkit-scrollbar styles, such as:

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

Is this possible? Any help on this would be appreciated!

emiliedebra commented 8 years ago

For reference - http://stackoverflow.com/questions/34209783/is-it-possible-to-style-the-iron-autogrow-textarea-scrollbar-in-polymer-1-x

notwaldorf commented 8 years ago

Hmmm, I don't think that's actually possible right now, but I could add some custom mixins for this. Is it only those 3 pseudoselectors that you need?

emiliedebra commented 8 years ago

This sounds like a generic problem, the above pseudoselectors were just an example (see here).

The only way I got this to work was to copy the iron-autogrow-textarea code, rename it and add the pseudoelements within the style tags. So I am not sure how this could be done using a mix-in.

  <style>
    :host {
      display: inline-block;
      position: relative;
      width: 400px;
      border: 1px solid;
      padding: 2px;
      -moz-appearance: textarea;
      -webkit-appearance: textarea;
    }

    ::-webkit-scrollbar {
        width: 6px!important
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,.2)
    }

    ::-webkit-scrollbar-track {
        background: rgba(255,255,255,.08)
    }
    ... 
  </style>
notwaldorf commented 8 years ago

With a mixin, there would be a --paper-text-area-scrollbar mixin available for you to use, like this

--paper-text-area-scrollbar: {
  width: 6px!important;

And internally, it would be used inside the paper-textarea as

  ::-webkit-scrollbar {
    @apply(--paper-text-area-scrollbar);
    }
mituldreamworld commented 7 years ago

Hi, we had same requirements and we added following css to style our scrollbar:

   <style is="custom-style" include="iron-flex">
      body {}
   </style>

  /* we added following style along with custom style*/
   <style type="text/css">
    ::-webkit-scrollbar {
       width: 8px;
       height: 8px;
   }

   ::-webkit-scrollbar-track {
       background-color: pink;
   }

   ::-webkit-scrollbar-thumb {
       cursor: pointer;
       background-color: pink;
   }
   </style>
ghost commented 7 years ago

I would welcome mixins for scrollbar styles of iron-autogrow-textarea (1.x branch) as well.

The selectors I use are:

nakul-niroula commented 1 year ago

I still cannot apply the Scroller CSS on iron-autogrow-textarea, any solution on this ? Here is my code: 

        <style is="custom-style">
          paper-textarea {
            word-break: break-word;

            --iron-autogrow-textarea: {
              box-sizing: border-box;
              overflow-y: auto;
              max-height: 150px;
            }
          }
        </style>
        </custom-style>

With a mixin, there would be a --paper-text-area-scrollbar mixin available for you to use, like this

--paper-text-area-scrollbar: {
  width: 6px!important;

And internally, it would be used inside the paper-textarea as

  ::-webkit-scrollbar {
    @apply(--paper-text-area-scrollbar);
    }