I am using django-autocomplete-light with django-taggit. The integration is very easy if you follow the documentation:
import autocomplete_light
from taggit.models import Tag
autocomplete_light.register(Tag)
and
class NewActivityForm(forms.ModelForm):
tags = TagField(widget=TagWidget('TagAutocomplete'))
[...]
This renders a nice inline-style widget where you type and you see the autocomplete list below - everything is fine.
However, my tags are color-coded, so I need to customize two things:
a) First, in the autocomplete list, I need to customize the css class of each tag. I get some control over the template, but it seems there are css selectors looking for [data-value] that override my classes. The code for autocomplete_template_html is:
<div>
{% for choice in choices %}
<span class="tag tag--{{choice.pk}}" data-value="{{choice.pk}}" >{{choice}}</span>
{% endfor %}
</div>
b) Second, once a tag is selected and added to my input, I need to maintain that css class there so I get a custom look. When I see the generated DOM elements, I see that there are some hidden spans in there that I could perhaps use, but it's not clear how to do.
How can I do this? Should I write my own widget or is there something I can subclass?
A) Can't override CSS class
It looks like a CSS Specificity problem.
I just tried this and it works if it is set after loading autocomplete_light/style.css (or `autocomplete_light/static.html' template):
.yourlabs-autocomplete .choice, .yourlabs-autocomplete [data-value], .yourlabs-autocomplete em
{
color: red;
}
Else, you could just override autocomplete_light/static/autocomplete_light/style.css.
B) Style must be the same when a choice is selected
When a choice is selected, it's HTML is copied to the deck, only span.remove is added. The style should remain.
It would help a lot if posted your CSS though !
Related
I need to edit the css of some images in a class, but I'm doing it in a function, I've already done something similar but it directly edits a class, I need to know if I can do the same but edit only the img element of it.
Someone has had a similar issue here. I believe the solution is to use nested classes:
<div class="myParentClass">
<img class="myNestedClass" src="./myPicture"/>
</div>
Then just edit the class as you would normally. If you want to add css to it, you can just use:
.myParentClass .myNestedClass {
property: value;
}
I know that we can use css classes for the className attribute but I see in a lot of tutorials that even if the value written for className is not used in the css file it is still used in the components. Can someone explain why? Or how to determine the value of the className we need to use?
The HTML class attribute (as set by the React className attribute) is a general way to label elements with some meaningful labels. It can be used for CSS styling, or JavaScript queries like document.querySelectorAll, or just to make the HTML intent more readable.
In particular, it's common to include classes in your HTML in case you'll need them later for CSS styling or JavaScript queries. To be clear, there's no list of valid class names; you can use whatever names you want, and use or not use them in order code as you wish.
What if we use ng-cloak, but the angular script is loading slowly, or if the user has turned off JavaScript, then wouldn't the user still see {{ a + b }} or anything we wanted to hide?
Would it be a good practice then, if we add
<style>
[ng-cloak] { display: none !important }
</style>
to our HTML file's header section? Or would there be other CSS style that might be appropriate to add if we are using AngularJS and the Internet connection might be slow or if the user has turned off JavaScript?
If you are loading angular.js in the head section of your page, then you should not have to add any css yourself for ng-cloak to work properly. Angular adds these styles itself when it loads, and since this happens in the head section, these styles are applied before the browser evaluates the body of your page and renders any content.
However, if you are loading angular asynchronously with a script loader, then you do need to add the styles manually (preferably in a stylesheet or style block loaded in the head of your page).
From the docs:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
I'm not totally sure I understand the question, but yes, I believe what you are saying makes sense.
ng-cloak is a bit different from other directives, because its only job is to remove itself. Angular does not apply any special styling to that attribute. It just removes it.
That means, for example, you could apply styling to make unloaded Angular elements have a background color, instead of being invisible. I don't know why you'd do that, but that's something to remember--it's just a boring old attribute until Angular removes it.
Behavior of loading CSS files is up to the browser, so it's probably fair to put a style tag in the head, but that's just like any other CSS resources--you rarely want elements loading without styles, and browsers are pretty good about avoiding that. I often like to put it in the head just for good measure, but I can understand someone not wanting to do that. But you definitely need it somewhere.
If you have JavaScript disabled, or before Angular loads, it's just like any other attribute:
[ng-cloak]{
display: none
}
<div ng-cloak>
Where am I?
</div>
But once Angular loads (no matter how long it takes to set up, simulated here by a one-second timer):
window.setTimeout(function() {
$("[ng-cloak]").removeAttr("ng-cloak");
}, 1000);
[ng-cloak] {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-cloak>
Here I am!
</div>
The header has a navigation menu I'd prefer to keep, but it's taking up too much space. What can I do to make it look good on mobile?
One possibility is to use togglers - buttons that make its inner content appear/disappear. The uraniumjs library contains some widgets, one of them being a very simple yet useful toggler implementation. It also does that unobtrusively.
You will need to include the uranium js file, so you can just use it. Then, you can do it as explained below.
You need to transform your menu code into three parts: a wrapper container, a "button" section and a content section. To identify each of those parts, use these data attributes:
data-ur-set="toggler"
(add this attribute to the wrapper)
data-ur-toggler-component="button"
(add this attribute to the "button" section)
data-ur-toggler-component="content"
(add this attribute to the content section)
You need to include these CSS rules somewhere too:
*[data-ur-set='toggler'] *[data-ur-toggler-component='content'] {
display:none;
}
*[data-ur-set='toggler'] *[data-ur-toggler-component='content'][data-ur-state='enabled'] {
display: block;
}
You can see a small example running here: http://play.tritium.io/8af1576e385f5db05f6dc75404f993c16485395b.
Both the Bloomingdales and the Macys mobile sites use that approach. You can see it working there.
I'm still using 4.1 and I'm trying to center a form content on screen.
When I add a new form it stays on the "left" of the screen.
I've tried to change form.html (temmplates/shared) adding a div with a style like this:
margin-left : 10%; margin-right : 10%;
up next to the form tag and closing it at the bottom.
The form goes to the right but not centered at all.
Anyone has any clue to help with this ?
Here is a screenshot of a simple Form (it's not basec on models)
thanks
Alejandro
Ok - i've gone to a default of atk4.2 to demonstrate.
If you add a new page with defaults as follows
<?php
class page_test extends Page {
function init() {
parent::init();
$p=$this;
$f=$p->add('MVCForm')->setModel('Customer');
}
}
?>
I get the following and the fields extend across the whole width of the page.
This is because the default page template takes the whole width and is expected.
In order to adjust the form, you can use view functionality so create a view under the /lib/View directory called Centre.php and put the following code in it
<?php
class View_Centre extends View {
function init(){
parent::init();
}
function defaultTemplate() {
return array('view/centre');
}
}
?>
Then create a new template for the view in yoursite/templates/default/view called centre.html and insert the following html code
<div style='width:50%; margin: auto;'>
<?$Content?>
</div>
and then in the page, we add the view first and the form into the view rather than straight into the page.
<?php
class page_test extends Page {
function init() {
parent::init();
$p=$this;
$v=$p->add('View_Centre');
$f=$v->add('MVCForm')->setModel('Customer');
}
}
?>
and this results in the following web page
The base ATK4 form is itself a view which means you can style the form however you want so if you get for example use a different style of form such as the one described here you can do this by copying yoursite/atk4/atk4/templates/shared/form.html to yoursite/atk4/templates/shared.form.html and changing the second line from
<?form?>
<div id="<?$_name?>" class="atk-form <?$class?>" style="<?$style?>">
<?$hint?>
<form class="<?$form_internal_class?>" id="<?$form_name?>" name="<?$form_name?>" action="<?$form_action?>" method="POST" <?$enctype?>>
<fieldset class="<?$fieldset?>">
to
<?form?>
<div id="stylized>" class="myform <?$class?>" style="<?$style?>">
<?$hint?>
<form class="<?$form_internal_class?>" id="<?$form_name?>" name="<?$form_name?>" action="<?$form_action?>" method="POST" <?$enctype?>>
<fieldset class="<?$fieldset?>">
Create a new form.css file in yoursite/templates/default/css which contains the styling
Copy yoursite/atk4/templates/shared/shared.html to yoursite/templates/shared/shared.html and add an extra tag
<?$css_include?>
just above the existing
<?$js_include?>
and in Frontend.php, let every page find the new css file.
$this->addLocation('templates',array(
'css'=>array(
'default/css',
),
));
$this->template->appendHTML('css_include','<link type="text/css" href="'.$this->api->locateURL('css','form.css').'" rel="stylesheet">');
which results in a styled form like this
There are some examples of different form layouts here that you can use to adjust the form layout itself. Not sure from your question if you want to center the form in the page or centre the fields.
If you just want to centre the Form within the webpage, you want to use margin: auto for centering css rather than setting a percentage on each side as shown here
Also note, if you amend files from the atk4 directory, you should make a copy into yoursite/templates/shared and amend it there so you can upgrade by overwriting the atk4 directory later without losing anything.
If i use the default form template (in this case in a CRUD), i get the following
If i make your change to the atk4/templates/form.html by adding
<div style="width: 50%; margin: 0 auto;">
as the second line in form.html and adding the corresponding
</div>
one line from the bottom, it shifts everything slightly to the right as follows
What is unclear in your question is what you are trying to achieve - do you want to move the fields within the form or do you want to centre the whole form on the page ?
I think the reason for the shifting is because of setting the width to 50% but I dont know what layout you are trying to obtain - do you just want to right align the labels to the fields maybe ? Please post screenshots in the original question of what you are getting and try to describe what you want to achieve.