Не работает выравнивание

404
24 ноября 2016, 10:18

Помогите, в следующем коде не работает выравнивание. Выравнивает только высоту, то есть 60px

document.getElementById('formpoik').style.margin = '60px 0px 0px 0px';

Подскажите что делать и как прописать margin-left

JS

$(window).scroll(function() {
    if ($(this).scrollTop() > 1) {  
        $('header').addClass("sticky"); 
        document.getElementById('menupo').style.display = 'none';
        document.getElementById("formpoik").style.marginLeft = "100px";
    } else {
        $('header').removeClass("sticky");
        document.getElementById('menupo').style.margin = '';
        document.getElementById("{formpoik}").style["marginLeft"] = "100px";
    }
});

HTML

<form id="formpoik" class="form-wrapper cf">
    <input type="text" placeholder="Введите здесь слово, которое нужно найти..." required>
    <button type="submit">Искать</button>
</form>

CSS

#formpoik {
    margin: 60px 100px 0px 0px;
}

Пробовал

document.getElementById("{element id}").style.marginLeft = "20px";
document.getElementById("{element id}").style["marginLeft"] = "20px";
$("#{element id}").css("margin-left", "20px");

Не реагирует никак, но если в CSS меняешь, то всё нормально меняется, а в scroll вообще ни в какую.

Весь CSS код формы поиска

    /*форма поиска*/
 /*-------------------------------------*/
.cf:before, .cf:after{
  content:"";
  display:table;
}
.cf:after{
  clear:both;
}
.cf{
  zoom:1;
}
/*-------------------------------------*/   
.form-wrapper {
/*Размеры формы*/
width: auto;
max-width: 1500px;
min-width: 50px;
min-height: 0px;
height: 28px;
padding: 5px; /*Размеры рамки*/
background: #444;
background: rgba(0,0,0,.2);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /*закругление рамки*/
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
overflow-x: visible;
float: right;
}
.form-wrapper input {
    width: 680px; /*Ширина строки поиска*/
    height: 7px; /*Высота строки поиска*/
    padding: 10px 5px; /*Высота строки поиска*/ /*Ширина строки поиска*/
    float: left;    /*Выравнивание поискового поля относительно кнопкия*/
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma'; 
    border: 0; /*Отключение рамки поиска*/
    background: #eee;
    -moz-border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;      
}
.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}
.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}    

.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 27px; /*Высота кнопки*/
    width: 110px;
    font: bold 15px/30px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #d83c3c;
    -moz-border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;      
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}   
.form-wrapper button:hover{     
    background: #e54040;
}   
.form-wrapper button:active,
.form-wrapper button:focus{   
    background: #c42f2f;    
}
.form-wrapper button:before {
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    top: 6px; /*Курсор формы поиска*/
    left: -6px;
}
.form-wrapper button:hover:before{
    border-right-color: #e54040;
}
.form-wrapper button:focus:before{
    border-right-color: #c42f2f;
}    
.form-wrapper button::-moz-focus-inner {
    border: 0;
    padding: 0;
}
    #formpoik {
        margin: 60px 100px 0px 0px;
        }
Answer 1
document.getElementById("myDiv").style.marginLeft = "50px";
Answer 2

Всем большое спасибо, нашёл решение проблемы добавил position:absolute; в #formpoik

READ ALSO
Как дождаться загрузки шрифта?

Как дождаться загрузки шрифта?

Использую Angular2 и webpack. Стили подключены к компонентам, инкапсуляция не используется.

412
Слайдер swiper. Как исправить баг в IE?

Слайдер swiper. Как исправить баг в IE?

Использую для верстки слайдер swiper. На одной из страниц сайта предполагается наличие большого количества блоков-товаров, в каждом из которых...

604
Как вставить логотип на шапку сайта?

Как вставить логотип на шапку сайта?

Не получается вставить логотип на шапку.

413
Как сделать на CSS неполную обводку круга?

Как сделать на CSS неполную обводку круга?

Как на CSS сделать неполную обводку круга? .

602