ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Не варавнивается чекбокс рядом с картинкой
8 сообщений из 8, страница 1 из 1
Не варавнивается чекбокс рядом с картинкой
    #39814833
mstdmstd
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mstdmstd
Участник
сем привет,
В bootstrap 4.3 / vuejs 2.5 приложении есть список где слева от картинки есть чекбокс и который не получается выставить посередине по высоте
https://prnt.sc/nq4li6

То есть если картинка отсутствует то выравниается нормально. А если есть картинка - то ломает дизайн.

Делал так:

<div class="card float-right">
<div class="card-body">

<div class="row">


<div class="col-12 col-sm-3 m-0 p-1 align-self-center align-middle">

<div class="row align-middle pl-3">
<div class="col-1 float-left align-middle pl-3">
<input type="checkbox" class="custom-control-input align-middle" :id="'next_search_result_id_'+ nextSearchResult.Id"
:value="nextSearchResult.Id" v-model="nextSearchResult.is_checked">
<label class="custom-control-label" :for="'next_search_result_id_'+ nextSearchResult.Id"></label>
</div>
<div class="col-11 float-right align-self-center align-middle" v-if="nextSearchResult.PictureUrl">
<img :src="nextSearchResult.PictureUrl" alt="" class=" mx-auto d-block" style="width:160px; height: auto; ">
</div>
</div>
</div><!--end col-->


Посмотреть вживую можно тут :
http://178.128.145.48/login
demo@demo.com wdemo

Должна открыться страница http://178.128.145.48/websites-blogs

2) Посмотрите, пожалуйста, на общий дизайн этой страницы : Включая нажатие на “Filter” с открытием панели с фильтрами и “Search”
с открывающимся списком данных(он загружается автоматически). И фильтры и результирующие данные имею много элементов - это упорядодить доволно тяжело ...

Спасибо!
...
Рейтинг: 0 / 0
18.05.2019, 10:34
| Ответить | Цитировать | Написать  
Не варавнивается чекбокс рядом с картинкой
    #39814860
fkthat
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
fkthat
Участник
ни к <div class=row> ни к <div class=col> "align-middle" применять смысла нет - оно работает только для инлайновых елементов. Прицепи к <div class="col"> еще классы "d-flex flex-collumn justify-content-center" и будет тебе щастье. Только еще надо высоту задать. Да, и флоаты там вообще ни к селу ни к городу.

Как-то так

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
<div class="row" style="height: 160px">
   <div class="col-1 h-100 d-flex flex-column justify-content-center">
        <input type="checkbox" id="next_search_result_id_3088294" class="custom-control-input align-middle" value="3088294">
            <label  for="next_search_result_id_3088294" class="custom-control-label"></label>
   </div>
   <div class="col-11">
            <img src="https://graph.facebook.com/150217294184/picture?type=small" alt="" class=" mx-auto d-block" style="width: 160px; height: auto;">
   </div>
</div>
...
Рейтинг: 0 / 0
18.05.2019, 12:53
| Ответить | Цитировать | Написать  
Не варавнивается чекбокс рядом с картинкой
    #39814902
mstdmstd
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mstdmstd
Участник
я попытался так сделать - но не получилось и весь дизайн поломался...
Взгляните пжлста еще раз...
...
Рейтинг: 0 / 0
18.05.2019, 18:14
| Ответить | Цитировать | Написать  
Не варавнивается чекбокс рядом с картинкой
    #39814915
fkthat
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
fkthat
Участник
mstdmstdя попытался так сделать - но не получилось и весь дизайн поломался...
Взгляните пжлста еще раз...
Ну, у тебя там, если честно, то вообще такой ад, что надо все переделывать, полный ахтунг. Я бы на твоем месте вообще одним-единственным тейблом обошелся и парой-тройкой стилей для шрифтов и проч.

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<table>
    <tr>
        <td class="align-middle>
            <!-- здесь чекбокс -->
        </td>
        <td>
            <!-- здесь картинка -->
        </td>
        <td>
            <!-- здесь описание -->
        </td>
    </tr>
</table>



По сути, ничего более сложного там не надо. А сейчас там у тебя какая-то жуткая мешанина из бутстреповского грида, таблиц и флоатов.
...
Рейтинг: 0 / 0
18.05.2019, 22:30
| Ответить | Цитировать | Написать  
Не варавнивается чекбокс рядом с картинкой
    #39814946
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
fkthat,
ну табличная верстка может спасти, но как бы это не дело в современном времени..
...
Рейтинг: 0 / 0
19.05.2019, 08:25
| Ответить | Цитировать | Написать  
Не варавнивается чекбокс рядом с картинкой
    #39814948
fkthat
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
fkthat
Участник
вадяfkthat,
ну табличная верстка может спасти, но как бы это не дело в современном времени..

То, что макет страницы не следует делать таблицами, это не означает, что там где должна быть таблица следует переделывать её на div-ы. А тут просто по смыслу должна быть таблица. Какой-нибудь список "товар - количество - цена" тоже дивами верстать станешь по принципу "лишь бы не таблица"?
...
Рейтинг: 0 / 0
19.05.2019, 08:58
| Ответить | Цитировать | Написать  
Не варавнивается чекбокс рядом с картинкой
    #39814950
mstdmstd
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mstdmstd
Участник
Спасибо за советы!
Я переделал - на мой взгляд стало лучше
Но я не смог удалить бордюры сверху : https://prnt.sc/nqg17v
Как это сделать ?

2) Посмотрите, пожалуйста, на общий дизайн этой страницы : Включая нажатие на “Filter” с открытием панели с фильтрами и “Search” 
с открывающимся списком данных(он загружается автоматически). И фильтры и результирующие данные имею много элементов - это упорядодить доволно тяжело ...

3) Слева вверху есть меню перехода на страницу “User's list”. Посмотрите, пожалуйста, на общий дизайн этой страницы на выявление ляпов в верстке .
...
Рейтинг: 0 / 0
19.05.2019, 09:26
| Ответить | Цитировать | Написать  
Не варавнивается чекбокс рядом с картинкой
    #39814960
fkthat
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
fkthat
Участник
mstdmstd,

Нужно просто поиграться со стилями border для table, tr, td этой таблицы. Конкретно сразу не сказать, потому что не видно нового HTML, а только картинка.
...
Рейтинг: 0 / 0
19.05.2019, 10:50
| Ответить | Цитировать | Написать  
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Не варавнивается чекбокс рядом с картинкой
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=39814946&tid=1443781]:
 0ms
get settings:
 10ms
get forum list:
 12ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 67ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 44ms
get tp. blocked users:
 2ms
others: 11ms
total:  168ms
созд. / загр.: 168ms
x
x
Закрыть


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