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
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