How to add a hover effect on a dropdown? - css
I'm currently designing a new website and I added a dropdown which works perfectly fine when clicked. I basically want it to show that dropdown when hovered.
What I tried was:
{% include 'currency-picker' %}
<style>
.currency-picker {
background-color: transparent;
font-size: 12pt;
font:Montserrat;
letter-spacing: 2px;
color: black;
}
.currency-picker:hover {
display: block;
}
.currency-picker:hover {
background-color: white;
This is the dropdown itself:
<label class="currency-picker__wrapper">
<span class="currency-picker__label"></span>
<select class="currency-picker" name="currencies" style="display: inline; width: auto; vertical-align: inherit;">
{% assign codes = 'USD,EUR,GBP,CAD,ARS,AUD,BBD,BDT,BSD,BHD,BRL,BOB,BND,BGN,ILS,MMK,KYD,CLP,CNY,COP,CRC,HRK,CZK,DKK,DOP,XCD,EGP,XPF,FJD,GHS,GTQ,GYD,GEL,HKD,HUF,ISK,INR,IDR,NIS,JMD,JPY,JOD,KZT,KES,KWD,LVL,LTL,MXN,MYR,MUR,MDL,MAD,MNT,MZN,ANG,NZD,NGN,NOK,OMR,PKR,PYG,PEN,PHP,PLN,QAR,RON,RUB,SAR,RSD,SCR,SGD,SYP,ZAR,KRW,LKR,SEK,CHF,TWD,THB,TZS,TTD,TRY,UAH,AED,UYU,VEB,VND,ZMK' | split: ',' %}
{% assign supported_codes = settings.supported_currencies | split: ' ' %}
<option value="{{ shop.currency }}" selected="selected">{{ shop.currency }}</option>
{% for code in supported_codes %}
{% if code != shop.currency and codes contains code %}
<option value="{{ code }}">{{ code }}</option>
{% endif %}
{% endfor %}
</select>
</label>
The strange thing is, that the .currency-picker:hover {
background-color: white; works and it does indeed show the white background when hovered.
Is there anyone knowing a solutions of my problem?
Have a nice day and best regards,
Ismael
After looking at your code, is there any reason why you don't just use the same markup as the other dropdowns? Consistency is always key.
What you are trying to do does not work or is not allowed in the browser. Instead of using an actual "select" box, I would use the actual markup they are using on the other dropdowns which give you the exact functionality that you are looking for.
This code (taken from your site) should give you a clue on how to handle this. Also You ave an extra starting script tag on your page where you dropped that new test code..
Please note I changed the below code a bit to give you better reference. If you were to drop this code into your site, it would work, but you need to refactor it to make it dynamic.
<li class="site-nav__item site-nav__expanded-item site-nav--has-dropdown" aria-haspopup="true">
USD <span class="icon icon-arrow-down" aria-hidden="true"></span>
<ul class="site-nav__dropdown text-left">
<li>
EUR
</li>
<li>
CHF
</li>
</ul>
After my change...
Related
Include a different button icon when hover
I have this liquid code:
<a href="{{ section.settings.button_link }}" class="btn--rounded">
{% include 'icon-btn--rounded' %}
<div class="link-label">{{ section.settings.button_label }}</div>
</a>
And when the button is hover, I need to show a different icon, for example:
{% include 'icon-btn--white' %}
I now that I can use display: none for that, but how can I dynamically change between buttons when I hover?
You have to use CSS to show the different icons on hover.
Liquid is a language that loads before the DOM is ready. This means that once you see content of the page the liquid code has finished its execution and it will not fire again until a reload of the page.
Or to say it in developer terms - you are trying to load a back-end function via the front-end, which is a big "no-no".
CSS and JS can't interact with liquid, but liquid can interact with them. Or to say it more simply you can create javascript and css code using Liquid, but you can't create liquid code using JS and CSS.
In addition includes are deprecated and you should be using render instead.
Here is the code that you should use:
<a href="{{ section.settings.button_link }}" class="btn--rounded">
<div class="icon">
{% render 'icon-btn--rounded' %}
</div><!-- /.icon -->
<div class="icon icon--hover">
{% render 'icon-btn--white' %}
</div><!-- /.icon -->
<div class="link-label">{{ section.settings.button_label }}</div>
</a>
<style>
.icon--hover {
display: none;
}
.btn--rounded:hover .icon {
display: none;
}
.btn--rounded:hover .icon--hover {
display: block;
}
</style>
django template iterated list: how create unique overlay-popup for each item?
In django easy to generate an iterated list of titles from context received by template:
{% for instance in object_list %}
<li>{{instance.international_title}} </li>
{% endfor %}
And in css easy to create a popup overlay:
#overlay
{
height:300px;
width:300px;
margin:0 auto;
position:relative;
z-index:10;
display:none;
border:5px solid #cccccc;
border-radius:10px;
}
<div align="center">
Click Title for Detail
</div>
<div id="overlay">
<p> Here is the text giving more detail<p>
</div>
Would like to be able to associate a unique text with each unique title {{instance.international_short_description}} for the purposes of the overlay popup. However do not see how to do this. Is it necessary to somehow create a series of css classes: #overlay1, #overlay2 with custom href to each one? Is it possible to use a single class, pass a variable to it and then select the correct text? Have not been able to find examples.
You can alter the id, for example by adding the primary key of the instance, like:
{% for instance in object_list %}
<div align="center">
{{ instance.international_title }}
</div>
<div id="overlay{{ instance.pk }}">
<p>{{ instance.international_short_description }}<p>
</div>
{% endfor %}
Can't override checkbox style using crispy forms
While creating forms for my app I had to make a custom checkbox (I am terrible with css so this was not easy). I got it to work and it looks like this when I create the form manually:
The manual html is
<div class="checkbox icheck-primary">
{{ form.active }}
<label for="id_active">Active</label>
</div>
But when using the wrapper_class attribute on a crispy forms Field it displays as standard:
And the crispy forms code:
self.helper.layout = Layout(
Fieldset(
'Add Contact',
'first_name',
Field('active', wrapper_class='icheck-primary', css_class='icheck-primary')
))
I tried using a custom Div template but I couldn't get it to work. In the docs all I could find was the wrapper_class.
Am I missing something simple or could someone point me in the right direction?
[Edit]
HTML output from crispy_forms:
<div id="div_id_active" class="checkbox icheck-primary">
<label for="id_active" class="">
<input name="active" class="checkboxinput" id="id_active" checked="" type="checkbox">
Active
</label>
</div>
And here is my manual/forms generated html
<div class="checkbox icheck-primary">
<input name="stay_logged_in" class="checkbox icheck-primary" id="id_stay_logged_in" type="checkbox">
<label for="id_stay_logged_in">Remember me</label>
</div>
[Edit 2] This is a sample of the css selectors
.radio > input[type="radio"]:first-child:checked + label::before,
.checkbox > input[type="checkbox"]:first-child:checked + label::before,
.radio > input[type="radio"]:first-child:checked + input[type="hidden"] + label::before,
.checkbox > input[type="checkbox"]:first-child:checked + input[type="hidden"] + label::before {
content: "\e013";
display: inline-block;
font-family: 'Glyphicons Halflings';
font-weight: normal;
font-size: 10px;
color: #b4aba1;
position: absolute;
width: 22px;
height: 22px;
line-height: 20px;
border: 2px solid #b4aba1;
border-radius: 0 !important;
background-color: #0060a1 !important;
text-align: center;
margin-left: -29px;
vertical-align: text-top;
}
After some help in the comments from #dirn I went back and made a custom template.
Since all of my checkboxes should look this same I created a checkboxinput_template based on the existing crispy_forms templates:
{% load crispy_forms_field %}
<div id="div_{{ field.auto_id }}" class="checkbox icheck-primary {% if form_show_errors and field.errors %} error{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
{{ field }}
<label class="control-label {{ label_class }}" for="id_{{ field.html_name }}">{{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}</label>
<div class="controls {{ field_class }}">
{% include 'bootstrap3/layout/help_text.html' %}
</div>
</div>
I added the icheck-primary class to the surrounding div and moved the field itself out of the label tag. This allowed the selectors to work properly.
I think this could also be done by overriding the fields.html but for the moment this solves my problem.
This is probably not the best solution and I'd appreciate it if anyone could share a better one.
I have no experience with django-crispy-forms, but use django-widget-tweaks for adding css to django forms. You only need to adjust templates, no python code. Makes it a lot easier and you keep styling separate from code.
Background for radio button for Django form
I found some peaces of code solving the issue, but all of those are using input tag and label tag which placed near each other. Django forms placed input inside label, that's why the code is ineffective in my case.
One of variant I tried here
Any advices or thoughts.
Thanks all!
input[type=radio] {
display:none;
}
input[type=radio] + label
{
background: #999;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=radio]:checked + label
{
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
Solved the issue customized form template and applied the solution on css above.
{% for field in form %}
{% for item in field %}
<input id="id_name_{{ forloop.counter0 }}" name="name" type="radio" value="{{ item.choice_value }}">
<label for="id_name_{{ forloop.counter0 }}">{{ item.choice_label }}</label>
{% endfor %}
{% endfor %}
I haven't check if my solution is right yet.
but you can write like this:
{% for field in form %}
{% for radio in field %}
{{ radio tag }}
<label for="{{ radio.id_for_label }}" title="{{ radio.choice_label }}"></label>
{% endfor %}
{% endfor %}
For more information,
you can read the official doc.
Twig I can include code in CSS?
I have this code currently does not work, is there any alternative to it?
<ul class="sub">
{% for key, c in categori %}
<style>
#nav.{{c.id}}:hover
{
background-color: #{{c.color}};
}
</style>
<li class="{{c.id}}">
<a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}
....
I have the problem as in # nav. {{c.id}}
ow.ly/i/3vwNp this is the example
Thanks!
The way your CSS is written, it expects the element with the class {{ c.id }} (as interpreted by the Twig parser) to be on the same element with the id nav, e.g.
<li id="nav" class="{{ c.id }}">...</li>
You really shouldn't have more than one element on a page with the same id attribute, strange things happen with JavaScript particularly when you do.
Instead of trying to programmatically define your {{ c.id }} in the style though, why not do something like this?
<style>
#nav .item:hover
{
background-color: #{{c.color}};
}
</style>
...
<ul id="nav" class="sub">
{% for key, c in categori %}
<li class="item {{c.id}}"><a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}</li>
{% endfor %}
</ul>
You really should only be placing CSS in <style> tags at the top of the document any way, or as better practice teasing them out to .css resource files to include.
This would definitely work:
<ul class="sub">
{% for c in categori %}
<style>
.element{{c.id}} a:hover { background-color: #{{c.color}}; }
</style>
<li class="element{{c.id}}">
<a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}
...
But it's recommended to separate your CSS rules from HTML and move all your predefined element classes to external CSS asset.