I am using crispy forms to make a django form which has several rows. The default behaviour is for the prepend box to be just the size of the text within it. However this looks messy when there are several fields and I would prefer the prepend box to be an equal width for all. An ugly hack is to just pad the prepend boxes that contain shorter strings with spaces but this is obviously not ideal. Any advoice on how to adjust the width of the prepend box to make them equal across fields?
This if the form helper I have where I define the prepend text
self.helper.layout = Layout(
Row(Field(PrependedText('field1', 'Field1prependtext            ', wrapper_class='col-md-4 pe-0'))),
Row(Field(PrependedText('field1', 'Field1prependtextlonger ', wrapper_class='col-md-4 pe-0'))),)
You can use CSS like:
.pe-0 .input-group > .input-group-text {
width: 50px;
}
Related
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.
How do I change the text size inside a single bokeh Div widget without changing the text size of other Divs in my app? (https://docs.bokeh.org/en/latest/docs/reference/models/widgets.markups.html)
Div takes a style argument in which you can put a dictionary filled with normal html styling, eg:
some_div = Div(text="<b>A Title</b>", style={'font-size': '200%', 'color': 'blue'})
In case of use of a bokeh server, you can also use css_classes = [] to add CSS class with definition in your css file
some_div = Div(text="<b>A Title</b>", css_classes=["my_div", "custom_css_class"])
I am having problems understanding the token system for the output of query / projections.
If I leave the property as is it displays the text content with HTML formatting intact.
But I need to wrap it with a tag, the html tags get displayed as text.
Rewrite Results -> Rewrite output
<div class="collapse" id="toggle_{Content.Id}">
{Content.Fields.CaseStudy.ClientChallenge} </div>
I am trying to create a collapsible text area, I already have a button that hides/unhides the content.
Why is it displaying as text instead of rendering the tags properly.
I think this is because I don't know how replacement tokens work.
Another example problem is up one level on the edit Layout, I want to set the item class to work-item {Category}, Category being the name/title of a property, which I am using for grouping.
Right above the projection: I want to include some html that lists all the Categorys in a ul i.e. data-filter=".experiential" I have tried things like: work-item {Category} and work-item {Content.Fields.CaseStudy.Category}. Category is a "term" (?) from a taxonomy.
I feel like I am failing to understand how it all works.
Submitted as a bug https://github.com/OrchardCMS/Orchard/issues/7355
Will edit and post if it is fixed. In case anoyong else comes across this issue.
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.