如何修改使用过的 css 框架产生的 css 内联元素？

Question

Considering the image below, i am wondering how can i change an inline css produce by the javascript from the framework i am using, MaterializeCSS . In my html i define this:

<ul id='profile-settings' class='dropdown-content' style="display: block; width: 250px !important; left: 124px !important; top: 87.5156px !important;">

but an output will always replace my code into this style(Maybe due to default style set by the javascript?):

<ul id='profile-settings' class='dropdown-content' style="display: block; width: 100px; left: 275px; top: 51.5156px; height: 194px; transform-origin: 100% 0px; opacity: 1; transform: scaleX(1) scaleY(1);">

I look the default javascript of the framework and i only find this one:

{key:"_handleMouseLeave",value:function(t){var e=t.toElement||t.relatedTarget,i=!!h(e).closest(".dropdown-content").length,n=!1,s=h(e).closest(".dropdown-trigger");s.length&&s[0].M_Dropdown&&s[0].M_Dropdown.isOpen&&(n=!0),n||i||this.close()}},{key:"_handleDocumentClick",value:function(t){var e=this,i=h(t.target);this.options.closeOnClick&&i.closest(".dropdown-content").length&&!this.isTouchMoving?setTimeout(function(){e.close()},0):!i.closest(".dropdown-trigger").length&&i.closest(".dropdown-content").length||setTimeout(function(){e.close()},0),this.isTouchMoving=!1}},{key:"_handleTriggerKeydown",value:function(t){t.which!==M.keys.ARROW_DOWN&&t.which!==M.keys.ENTER||this.isOpen||(t.preventDefault(),this.open())}},{key:"_handleDocumentTouchmove",value:function(t){h(t.target).closest(".dropdown-content").length&&(this.isTouchMoving=!0)}}

What should i do to change this default

    display: block;
    width: 100px;
    left: 275px;
    top: 51.5156px;
    height: 194px;
    transform-origin: 100% 0px;
    opacity: 1;
    transform: scaleX(1) scaleY(1);

into

    display: block;
    width: 250px;
    left: 124px;
    top: 87.5156px;
    height: 194px;
    transform-origin: 100% 0px;
    opacity: 1;
    transform: scaleX(1) scaleY(1);

Answer 1

You should try to put the code in a jquery or javascript code with setTimeout instead of writing it inline to ul. There's a javascript code overriding your inline style.

To do this:

setTimeout(function(){
   $('.profile-settings').css({
       'display':'block',
       'width':'250px',
       'left':'124px',
       'top':'87.5156px',
       'height':'194',
       'transform-origin':'100% 0',
       'opacity':'1',
       'transform':'scaleX(1) scaleY(1)'
   })
},1000);

That should apply the code that you want to apply. This is a bad practice in frontend side but if there's no other way just do it for now.

Answer 2

You can try what myonline suggested but with a click listener

$(document).ready(function() {
  $('.profile-settings').click(function() {
    $('.profile-settings').css({
      'display': 'block',
      'width': '250px',
      'left': '124px',
      'top': '87.5156px',
      'height': '194',
      'transform-origin': '100% 0',
      'opacity': '1',
      'transform': 'scaleX(1) scaleY(1)'
    })
  });
});

And make sure your script loads after your framework script.