Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как выровнять форму авторизации по центру с табами? Bootstrap 4 / 18 сообщений из 18, страница 1 из 1
10.01.2019, 01:39
    #39757575
Tsyklop
Tsyklop
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять форму авторизации по центру с табами? Bootstrap 4
Суть в чем. Есть форма. Но форма не простая, а с табами. С табами Авторизация, Регистрация, Правила.

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

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

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

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

Может вообще по другому сделать надо.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.01.2019, 01:58
    #39757576
Relic Hunter
Relic Hunter
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять форму авторизации по центру с табами? Bootstrap 4
Tsyklop,

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
<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>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.01.2019, 02:05
    #39757577
Tsyklop
Tsyklop
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять форму авторизации по центру с табами? Bootstrap 4
Relic Hunter, Как влияет на вертикальное выравнивание?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.01.2019, 02:13
    #39757578
Relic Hunter
Relic Hunter
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять форму авторизации по центру с табами? Bootstrap 4
Tsyklop,

Сделайте три строки, три колонки. Форму поместите ффцентр.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.01.2019, 02:17
    #39757579
Tsyklop
Tsyklop
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять форму авторизации по центру с табами? Bootstrap 4
Relic HunterTsyklop, Сделайте три строки, три колонки. Форму поместите ффцентр.

Сделал. По ссылке обновил. Но почему-то ничего не изменилось
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.01.2019, 02:24
    #39757580
Relic Hunter
Relic Hunter
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять форму авторизации по центру с табами? Bootstrap 4
Tsyklop,
дак, форматирование убери...
Код: html
1.
 <div class="row justify-content-center text-center align-items-center align-middle h-100">
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.01.2019, 02:36
    #39757581
Relic Hunter
Relic Hunter
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять форму авторизации по центру с табами? Bootstrap 4
Ну и строки разбить равномерно по вертикали

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
 <div class="row" style="height:30%">
        <div class="col-3">
            
        </div>
        <div class="col-3">
            
        </div>
        <div class="col-3">
            
        </div>
</div>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.01.2019, 11:40
    #39757736
Tsyklop
Tsyklop
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять форму авторизации по центру с табами? Bootstrap 4
Relic Hunter, Обновил. так?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.01.2019, 11:55
    #39757745
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять форму авторизации по центру с табами? Bootstrap 4
Tsyklop,

за такое мигание при переключении - убил бы....
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.01.2019, 12:25
    #39757771
Tsyklop
Tsyklop
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять форму авторизации по центру с табами? Bootstrap 4
вадяTsyklop, за такое мигание при переключении - убил бы....
какое такое мигание? не пойму.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.01.2019, 12:39
    #39757782
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять форму авторизации по центру с табами? Bootstrap 4
Tsyklopкакое такое мигание? не пойму.когда происходит переключение между табами, содержимое таба появляется плавно, а исчезает быстро.
эту анимацию лучше убрать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.01.2019, 12:46
    #39757792
Tsyklop
Tsyklop
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять форму авторизации по центру с табами? Bootstrap 4
вадяTsyklopкакое такое мигание? не пойму.когда происходит переключение между табами, содержимое таба появляется плавно, а исчезает быстро.
эту анимацию лучше убрать.
Сколько эта анимацию у бутстрапа есть никто не жаловался. а теперь вдруг не так. Странно как-то. не находите? было бы не очень команда бутстрапа убрала, а так все пользуются и все довольны.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.01.2019, 13:04
    #39757819
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять форму авторизации по центру с табами? Bootstrap 4
TsyklopСколько эта анимацию у бутстрапа есть никто не жаловался. а теперь вдруг не так. Странно как-то. не находите? было бы не очень команда бутстрапа убрала, а так все пользуются и все довольны.при переходе с Авторизации на Регистрация - поля пропадают и медленно появляются,
при переходе Регистрация на Авторизация - никакой анимации нет
и это намного приятнее для глаз
то что кому-то нравится из команды бутстрапа не есть истина, в таких командах любят всякие извращения, но не исследуют их воздействие и прочее.
но после нескольких переключений мне не захотелось что-то дальше пробовать. глаза устали моментом....
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.01.2019, 13:07
    #39757821
Tsyklop
Tsyklop
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять форму авторизации по центру с табами? Bootstrap 4
вадя, да, заметил. Предполагаю что это из-за того что вкладки похожи ибо поля ввода. Поэтому особо разницы нет для анимации. Ведь если переключать с правил на любую другую анимация есть. Изобретать велосипед при написании своих табов не очень хочется.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.01.2019, 13:15
    #39757835
Tsyklop
Tsyklop
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять форму авторизации по центру с табами? Bootstrap 4
вадя, а нет. у вкладки не было класса который добавляет анимацию)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.01.2019, 13:22
    #39757844
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять форму авторизации по центру с табами? Bootstrap 4
Tsyklop,

для меня минус в том что в первом переключении происходит "моргание" - резкое исчезание и плавное появление - очень неприятное для глаз. особенно когда информация не изменяется в восприятии глаза.
при переходе на Авторизация с любого таба - плавного появления нет, и это воспринимается более адекватно.
при плавном появлении мозг пытается понять что происходит - напрягает глаза. это создаёт задержку в восприятии данных, отвлекает.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.01.2019, 13:23
    #39757845
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять форму авторизации по центру с табами? Bootstrap 4
Tsyklopвадя, а нет. у вкладки не было класса который добавляет анимацию)я не рассматривал что там в коде , просто зафиксировал факт, от чего зависит плавность появления - это надо рассматривать исходники...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.01.2019, 13:27
    #39757850
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять форму авторизации по центру с табами? Bootstrap 4
Tsyklopу вкладки не было класса который добавляет анимациюв этом вся прелесть таких поделок как бутстрап, кто-то что-то под себя наделал, а другие не могут найти что и как исправить ....
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как выровнять форму авторизации по центру с табами? Bootstrap 4 / 18 сообщений из 18, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 244ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1443910]:
 0ms
get settings:
 8ms
get forum list:
 12ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 149ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 43ms
get tp. blocked users:
 1ms
others: 9ms
total:  244ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]