Блог

Главная - Вопросы по программированию - Как поместить «карусельный» div внутри «oe_structure» без перекрытия

Как поместить «карусельный» div внутри «oe_structure» без перекрытия

#css #layout #bootstrap-4 #carousel #odoo-13

#css #макет #bootstrap-4 #карусель #odoo-13

Вопрос:

Мне нужно поместить «карусельный» div внутри «oe_structure», но не работает корректно, «карусель» :

Я редактирую шаблон «website_sale.products»

Я новичок в odoo, могу ли я наследовать в своем прямом коде для редактирования? но я до сих пор не знаю, как поместить ползунок внутри div, как показано на рисунке!

ссылка на код, который я использую:

https://codeshare.io/2pBqez

Моя ошибка с div carousel: введите описание изображения здесь

Комментарии:

1. Привет, можете ли вы поделиться CSS / JS и другими листами? Я НЕ могу воспроизвести вашу страницу только с помощью кода, которым вы поделились, спасибо

2. Привет @LaurentC, технология Odoo13! которые наследуют компоненты, то есть у меня нет css или js!

3. Я вижу. Это прискорбно. Хорошо, я дам вам небольшую небольшую демонстрацию, и вы можете попробовать реализовать в своем коде? В противном случае мне понадобился бы прямой доступ к вашей CMS, чтобы помочь больше.

4. Итак, если вы можете использовать / добавлять пользовательский код, вы можете добавить свой код карусели и расположить его, используя один из 3 предложенных мной методов, дайте мне знать, если вам нужна помощь

5. @LaurentC спасибо. Конечно, мы можем создать живой доступ! проблема в том, что когда я помещаю div с помощью class: row o_wsale_products_main_row, если я упоминаю, что я новичок в Odoo и работаю над улучшением своих способностей в Python!

Ответ №1:

 <div class="container">
  <div class="square"><div>
    <div class="s-square">
</div>
  
 .container {
  width:80%;background:lightgray;height:500px;margin-left:10%;
  display:flex;justify-content:center;align-items:center;
} /* this container is positioned using a left-margin */

.square {width:250px;height:250px;background:white;position:relative;} /*this square is positioned by the flexbox display of its parent container (.container) */

.s-square {height:100px;width:100px;background:blue;position:absolute;top:50px;left:60px;3px dashed purple;} /* this is absolute positioning and should be avoided as much as possible b/c not very responsive-friendly */