Html Выбор / выпадающий список не находится под ним - он смещается на полосу прокрутки

Question

На обычной веб-странице этот выпадающий список отображается с меню под 0px, однако, когда он находится в iFrame на веб-сайте SharePoint, выпадающий список смещен, а смещение по оси y связано с полосой прокрутки страниц:

происходит только в Chrome, а не IE, не может проверить атм FF и не происходит в FF.

Я искал CSS стилей, но не могу сузить его, я думаю, что родительская страница SharePoint переопределяет его, и мне интересно, кто-нибудь еще видел и решил эту проблему?

Как я уже сказал работает нормально, но в iFrame только на работающем сервере SharePoint я получаю это странное смещение! Это ваниль HTML Выберите:

    <div id="awsCertList">
            <div class="form-group">        
            <label class="control-label">AWS Certification: </label>
            <select id="awsCertChoice" name="awsCertChoice" class=""> 

                    <option value="1">AWS Cloud Practitioner</option>

                    <option value="2">AWS Alexa Skill Builder</option>

                    <option value="4">AWS Developer Associate</option>

                    <option value="6">AWS Solution Architect Professional</option>

                    <option value="7">AWS DevOps Professional</option>

                    <option value="8">AWS Security</option>

                    <option value="9">AWS Networking</option>

                    <option value="10">AWS Big Data</option>

                    <option value="11">AWS Machine Learning</option>

            </select>
            </div>
        </div>

Обновление:

Каким-то образом, когда я снимаю флажок и перепроверяю это свойство, список появляется прямо ниже, как и ожидалось:

.s4-wpcell, .s4-wpcell-plain, .s4-wpActive {
    vertical-align: top;

Обновление 2:

Когда я прокручиваю и изменяю ширину страниц, которая исправляет это. Я копался с Javascript в событиях прокрутки, используя отладчик Chrome на живом сайте. Я не могу воспроизвести его локально, даже когда я сохраняю страницу SharePoint, раскрывающийся список ведет себя, как и ожидалось, со списком непосредственно под ним.

Answer 1

В итоге я использовал html, CSS и JavaScript, и нашел отличный справочный пример.

Раскрывающийся список моделируется с помощью CSS, а пункты меню являются тегами LI.

dropdown .dropdown-menu {
    position: absolute;
    background-color: #fff;
    width: 100%;
    left: 0;
    margin-top: 1px;
    box-shadow: 0 1px 2px rgb(204, 204, 204);
    border-radius: 0 1px 5px 5px;
    overflow: hidden;
    display: none;
    max-height: 144px;
    overflow-y: auto;
    z-index: 9
}
.dropdown .dropdown-menu li {
    padding: 10px;
    transition: all .2s ease-in-out;
    cursor: pointer
} 
.dropdown .dropdown-menu {
    padding: 0;
    list-style: none
}
.dropdown .dropdown-menu li:hover {
    background-color: #f2f2f2
}
.dropdown .dropdown-menu li:active {
    background-color: #e2e2e2
}

Ссылка