2

I am having some trouble styling filepicker.io widgets for web, specifically filepicker-dragdrop.

Is there any way to disable the inline styling and replace them with classes? Something like data-fp-disable-styles or perhaps when using data-fp-dropzone-class="..." the inline styling is automatically disabled.

Although you can add classes to the button with the attribute data-fp-button-class, I cannot get rid of the inline styling on the on the dropzone and container div.

Bill the Lizard
  • 398,270
  • 210
  • 566
  • 880
Stan Bondi
  • 4,118
  • 3
  • 24
  • 35

1 Answers1

2

You can set the data-fp-drag-class and data-fp-class options to set the styling of the dropzone and container div and use the !important flag for any styles that you want to use to override the inline styles.

If you're looking for a more fully customizable solution, we'd recommend using the raw javascript api's to create your own drag pane (https://developers.filepicker.io/docs/web/#widgets-droppane) and/or pick button

brettcvz
  • 2,371
  • 1
  • 13
  • 14
  • 1
    Having to use the !important flag is far from ideal. Any plans for there to be a way to remove inline styling? – Stan Bondi Oct 29 '12 at 08:42
  • Hi @brettcvz, I shared some points with Liyan over at http://stackoverflow.com/a/12380103/895007 with regards to not injecting styles when a class is specified. – Larry Oct 29 '12 at 09:00
  • @StanBondi How would I use !important to override Filepicker styles when my CSS would be loaded from a different domain, that wouldn't apply to the iframe? – mikemaccana Nov 06 '12 at 15:18
  • @nailer I was referring to the dropzone widget for input type="filepicker-dropzone" which is generated by JavaScript, not the pop-up dialog. – Stan Bondi Nov 08 '12 at 20:40
  • @nailer You can apply CSS to the dialog iframe using the filepickerio developer portal – Stan Bondi Nov 09 '12 at 10:41