i'm trying to use htmx's infinite scroll but it doesn't work properly
<body>
<div class="container">
{% block content %}
<div
{% if products.has_next %}
hx-get="?page={{ products.next_page_number }}"
hx-trigger="revealed"
hx-swap="afterend"
{% endif %}
>
{% include 'includes/cards.html' %}
</div>
{% include 'includes/sidebar.html' %}
{% endblock content %}
</div>
</body>
when i scrolled down product cards sliding to right slightly
and gets smaller on mobile like this
and this:
to this :
can you guys help me understand what im doing wrong please?
i also tried https://infinite-scroll.com/
its perfectly working.
Edit:
views.py
def shop(request):
anabanner = AnaBanner.objects.all()
gender = Gender.objects.all()
categories = Category.objects.all()
colors = Color.objects.all()
materials = Material.objects.all()
query = request.GET.get('query','')
products = Product.objects.all().order_by('-pk')
if query:
products = products.filter(
Q(name__icontains=query)|
Q(sub_name__icontains=query)
).distinct()
paginator = Paginator(products, 8)
page = request.GET.get('page')
cards.html
{% load static %}
{% block content %}
<body>
{% for product in products %}
<div class="product-card">
<a href="{% url 'productpage' product.slug %}"><div class="main-images">
<img id="black" class="black active" loading="lazy" src="{{product.imageURL}}" alt="blue">
</div></a>
<div class="shoe-details">
<span class="shoe_name">
<a href="{% url 'productpage' product.slug %}"><p style="display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;font-size: 16px;
font-weight: 500;
color: #161616;width: 100%;overflow: hidden;/* white-space: nowrap; */text-overflow: ellipsis;">{{product.name}}</p></a>
</span>
</div>
<div class="price">
<span class="price_num">{{product.price|floatformat:2}}TL</span>
</div>
</div>
{% if product.stock > 0 %}
<div class="button">
<div class="button-layer"></div>
<button name="ekle"
href ="#"
hx-get="{% url 'add_to_cart' product.id %}"
hx-target="#menu-cart-button"
hx-swap="outerHTML"
class="btn btn-outline-secondary add-btn update-cart">Sepete Ekle</button>
</div>
{% else %}
<div class="button">
<div class="button-layer"></div>
<button name="ekle"
href ="#"
hx-get="{% url 'add_to_cart' product.id %}"
hx-target="#menu-cart-button"
hx-swap="outerHTML"
class="btn btn-outline-secondary add-btn update-cart">Sepete Ekle</button>
</div>
{% endif %}
</div>
{% endfor %}
</body>
{% endblock %}
cards.css ( i tried deleting paddings it didnt work. )
.product-card {
display: inline-block;
position: relative;
left: 100px;
top:150px;
max-width: 355px;
width: 100%;
border-radius: 25px;
padding: 20px 30px 30px 30px;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
z-index: 3;
overflow: hidden;
}
Related
this is my code i want to give different colors to comments
like grey(#eee) to odd and blue (#e6f9ff) to even
here this line is giving me error
background-color: {{ bg_color }}
{% extends 'base.html' %}
{% block content %}
<h1>{% block title %} Comments {% endblock %}</h1>
<div style="width: 50%; margin: auto">
{% for comment in comments %}
{% if loop.index % 2 == 0 %}
{% set bg_color = '#e6f9ff' %}
{% else %}
{% set bg_color = '#eee' %}
{% endif %}
<div style="padding: 10px; background-color: {{ bg_color }}; margin: 20px">
<p>#{{ loop.index }}</p>
<p style="font-size: 24px">{{ comment }}</p>
</div>
{% endfor %}
</div>
{% endblock %}
I think jinja version is updated and my course which Im following is old
so anyone who knows to answer me
You should note the scope for the variables. If you define a variable within an if-else block, it is only valid there.
<div style="width: 50%; margin: auto">
{% for comment in comments -%}
{% set bg_color = '#e6f9ff' if loop.index % 2 == 0 else '#eee' %}
<div style="padding: 10px; background-color: {{ bg_color }}; margin: 20px">
<p>#{{ loop.index }}</p>
<p style="font-size: 24px">{{ comment }}</p>
</div>
{% endfor -%}
</div>
Instead of using jinja you can also use css to assign a different background color to every other line.
<div class="comments">
{% for comment in comments -%}
<div>
<p>#{{ loop.index }}</p>
<p class="text">{{ comment }}</p>
</div>
{% endfor -%}
</div>
<style type="text/css">
.comments {
width: 50%;
margin: auto;
}
.comments div {
padding: 10px;
background-color: #e6f9ff;
margin: 20px
}
.comments div:nth-child(odd) {
background-color: #eee;
}
.comments .text {
font-size: 24px
}
</style>
I seem to be having trouble to extend my background color for my 2 column layout. The user can add categories so the background color has to be able to adjust with the amount of categories the user wants to add in.
html file:
{% for category in categories %}
<div class="row__2 sub-pages--background">
<div class="sub-pages--categories-background">
<div class="sub-pages--categories">
<a href="{% url 'blogging_logs:topics' category.id %}" class="sub-pages--categories-position ">{{ category }}
<img class="sub-pages--img" src="{{ category.category_image.url }}">
</a>
</div>
</div>
</div>
{% empty %}
<p>No categories entered yet.</p>
{% endfor %}
css file:
&--background {
background-color: $mainBackground;
padding-bottom: 2rem;
}
I feel like it has to do with the way I'm formatting my divs
Since you mentioned in comments that you are using floats, simply add a parent element that will have the background and then add something known as clearfix, at the end of it.
HTML:
<div class="parent--background">
{% for category in categories %}
<div class="row__2 sub-pages--background">
<div class="sub-pages--categories-background">
<div class="sub-pages--categories">
<a href="{% url 'blogging_logs:topics' category.id %}" class="sub-pages--categories-position ">{{ category }}
<img class="sub-pages--img" src="{{ category.category_image.url }}">
</a>
</div>
</div>
</div>
{% empty %}
<p>No categories entered yet.</p>
{% endfor %}
<div class="clearfix"></div>
</div>
CSS:
.clearfix::after {
content: "";
clear: both;
display: table;
}
I was hoping that someone may be able to assist with this issue that I can't seem to figure out (with the little knowledge that I do have). I am trying to get my logo to center in the header section of my website and the attached image is the best I can do so far example.
I have adjusted the columns to the html below:
enter code here
<div class="container">
<div class="sixteen columns">
<div class="three columns nav mobile_hidden">
<ul class="menu left">
{% if section.settings.search_enabled %}
<li class="search">
<a href="/search" title="{{ 'general.search.title' | t }}"
id="search-toggle"><span class="icon-search"></span></a>
</li>
{% endif %}
</ul>
</div>
<div class="seven columns centered-logo logo {% if
section.settings.logo_home != nil %}secondary-logo--true{% endif %}">
<a href="{{ shop.url }}" title="{{ shop.name }}">
{% if section.settings.logo != nil or section.settings.logo_home
!= nil %}
{% if section.settings.logo != nil %}
<img src="{{ section.settings.logo | img_url: '205x', scale: 2
}}" alt="{{ shop.name }}" class="primary_logo" />
{% endif %}
{% if section.settings.logo_home != nil %}
<img src="{{ section.settings.logo_home | img_url: '205x',
scale: 2 }}" alt="{{ shop.name }}" class="{% if section.settings.logo !=
nil %}secondary_logo{% else %}primary_logo{% endif %}" />
{% endif %}
{% else %}
{{ shop.name }}
{% endif %}
</a>
</div>
<div class="five columns menu right">
<div class="nav mobile_hidden">
<ul class="menu right">
{% if settings.show_multiple_currencies %}
<li class="currencies">
{% include 'currencies-switcher' %}
</li>
{% endif %}
{% if shop.customer_accounts_enabled %}
<li class="header-account">
<a href="/account" title="{{ 'layout.customer.my_account' | t
}} {% if customer %}({{ customer.email }}){% endif %}">{% if customer %}{{
'layout.customer.my_account' | t }}{% else %}{{ 'layout.customer.log_in' |
t }}{% endif %}</a>
</li>
{% endif %}
<li class="cart">
<a href="#cart" class="icon-cart cart-button"><svg
class="cart_svg" height="200" width="200" fill="#ddd"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100"
xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd"
d="M85.454,32.397H68.242v-8.749c0-11.2-9.38-21.649-20.51-21.649 c-
11.128,0-19.65,10.449-19.65,21.649v8.749h-
17.21L2.265,96.562h94.663L85.454,32.397z M33.819,23.649 c0-8.596,5.371-
14.895,13.913-
14.895c8.541,0,14.773,6.299,14.773,14.895v8.749H33.819V23.649z
M16.609,38.231h11.474v2.926 c-1.55,0.999-2.583,2.75-
2.583,4.747c0,3.107,2.49,5.629,5.561,5.629c3.07,0,5.556-2.522,5.556-
5.629c0-2.09-1.127-3.91-2.797-4.881 v-2.792h28.687v3.909c-0.889,0.998-
1.435,2.315-1.435,3.764c0,3.107,2.488,5.629,5.558,5.629c3.07,0,5.557-
2.522,5.557-5.629 c0-2.539-1.661-4.685-3.943-5.386v-
2.287h11.475l8.605,52.498h-77.45L16.609,38.231z"></path></svg><span>{{
cart.item_count }}</span></a>
</li>
</ul>
</div>
</div>
</div>
and the css looks like this:
enter code here
div.logo img.secondary_logo {
display: none;
}
.feature_image {
.secondary-logo--true {
.primary_logo {
display: none;
}
.secondary_logo {
display: block;
}
#include respond-to('medium'){
img.primary_logo {
display: block;
}
img.secondary_logo {
display: none;
}
}
}
.sticky--active {
.primary_logo {
display: block;
}
.secondary_logo {
display: none;
}
}
}
Any help would be must appreciated!
You can center align everything in your centered-logo div with:
.centered-logo {
text-align: center;
}
Example: https://codepen.io/connormckelvey/pen/PdPqMY
You can also set the margin in '%', Its more convenient.
.centered-logo {
margin-left : 45%;
}
If you really know the logotype width, just use this old but efficient technique:
.centered-logo {
margin:0 auto;
width:200px; /* Assuming that your logotype has 200px width */
}
And that´s it!
You can add display:inline-block; and margin:auto; in logo element.
If it's not worked that so lets try to below with position property
For example
.centered-logo {
position:relative;
}
.logo {
position :absolute;
left:0;
right:0;
width:20px;
height:20px;
background-color:#000;
margin:auto;
display:inline-block;
text-align:center;
}
<div class="centered-logo">
<div class="logo"></div>
</div>
I am using shopify theme 'Pop' which comes with a Slick Slider Hero. When the slideshow is opened on a mobile device, it automatically crops my images which I don't want because I added text to the image so it cuts it off (view pic attached)
Please let me know what code to add to what liquid/css file so that it resizes picture instead of cutting it off.
Thank you so much!
Theme code
<div data-section-id="{{ section.id }}" data-section-type="slideshow-section">
{% if section.blocks.size > 0 %}
<div class="slideshow-wrapper">
<button type="button" class="visually-hidden slideshow__pause" data-id="{{ section.id }}" aria-live="polite">
<span class="slideshow__pause-stop">
{% include 'icon-pause' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.pause_slideshow' | t }}</span>
</span>
<span class="slideshow__pause-play">
{% include 'icon-play' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.play_slideshow' | t }}</span>
</span>
</button>
<div class="slideshow slideshow--{{ section.settings.slideshow_height }}" id="Slideshow-{{ section.id }}" data-autoplay="{{ section.settings.autoplay }}" data-speed="{{ section.settings.autoplay_speed }}">
{% for block in section.blocks %}
{%- assign is_background_video = false -%}
{% if block.type == 'video' %}
{% if block.settings.video_type == 'background' or block.settings.video_type =='background-chrome' %}
{%- assign is_background_video = true -%}
{% endif %}
{% endif %}
<div class="slideshow__slide slideshow__slide--{{ block.id }}{% if is_background_video %} slideshow__slide--background-video{% endif %}" {{ block.shopify_attributes }}>
{% if block.settings.link != blank %}
<a href="{{ block.settings.link }}" class="slideshow__link">
{% endif %}
{% if block.type == 'video' %}
{% if block.settings.video_url != blank %}
<div class="video-loader"></div>
{% endif %}
{% unless block.settings.video_type == 'background' %}
<button type="button" class="text-link slideshow__video-control slideshow__video-control--close" data-controls="SlideshowVideo-{{ block.id }}">
{% include 'icon-close' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.close_video' | t }}</span>
</button>
{% endunless %}
{% if block.settings.video_url != blank %}
<div id="SlideshowVideo-{{ block.id }}" class="slideshow__video {% if is_background_video %}slideshow__video--background{% endif %} slideshow__video--{{ block.settings.video_type }}"
data-id="{{ block.settings.video_url.id }}"
data-type="{{ block.settings.video_type }}"
data-slideshow="Slideshow-{{ section.id }}"></div>
{% endif %}
{% endif %}
{% if block.settings.image == blank %}
<div class="slideshow__image js">
<div class="placeholder-background">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
{% else %}
<div class="slideshow__image box ratio-container lazyload{% unless forloop.first == true %} lazypreload{% endunless %} js"
data-bgset="{% include 'bgset', image: block.settings.image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-position: {{ block.settings.alignment }};{% if forloop.first == true %} background-image: url('{{ block.settings.image | img_url: '300x300' }});{% endif %}">
</div>
{% endif %}
<noscript>
<div class="slideshow__image"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}'); background-position: {{ block.settings.alignment }};"{% endif %}>
{% if block.settings.image == blank %}
<div class="placeholder-background">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% endif %}
</div>
</noscript>
<div class="slideshow__text-wrap{% if block.settings.title != blank or block.settings.subheading != blank %} slideshow__overlay{% endif %}">
<div class="slideshow__text-content">
<div class="page-width">
{% unless block.settings.title == blank %}
<h2 class="h1 mega-title slideshow__title{% if settings.link != blank %} slideshow__title--has-link{% endif %}{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">
{{ block.settings.title | escape }}
</h2>
{% endunless %}
{% unless block.settings.subheading == blank %}
<span class="mega-subtitle slideshow__subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">
{{ block.settings.subheading | escape }}
</span>
{% endunless %}
{% if block.type == 'video' %}
{% unless block.settings.video_type == 'background' %}
<div class="slideshow__video-control--play-wrapper{% if block.settings.title != blank or block.settings.subheading != blank %} slideshow__video-control--play-wrapper--push{% endif %}">
<button type="button" class="text-link slideshow__video-control slideshow__video-control--play" data-controls="SlideshowVideo-{{ block.id }}">
{% include 'icon-play-video' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.play_video' | t }}</span>
</button>
</div>
{% endunless %}
{% endif %}
</div>
</div>
</div>
{% if block.settings.link != blank %}
</a>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if section.blocks.size == 0 %}
<div class="placeholder-noblocks">
{{ 'homepage.onboarding.no_content' | t }}
</div>
{% endif %}
</div>
Generated HTML Code
<div id="shopify-section-1531416277337" class="shopify-section index-section index-section--flush" data-theme-editor-section-36470275618="{"id":"1531416277337","type":"slideshow","disabled":false}">
<div data-section-id="1531416277337" data-section-type="slideshow-section">
<div class="slideshow-wrapper">
<button type="button" class="visually-hidden slideshow__pause" data-id="1531416277337" aria-live="polite">
<span class="slideshow__pause-stop">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-pause" viewBox="0 0 10 13"><g fill="#000" fill-rule="evenodd"><path d="M0 0h3v13H0zM7 0h3v13H7z"></path></g></svg>
<span class="icon__fallback-text">Pause slideshow</span>
</span>
<span class="slideshow__pause-play">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-play" viewBox="0 0 18 32"><path d="M.263 0l17.071 15.944L.264 31.89" fill="#444" fill-rule="evenodd"></path></svg>
<span class="icon__fallback-text">Play slideshow</span>
</span>
</button>
<div class="slideshow slideshow--medium slick-initialized slick-slider slick-dotted" id="Slideshow-1531416277337" data-autoplay="true" data-speed="5000">
<div class="slick-list draggable">
<div class="slick-track" style="opacity: 1; width: 750px;">
<div class="slideshow__slide slideshow__slide--1531416277337-0 slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" role="tabpanel" id="slickSlide10" aria-labelledby="slickDot10" tabindex="-1" data-theme-editor-block-36470275618="{"id":"1531416277337-0","type":"image"}" style="width: 375px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;">
<div class="slideshow__image box ratio-container js lazyloaded" data-bgset="//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_180x.jpg?v=1531416305 180w 114h,
//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_360x.jpg?v=1531416305 360w 228h,
//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_540x.jpg?v=1531416305 540w 342h,
//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_720x.jpg?v=1531416305 720w 456h,
//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_900x.jpg?v=1531416305 900w 571h,
//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1080x.jpg?v=1531416305 1080w 685h,
//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1296x.jpg?v=1531416305 1296w 822h,
//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1512x.jpg?v=1531416305 1512w 958h,
//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1728x.jpg?v=1531416305 1728w 1095h,
//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66.jpg?v=1531416305 1923w 1219h" data-parent-fit="cover" style="background-position: center bottom; background-image: url("https://cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66.jpg?v=1531416305");">
<picture style="display: none;">
<source data-srcset="//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_180x.jpg?v=1531416305 180w 114h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_360x.jpg?v=1531416305 360w 228h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_540x.jpg?v=1531416305 540w 342h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_720x.jpg?v=1531416305 720w 456h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_900x.jpg?v=1531416305 900w 571h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1080x.jpg?v=1531416305 1080w 685h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1296x.jpg?v=1531416305 1296w 822h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1512x.jpg?v=1531416305 1512w 958h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1728x.jpg?v=1531416305 1728w 1095h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66.jpg?v=1531416305 1923w 1219h" sizes="789.4736842105262px" srcset="//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_180x.jpg?v=1531416305 180w 114h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_360x.jpg?v=1531416305 360w 228h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_540x.jpg?v=1531416305 540w 342h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_720x.jpg?v=1531416305 720w 456h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_900x.jpg?v=1531416305 900w 571h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1080x.jpg?v=1531416305 1080w 685h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1296x.jpg?v=1531416305 1296w 822h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1512x.jpg?v=1531416305 1512w 958h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_1728x.jpg?v=1531416305 1728w 1095h, //cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66.jpg?v=1531416305 1923w 1219h"><img alt="" class="lazyautosizes lazyloaded" data-sizes="auto" data-parent-fit="cover" sizes="789.4736842105262px"></picture>
</div>
<noscript>
<div class="slideshow__image" style="background-image: url('//cdn.shopify.com/s/files/1/2543/3412/files/beach_trash2_3c79e4e7-49ad-4ef3-ace0-103c1d531b66_2048x.jpg?v=1531416305'); background-position: bottom;">
</div>
</noscript>
<div class="slideshow__text-wrap">
<div class="slideshow__text-content">
<div class="page-width">
</div>
</div>
</div>
</div>
<div class="slideshow__slide slideshow__slide--1531416277337-1 slick-slide" data-slick-index="1" aria-hidden="true" role="tabpanel" id="slickSlide11" aria-labelledby="slickDot11" tabindex="-1" data-theme-editor-block-36470275618="{"id":"1531416277337-1","type":"image"}" style="width: 375px; position: relative; left: -375px; top: 0px; z-index: 998; opacity: 0; transition: opacity 500ms ease;">
<div class="slideshow__image box ratio-container lazypreload js lazyloaded" data-bgset="//cdn.shopify.com/s/files/1/2543/3412/files/bottles_180x.jpg?v=1531419269 180w 120h,
//cdn.shopify.com/s/files/1/2543/3412/files/bottles_360x.jpg?v=1531419269 360w 240h,
//cdn.shopify.com/s/files/1/2543/3412/files/bottles_540x.jpg?v=1531419269 540w 360h,
//cdn.shopify.com/s/files/1/2543/3412/files/bottles_720x.jpg?v=1531419269 720w 480h,
//cdn.shopify.com/s/files/1/2543/3412/files/bottles_900x.jpg?v=1531419269 900w 600h,
//cdn.shopify.com/s/files/1/2543/3412/files/bottles_1080x.jpg?v=1531419269 1080w 720h,
//cdn.shopify.com/s/files/1/2543/3412/files/bottles_1296x.jpg?v=1531419269 1296w 864h,
//cdn.shopify.com/s/files/1/2543/3412/files/bottles_1512x.jpg?v=1531419269 1512w 1008h,
//cdn.shopify.com/s/files/1/2543/3412/files/bottles_1728x.jpg?v=1531419269 1728w 1152h,
//cdn.shopify.com/s/files/1/2543/3412/files/bottles.jpg?v=1531419269 1920w 1280h" data-parent-fit="cover" style="background-position: center top; background-image: url("https://cdn.shopify.com/s/files/1/2543/3412/files/bottles.jpg?v=1531419269");">
<picture style="display: none;">
<source data-srcset="//cdn.shopify.com/s/files/1/2543/3412/files/bottles_180x.jpg?v=1531419269 180w 120h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_360x.jpg?v=1531419269 360w 240h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_540x.jpg?v=1531419269 540w 360h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_720x.jpg?v=1531419269 720w 480h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_900x.jpg?v=1531419269 900w 600h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_1080x.jpg?v=1531419269 1080w 720h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_1296x.jpg?v=1531419269 1296w 864h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_1512x.jpg?v=1531419269 1512w 1008h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_1728x.jpg?v=1531419269 1728w 1152h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles.jpg?v=1531419269 1920w 1280h" sizes="750px" srcset="//cdn.shopify.com/s/files/1/2543/3412/files/bottles_180x.jpg?v=1531419269 180w 120h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_360x.jpg?v=1531419269 360w 240h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_540x.jpg?v=1531419269 540w 360h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_720x.jpg?v=1531419269 720w 480h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_900x.jpg?v=1531419269 900w 600h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_1080x.jpg?v=1531419269 1080w 720h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_1296x.jpg?v=1531419269 1296w 864h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_1512x.jpg?v=1531419269 1512w 1008h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles_1728x.jpg?v=1531419269 1728w 1152h, //cdn.shopify.com/s/files/1/2543/3412/files/bottles.jpg?v=1531419269 1920w 1280h"><img alt="" class="lazyautosizes lazyloaded" data-sizes="auto" data-parent-fit="cover" sizes="750px"></picture>
</div>
<noscript>
<div class="slideshow__image" style="background-image: url('//cdn.shopify.com/s/files/1/2543/3412/files/bottles_2048x.jpg?v=1531419269'); background-position: top;">
</div>
</noscript>
<div class="slideshow__text-wrap">
<div class="slideshow__text-content">
<div class="page-width">
</div>
</div>
</div>
</div>
</div>
</div>
<ul class="slick-dots" style="display: block;" role="tablist">
<li class="slick-active" aria-hidden="false" role="tab" aria-selected="true" aria-controls="slickSlide10" id="slickDot10">
<button type="button" data-role="none" role="button" tabindex="0">Slide 1</button>
</li>
<li role="tab" aria-selected="false" aria-controls="slickSlide11" id="slickDot11" class="">
<button type="button" data-role="none" role="button" tabindex="0">Slide 2</button>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS Code
/*================ Slick Slider SCSS ================*/
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
&:focus {
outline: none;
}
&.dragging {
cursor: pointer;
cursor: hand;
}
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
.slick-loading & {
visibility: hidden;
}
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
[dir="rtl"] & {
float: right;
}
img {
display: block;
}
&.slick-loading img {
display: none;
}
display: none;
&.dragging img {
pointer-events: none;
}
.slick-initialized & {
display: block;
}
.slick-loading & {
visibility: hidden;
}
.slick-vertical & {
display: block;
height: auto;
border: 1px solid transparent;
}
}
.slick-arrow.slick-hidden {
display: none;
}
Example Image
I have the following HTML structure with CSS formatting.
What I want is the outer div using flex but the inner div not using flex but float style (by the reasons of the sortable drag-drop widget does not work under display as flex).
Specifically, the structure is as below:
<div id="a" style="display:flex;min-height: 100%;overflow:auto;padding-bottom: 150px;">
<div id="b" align="left" style="padding: 10px">
<div id="multi" style="display: NOT flex;"></div>
<div id="p" style=" float:left;"></div>
<div id="q" style=" float:left;"></div>
</div>
</div>
</div>
So, to be precise, I want flex for a. Particularly for div multi, p and q. I don't want flex, so that they can be side-by-side in the layout. Could anyone suggest how to do that? Many thanks.
The following is my working example run by Django on Python 3.5 for Michael_B's advice:
The template listing the RubaXa Sortable's widget for category ranking. What I want to do specifically is to list the blocks and Group A/B side by side, however, the Group A and B can be dragged to the block side for sorting/grouping:
{% extends "admin_content.html" %}
{% load static %}
{% block header_extra%}
<link rel="stylesheet" href="{% static 'django_tables2/themes/paleblue/css/screen.css' %}" />
{% include "fancybox/fancybox_css.html" %}
<!-- AngularJS -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<!-- Sortable.js -->
<script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>
<!-- ng-sortable.js -->
<script src="http://rubaxa.github.io/Sortable/ng-sortable.js"></script>
<!-- app.js -->
<script src="http://rubaxa.github.io/Sortable/st/app.js"></script>
<link href="/static/app.css" rel="stylesheet" type="text/css">
{% endblock %}
{% block admin_right%}
<div id="multi" >
<div class="tile__list" style="float:left; min-height:100%; min-width=1200px">
{% for field in table %}
<p style="background-color:#C6DDF4; margin: 5px; padding: 10px 15px; cursor: move;"><font size="2px">{{ field.NewsPaper }}, {{ field.Section}}, {{field.Title}}</font></p>
{% endfor %}
</div>
<div class="layer tile" >
<div class="tile__name" style=" float:left;">Group A</div>
<div class="tile__list">
</div>
</div>
<div class="layer tile" >
<div class="tile__name" style=" float:left;">Group B</div>
<div class="tile__list">
</div>
</div>
</div>
</div>
<script id="jsbin-javascript">
angular.module('demo', ['ng-sortable'])
.controller('DemoController', ['$scope', function ($scope) {
$scope.firstList = ['foo 1', 'foo 2', 'foo 3'];
$scope.secondList = ['bar 1', 'bar 2'];
$scope.sortableOptions = {
group: 'ng',
animation: 200
}
}]);
var el = document.getElementById('multi');
var sortable = Sortable.create(el, {
animation: 150,
handle: ".tile__name",
draggable: ".tile"
});
[].forEach.call(document.getElementById('multi').getElementsByClassName('tile__list'), function (el){
Sortable.create(el, {
group: 'blocks',
animation: 150
});
});
</script>
{#{% load django_tables2 %}#}
{#{% render_table table %}#}
{% endblock %}
And this template is further extend to another template of "admin_content.html" which use display flex in div:
{% extends "main.html" %}
{% load static %}
{% block header_extra%}{% endblock %}
{% block content_main%}
<div style="display:flex;min-height: 100%;overflow:auto;padding-bottom: 150px;">
<nav class="w3-sidenav w3-border" style="width:15%;padding:0px;background:transparent;">
<a class="w3-border-bottom" href="#">Function A</a>
<a class="w3-border-bottom" href="#">Function B</a>
<a class="w3-border-bottom" href="#">Function C</a>
<a class="w3-border-bottom" href="#">Function D</a>
<a class="w3-border-bottom" href="#">Function E</a>
</nav>
<div align="left" style="display:flex; padding: 10px;">
{% block admin_right%}{% endblock %}
</div>
</div>
{% endblock %}