1 - Changing .modalcontent position to relative instead of absolute.
2 - Setting the top value to 0 for .modalcontent
3 - Setting overflow to hidden for .modalcontent
4 - Setting overflow to scroll for .modalinner
5 - Adding .modalfooter before the closing tag for .modalcontent 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 TailorElement 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 .modalcontent position to relative instead of absolute. 2 - Setting the top value to 0 for .modalcontent 3 - Setting overflow to hidden for .modalcontent 4 - Setting overflow to scroll for .modalinner
5 - Adding .modalfooter before the closing tag for .modalcontent 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