Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Как выровнять форму авторизации по центру с табами? Bootstrap 4  [new]
Tsyklop
Member

Откуда: Украина
Сообщений: 1009
Суть в чем. Есть форма. Но форма не простая, а с табами. С табами Авторизация, Регистрация, Правила.

В гугле нашел как выровнять блок на центру страницы. Но вот фигня в том что если переключать табы (а они разной высоты) то блок меняет размер.

Увидеть это можно тут: https://www.codeply.com/go/zjrSL7SkaE

Если вы нажмете на Правила, то форма станет выше и заголовки табов прыгают вверх. То бишь юзеру придется гонятся за блоком что бы переключить вкладку.

Как можно сделать так что бы форма оставалась на месте (то бишь по центру), но высота менялась вниз страницы.

Может вообще по другому сделать надо.
10 янв 19, 01:39    [21781156]     Ответить | Цитировать Сообщить модератору
 Re: Как выровнять форму авторизации по центру с табами? Bootstrap 4  [new]
Relic Hunter
Member

Откуда: AB
Сообщений: 6962
Tsyklop,

<div class="container h-100">
    <div class="row ">
        <div class="col-3"></div>
        <div class="col-6">
        your form is here 
        </div>
        <div class="col-3"></div>
    </div>
10 янв 19, 01:58    [21781157]     Ответить | Цитировать Сообщить модератору
 Re: Как выровнять форму авторизации по центру с табами? Bootstrap 4  [new]
Tsyklop
Member

Откуда: Украина
Сообщений: 1009
Relic Hunter, Как влияет на вертикальное выравнивание?
10 янв 19, 02:05    [21781158]     Ответить | Цитировать Сообщить модератору
 Re: Как выровнять форму авторизации по центру с табами? Bootstrap 4  [new]
Relic Hunter
Member

Откуда: AB
Сообщений: 6962
Tsyklop,

Сделайте три строки, три колонки. Форму поместите ффцентр.
10 янв 19, 02:13    [21781159]     Ответить | Цитировать Сообщить модератору
 Re: Как выровнять форму авторизации по центру с табами? Bootstrap 4  [new]
Tsyklop
Member

Откуда: Украина
Сообщений: 1009
Relic Hunter
Tsyklop, Сделайте три строки, три колонки. Форму поместите ффцентр.


Сделал. По ссылке обновил. Но почему-то ничего не изменилось
10 янв 19, 02:17    [21781160]     Ответить | Цитировать Сообщить модератору
 Re: Как выровнять форму авторизации по центру с табами? Bootstrap 4  [new]
Relic Hunter
Member

Откуда: AB
Сообщений: 6962
Tsyklop,
дак, форматирование убери...
 <div class="row justify-content-center text-center align-items-center align-middle h-100">
10 янв 19, 02:24    [21781161]     Ответить | Цитировать Сообщить модератору
 Re: Как выровнять форму авторизации по центру с табами? Bootstrap 4  [new]
Relic Hunter
Member

Откуда: AB
Сообщений: 6962
Ну и строки разбить равномерно по вертикали

 <div class="row" style="height:30%">
        <div class="col-3">
            
        </div>
        <div class="col-3">
            
        </div>
        <div class="col-3">
            
        </div>
</div>
10 янв 19, 02:36    [21781162]     Ответить | Цитировать Сообщить модератору
 Re: Как выровнять форму авторизации по центру с табами? Bootstrap 4  [new]
Tsyklop
Member

Откуда: Украина
Сообщений: 1009
Relic Hunter, Обновил. так?
10 янв 19, 11:40    [21781374]     Ответить | Цитировать Сообщить модератору
 Re: Как выровнять форму авторизации по центру с табами? Bootstrap 4  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15684
Tsyklop,

за такое мигание при переключении - убил бы....
10 янв 19, 11:55    [21781396]     Ответить | Цитировать Сообщить модератору
 Re: Как выровнять форму авторизации по центру с табами? Bootstrap 4  [new]
Tsyklop
Member

Откуда: Украина
Сообщений: 1009
вадя
Tsyklop, за такое мигание при переключении - убил бы....

