ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как выровнять форму авторизации по центру с табами? Bootstrap 4
18 сообщений из 18, страница 1 из 1
Как выровнять форму авторизации по центру с табами? Bootstrap 4
    #39757575
Tsyklop
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Tsyklop
Гость
Суть в чем. Есть форма. Но форма не простая, а с табами. С табами Авторизация, Регистрация, Правила.

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

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

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

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

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

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

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

Код: 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, 02:36
| Ответить | Цитировать | Написать  
Как выровнять форму авторизации по центру с табами? Bootstrap 4
    #39757736
Tsyklop
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Tsyklop
Гость
Relic Hunter, Обновил. так?
...
Рейтинг: 0 / 0
10.01.2019, 11:40
| Ответить | Цитировать | Написать  
Как выровнять форму авторизации по центру с табами? Bootstrap 4
    #39757745
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Tsyklop,

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

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


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