WebComponent support - specify where dynamic styles go instead of head #540

Activity

1. radiolips

   added

   type:enhancement

   on Nov 1, 2016
2. IftachSadeh commented on Jan 25, 2017

   

   IftachSadeh

   on Jan 25, 2017

   More actions

   Hey radiolips,

   Can you please say if this is expected to be fixed? Currently use with polymer is simply impossible.
   If it's not a priority, is there a recommended workaround in the meantime?
3. VinodLouis commented on Aug 24, 2017

   

   VinodLouis

   on Aug 24, 2017

   More actions

   Any one got workaround for this ?
4. VinodLouis commented on Aug 25, 2017

   

   VinodLouis

   on Aug 25, 2017

   Last edited by adumesny

   More actions

   I tried something in case if anyone is interested https://github.com/VinodLouis/polymer-gridstack

   [adumesny] Note: this code IS NOT BASED on gristack (nor maintained), or is older than 2014.
5. radiolips commented on May 10, 2018

   

   radiolips

   on May 10, 2018

   Member

   More actions

   @VinodLouis Can you create a PR with changes such that gridstack would work as a web component?
6. adumesny

   changed the title [-]Adjustable node for dynamic height styles[/-] [+]WebComponent support - specify where dynamic styles go instead of head[/+] on Dec 22, 2019
7. adumesny commented on Dec 22, 2019

   

   adumesny

   on Dec 22, 2019

   Last edited by adumesny

   Member

   More actions

   I use angular component for this lib, and having local to that components styles would be better and might be using webcomponents soon as well.

   @VinodLouis wish you had done a PR instead of creating a fork off the code!

   looking at your file you have var GridStackEngine = function (width, onchange) which means it is very very old (or not based on gridstack but maybe gridster?) as the float param feature was added back in 11/19/2014 2 days after this project started....
   (all the methods were renamed to camelCase in 2/17/2016 which do you not have either). And you released your in Aug 2017 ???

   Note: that gridstack auto-generated CSS files added to the head on 11/25/2014 (for y and height in px) which you don't do
   Note2: the only real change I see vs our first file (other than missing float, oneColumn, etc...) is changed
   appendTo: 'body', to appendTo: 'parent',
8. adumesny commented on Feb 17, 2020

   

   adumesny

   on Feb 17, 2020

   Last edited by adumesny

   Member

   More actions

   the offending code is:

   var Utils = {
     createStylesheet: function(id) {
       var style = document.createElement('style');
       style.setAttribute('type', 'text/css');
       style.setAttribute('data-gs-style-id', id);
       if (style.styleSheet) {
         style.styleSheet.cssText = '';
       } else {
         style.appendChild(document.createTextNode(''));
       }
       document.getElementsByTagName('head')[0].appendChild(style);
       return style.sheet;
     },
   
     removeStylesheet: function(id) {
       $('STYLE[data-gs-style-id=' + id + ']').remove();
     },
   }

   which can be overridden using:

   $(function () {
     window.GridStackUI.Utils.createStylesheet = function(id) {
       //...new code...
     };
   
     $('.grid-stack').gridstack();
   ...
   });
9. adumesny commented on Feb 17, 2020

   

   adumesny

   on Feb 17, 2020

   Member

   More actions

   sorry for taking so long to address. fixed in 0.6.4
10. adumesny

    closed this as completedon Feb 17, 2020
11. adumesny

    added a commit that references this issue on May 12, 2020

    WebComponent support

    ...

    This issue will close once commit 2510e3a is merged into the 'master' branch.

    2510e3a