Im trying to figure out how to remove bullets from Django's MultipleChoiceField. So far I have tried this very popular solution by changing my css file that basically states to input this code in my css file
ul {
list-style-type: none;
}
This didnt work and I also tried:
li {
list-style-type: none;
}
This also didnt work. Is there something Django specific why the list keeps on showing up with bulletpoints? I also tried adding the style in my forms class but also without success
class SearchForm(forms.Form):
job_industry = forms.MultipleChoiceField(
widget=forms.CheckboxSelectMultiple(attrs={'class': 'form-check', 'style': 'list-style:none;'}),
choices=industry,
)
I noticed that whatever attrs I enter to the forms.CheckboxSelectMultiple it only gets passed to the <label> tag and not the <ul> or <li> tag of the list. Im using Bootstrap5 if that makes any difference.
How to delete bulletpoints from Django forms.MultipleChoiceField?
The problem turned out to be because of cache. Previously I set up memcache and had set the 'TIMEOUT': None Thats the reason why changing the css didnt have no effect
Related
I'm working on a project with Django and a textarea. The textarea by default renders cols="40" and rows="10", which is not great for my page. I'm trying to use Django's widgets to change those attributes to 20 and 5 respectively. This is my code:
class NewContent(forms.Form):
content = forms.CharField(widget=forms.Textarea(attrs={"cols":20, "rows":5}))
Unfortunately, the code does not change the looks of the form at all when the page gets rendered. Meaning, it displays cols 40 and rows 10. But wait, things get really bizarre... when checking on the developer tools, on Google, I can see that the HTML code has changed to what I want! crazy!!
I also tried the following code that I found in a different chat:
attrs={"style": "height:60px; width:500px"}
Which "changes" the size of the box but... for different reasons I'm not in love with this solution.
Does anybody have an idea of what is happening here?
I have a windows 10 and use VEC.
Cheers!
you might have css style which defines width and height of your textarea
e.g.:
<html>
<head>
<style>
textarea {width: 100px; height:30px;}
</style>
</head>
<body>
<form>
<textarea cols="30" rows="5"></textarea><br/>
<textarea cols="40" rows="7"></textarea>
</form>
</body>
</html>
I also had the same issue with the Textarea. If I don't give any attrs value while creating the textarea.
pgContent = forms.CharField(widget=forms.Textarea)
It takes the default value of row=10 cols=40, defined in the django documentation for textarea. I cleared out the textarea row, col defined in css and I tried this
pgContent = forms.CharField(widget=forms.Textarea(attrs={'rows': 40, 'cols': 70})
No change in pg rendering. But the page source shows the new value of row, col.
I tried this and it worked.
attrs={"style": "height:60px; width:500px"}
css value supersedes the html value for row, col. I'm surprised why is it not taking the value defined in styles.css, which I have defined for textarea.
I have a modelform in which i've added a taggitselect2 widget as part of django-autocomplete-light.
This looks up tags from taggablemanager to allow an autocompletion. The autocomplete is working fine - but the alignment of the text inside the select box is off. The text aligns with the bottom of the select box, leaving a big gap between the top of the tag and the top of the select box. Easier with a picture:
https://imgur.com/a/WxFMLfF
forms.py
widgets = {
'tags': autocomplete.TaggitSelect2(
url='recordings:recording-autocomplete',
attrs={
'data-placeholder': 'Start typing to autocomplete...',
}
....inside def __init__
self.helper.layout = Layout(
Row(Column(Field('tags')),css_class='form-row'),
I've tried looking at styling options - this is a bootstrap project so ideally i would like the same styling you get with data_role="tagsinput" but if i assign that to the widget i guess it overrides the custom part and i get some broken output.
Couldn't work out why the default rendering is so poorly formatted so as a workaround I've just overridden the css.
On inspection, the selection elements have a 5px margin, enough to align them with the bottom. Hence applying the following in css:
.select2-selection__choice{
margin-top: 0px !important;
}
'fixes' the problem. Without '!important' it gets overridden to 5px, so this is required.
I am trying to Deep Link tabs with Dango by adding the #panel1 at the end.
This would be the template needed:
template = "charts/chart1.html#panel1"
return render ( request, template, context )
But obviously Django can not find that template once I add the hashtag.
Is there a way to overcome this issue?
Thank You.
https://foundation.zurb.com/sites/docs/tabs.html
Anything after the # ( hashbang ) is not even sent to Django webserver. You have to do the logic in your Javascript. Please consider add all your chart code to charts/chart.html and I think adding tabs class enought for the toggle.
views
template = "charts/chart.html"
return render ( request, template, context )
html
<ul class="tabs" data-tabs id="example-tabs">
<li class="tabs-title is-active">Tab 1</li>
<li class="tabs-title"><a data-tabs-target="panel2" href="#panel2">Tab 2</a></li>
</ul>
But also if you're looking for the JS reference here
I am not a javascript guy, but I got this to work. Maybe it can be improved?
I set the tab position inside the View:
tab = '#panel2v'
then call the Foundation JS.
$('[data-tabs]').eq(0).foundation('selectTab', $('{{tab}}'));
I hope this helps? Cheers.
Hi I'm using django comments in one of my apps. I customized the comments framework to fit my needs. Everything works properly until I use dojo to make the textarea for the comments expandable http://dojotoolkit.org/reference-guide/1.7/dijit/form/Textarea.html#dijit-form-textarea. After adding the script the form throws an error after submitting: this field is required. So it seems django doesn't recognize the textarea as part of the form anymore.
in my template I use the standart comment tags:
{% render_comment_form for event %}
{% render_comment_list for event %}
When I'm adding the dojo script, the textarea gets expandable, but the form doesn't pass it's value anymore.
dojo.require("dijit.form.Textarea");
dojo.ready(function(){
var textarea = new dijit.form.Textarea({
name: "id_comment",
style: "width:200px;"
}, "id_comment");
});
dojo adds a bunch of classes to the textarea so that it looks like following. But it still got it's id and it's still a textarea isn't it?
<textarea autocomplete="off" data-dojo-attach-point="focusNode,containerNode,textbox" name="id_comment" class="dijitTextBox dijitTextArea dijitExpandingTextArea" style="overflow-y: hidden; overflow-x: auto; -moz-box-sizing: border-box; width: 200px; height: 36px;" tabindex="0" id="id_comment" widgetid="id_comment" value="" rows="1"></textarea>
After reading the answers for this question: Searching for the Ultimate Resizing Textarea. I thought this might the best way to go but unfortunatly it's not.
I'm wondering if it's just me. Is there a way to get this right or should I use a different method to make the field expandable.
Edit
with dojo the post looks like that:
content_type cylebrations.image
csrfmiddlewaretoken 24827190efbb5b7793aeadaf8276beed
honeypot
id_comment ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
object_pk 4
post Post
security_hash 8a091cfbf1e309627369069d4f71c21b33843a85
timestamp 1335209980
without dojo:
comment eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
content_type cylebrations.image
csrfmiddlewaretoken 24827190efbb5b7793aeadaf8276beed
honeypot
object_pk 4
post Post
security_hash e02d8261f528cfc0f22ee30ced820cfbb80715bc
timestamp 1335210114
Dojo overwrites the name of the textarea. I called it id_comment, instead of just comment. After changing that the post looks just fine and everything works like it should:
dojo.require("dijit.form.Textarea");
dojo.ready(function(){
var textarea = new dijit.form.Textarea({
name: "comment",
style: "width:200px;"
}, "id_comment");
});
How can I make a label bold in a Django form?
The form element goes like this:
condition = forms.TypedChoiceField(label="My Condition is",
coerce= int,
choices=Listed.CONDITION,
widget=RadioSelect(attrs={"class": "required"})
)
Usually, the easiest way would be to do it in your CSS. label[for="id_condition"]{font-weight:bold;} if you're only dealing with browsers that have attribute selectors implemented. These days, that means everything but IE6. If you do need to support IE6, you can wrap the field in a div and style it that way:
<div class="bold-my-labels">{{ form.condition.label_tag }}{{ form.condition }}</div>
<style type="text/css">.bold-my-labels label{font-weight:bold;}</style>
Lastly, if you need to do it on the Python side of things, you can always stick the HTML in your label arg, a-la "<strong>My Condition is</strong>". But it'll get escaped in the HTML unless you mark it as safe, so you'd end up with:
from django.utils.safestring import mark_safe
...
condition = forms.TypedChoiceField(
label=mark_safe("<strong>My Condition is</strong>"),
...
)