какое такое мигание? не пойму.
10 янв 19, 12:25    [21781433]     Ответить | Цитировать Сообщить модератору
 Re: Как выровнять форму авторизации по центру с табами? Bootstrap 4  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15684
Tsyklop
какое такое мигание? не пойму.
когда происходит переключение между табами, содержимое таба появляется плавно, а исчезает быстро.
эту анимацию лучше убрать.
10 янв 19, 12:39    [21781454]     Ответить | Цитировать Сообщить модератору
 Re: Как выровнять форму авторизации по центру с табами? Bootstrap 4  [new]
Tsyklop
Member

Откуда: Украина
Сообщений: 1009
вадя
Tsyklop
какое такое мигание? не пойму.
когда происходит переключение между табами, содержимое таба появляется плавно, а исчезает быстро.
эту анимацию лучше убрать.

Сколько эта анимацию у бутстрапа есть никто не жаловался. а теперь вдруг не так. Странно как-то. не находите? было бы не очень команда бутстрапа убрала, а так все пользуются и все довольны.
10 янв 19, 12:46    [21781467]     Ответить | Цитировать Сообщить модератору
 Re: Как выровнять форму авторизации по центру с табами? Bootstrap 4  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15684
Tsyklop
Сколько эта анимацию у бутстрапа есть никто не жаловался. а теперь вдруг не так. Странно как-то. не находите? было бы не очень команда бутстрапа убрала, а так все пользуются и все довольны.
при переходе с Авторизации на Регистрация - поля пропадают и медленно появляются,
при переходе Регистрация на Авторизация - никакой анимации нет
и это намного приятнее для глаз
то что кому-то нравится из команды бутстрапа не есть истина, в таких командах любят всякие извращения, но не исследуют их воздействие и прочее.
но после нескольких переключений мне не захотелось что-то дальше пробовать. глаза устали моментом....
10 янв 19, 13:04    [21781508]     Ответить | Цитировать Сообщить модератору
 Re: Как выровнять форму авторизации по центру с табами? Bootstrap 4  [new]
Tsyklop
Member

Откуда: Украина
Сообщений: 1009
вадя, да, заметил. Предполагаю что это из-за того что вкладки похожи ибо поля ввода. Поэтому особо разницы нет для анимации. Ведь если переключать с правил на любую другую анимация есть. Изобретать велосипед при написании своих табов не очень хочется.
10 янв 19, 13:07    [21781513]     Ответить | Цитировать Сообщить модератору
 Re: Как выровнять форму авторизации по центру с табами? Bootstrap 4  [new]
Tsyklop
Member

Откуда: Украина
Сообщений: 1009
вадя, а нет. у вкладки не было класса который добавляет анимацию)
10 янв 19, 13:15    [21781534]     Ответить | Цитировать Сообщить модератору
 Re: Как выровнять форму авторизации по центру с табами? Bootstrap 4  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15684
Tsyklop,

для меня минус в том что в первом переключении происходит "моргание" - резкое исчезание и плавное появление - очень неприятное для глаз. особенно когда информация не изменяется в восприятии глаза.
при переходе на Авторизация с любого таба - плавного появления нет, и это воспринимается более адекватно.
при плавном появлении мозг пытается понять что происходит - напрягает глаза. это создаёт задержку в восприятии данных, отвлекает.
10 янв 19, 13:22    [21781553]     Ответить | Цитировать Сообщить модератору
 Re: Как выровнять форму авторизации по центру с табами? Bootstrap 4  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15684
Tsyklop
вадя, а нет. у вкладки не было класса который добавляет анимацию)
я не рассматривал что там в коде , просто зафиксировал факт, от чего зависит плавность появления - это надо рассматривать исходники...
10 янв 19, 13:23    [21781555]     Ответить | Цитировать Сообщить модератору
 Re: Как выровнять форму авторизации по центру с табами? Bootstrap 4  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15684
Tsyklop
у вкладки не было класса который добавляет анимацию
в этом вся прелесть таких поделок как бутстрап, кто-то что-то под себя наделал, а другие не могут найти что и как исправить ....
10 янв 19, 13:27    [21781563]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить