Elements model window css problem

[beshoydawood]

Hello Tailor Team,

I have extended Tailor_Element class with other elements but the problem is these element's model window have more than 3 tabs which result as the following:

Solution using pure CSS:

1 - Changing .modal__content position to relative instead of absolute.
2 - Setting the top value to 0 for .modal__content
3 - Setting overflow to hidden for .modal__content
4 - Setting overflow to scroll for .modal__inner
5 - Adding .modal__footer before the closing tag for .modal__content div

Solution using Javascipt:

Using javascript to detect the top value for .modal__content depending on the number of section tabs.

Solution using Javascript and CSS:

Adding extra class to model window if the tabs width is larger than the inner width then apply extra top value for .model__content using this class