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.
Related
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
I would like to change the size of the text in my 'About' page of my big cartel shop (foundry theme). I would also like to change it from left-aligned to centralised layout. Where do I find these in the CSS?
To make this change it'd be best to add code to the very bottom of the CSS section in your admin, like so:
section.content .custom_page {
font-size: 16px;
text-align: center;
}
Simply adjust the font-size value to whatever you'd like (the theme default is 14px) and you'll be good to go.
in my django project I made a form using
message = forms.CharField(widget=forms.Textarea)
It works out ok and I get this. The text area is resizeable both horizontally and vertically:
I would like to make it un-resizeable horizontally, what should I do? I tried adding "attrs=" to the textarea but can't figure out what to call... Please help... Thanks.
I believe you can achieve this with a css rule:
resize: vertical;
So, one way is to give it a class
message = forms.CharField(widget=forms.TextArea(attrs={"class": "message"}))
Then define a css rule
.message{
resize: vertical;
}
I'm trying to make Django's RadioSelect widget render horizontally. I found the following SO post, that I thought had solved the problem: Align radio buttons horizontally in django forms, it basically states to use a custom Renderer, as follows:
class HorizontalRadioRenderer(forms.RadioSelect.renderer):
def render(self):
return mark_safe(u'\n'.join([u'%s\n' % w for w in self]))
class MyForm(ModelForm):
select=forms.ChoiceField(choices=CHOICES, widget=forms.RadioSelect(renderer=HorizontalRadioRenderer
But when I implement this, I still get the radio selection buttons rendering vertically. Here's a screenshot.
This is a seriois problem for my form. Any idea why it isn't working correctly? If it matters, the form is being rendered in a table.
Thanks
UPDATE:
Ok, I've tried something else. The renderer is now:
def render(self):
internal=''.join(['<span id="radio">%s</span>' % w for w in self])
return mark_safe(u'%s' %internal)
and I've added the CSS to my stylesheet:
#radio{
width: 100px;
float: left;
}
This renders the RadioBoxes inline, and looks great. But now there's an even bigger problem. As seen in my screenshot above, I have 2 choices, Yes and N/A. Right now, if I click on either yes or N/A, N/A gets selected. I thought this might be because they were both in spans with the same id, but if I change it to class="radio" the same thing happens. If I remove float: left from the CSS, then it works normally (but, of course, isn't displayed horizontally). Any idea what's causing this?
Whoa: okay.
Still not sure why having them with the same id or class caused them to behave as the same radio box, but I've come up with a solution.
The renderer now reads as follows:
def render(self):
internal = ''.join(['<li>%s</li>' % w for w in self])
return mark_safe(u'<div id="radio"><ul>%s</ul></div>' %internal)
This makes the radio boxes in an un-ordered list, surrounded by a div with an id of radio.
I then have the css:
#radio ul li label{
display:inline;
}
This puts them in a line. Nice and easy. Don't know why the other approach didn't work, when it sounded like it did for another SO user.
I would like to create a search-type text field in QT that can contain both standard text as well as what I would call "tags"... basically additional search terms that are individually highlighted and separated. I envision this looking like the multi-select in "Chosen" (Javascript library). http://harvesthq.github.com/chosen/
I have been unable to find anything similar through searching. It also seems that the standard QT text box types are not designed to have "sub-widgets".
It appears that QTextEdit supports HTML... that might be a possiblity... but the docs are not very clear to me as what is supported in terms of CSS (which I think would be required to get the desired formatting). http://doc.qt.io/qt-5/qtextedit.html#html-prop
Its funny... I got to the bottom of this submission page and realized I have to tag this (this is my first SO question)... This tag-adder box is almost exactly what I want!
There is no ready-to-use soultion that I know.
If I were to try implementing it, I would definitely use widget with layout, in which there are two types of child widgets: LineEdits (borderless to look like actual part of bigger widget) and buttons - code managing line edit changes would simply add new buttons before or after and if necesary splited linedit into tw with button between. This way is not interfering with qt programers intentions on how to use widgets and how to make them all fit together in one style.
If you want you can use custom widgets instead of buttons to provide remove icon.
As I wrote in my comment - if i have a bit more time I will try to make something like that myself.
Here is a very simple implementation of putting buttons in a QLineEdit as a user types, written in Python:
from PySide.QtCore import *
from PySide.QtGui import *
class Entry(QLineEdit):
def __init__(self):
QLineEdit.__init__(self)
self.buttons = []
self.backupText = ''
self.textEdited.connect(self.on_change)
self.layout = QHBoxLayout()
self.setLayout(self.layout)
self.layout.addStretch()
marginz = QLabel(' ')
marginz.show()
margin = marginz.width()
marginz.hide()
self.layout.setContentsMargins(margin, margin, margin, margin)
def on_change(self):
if self.text()[-1] == ' ' and not self.text().endswith(' '):
if len(self.text()) > len(self.backupText):
self.setText(self.text() + ' ')
self.buttons.append(QPushButton(self.text().split()[-1]))
self.layout.insertWidget(self.layout.count()-1, self.buttons[-1])
else:
self.setText(self.text()[0:-1])
self.buttons[-1].hide()
del self.buttons[-1]
self.backupText = self.text()
app = QApplication([])
window = QMainWindow()
window.setStyleSheet(
'QPushButton {border: 1px solid gray; background: lightgray; color: black;}')
entry = Entry()
window.setCentralWidget(entry)
window.show()
app.exec_()
It creates a QHBoxLayout and adds a button to it for each word you type, and takes the button away when you get rid of the word.
If you want to put a close button inside of each of the sub-widgets, you can make a custom widget for that too.
EDIT
As j_kubik's comment stated, systems with wide-margin buttons would cause the tag buttons to overlap the text a user is currently typing. I have modified the code to enforce the margins of the buttons inserted (with stylesheets), added an extra space for each space the user types, and set the QHBoxLayout's contentsMargins to be the same width as a space (""). Now the buttons will not overlap the text inserted.