I'm trying to build a Flask form with one field being a QuerySelectField. Everything works, except that Bootstrap is rendering the <select> to look like a text input field.
When I look at my page source, I see that the field is rendering as <select class="form-control"...>. If I've read the Bootstrap docs aright, I need to change this to <select class="form-select...>. I've tried putting both render_kw={'class': 'form-select'} and extra_classes='form-select' in my form class, but the latter throws an Unexpected Keyword exception and the former seems to be ignored.
How do I get my SelectField to render as a <select> field?
I resolved this problem by switching from Flask-Bootstrap to Bootstrap-Flask, as the former has not been updated for several years. This also required changing {% import "bootstrap/wtf.html" as wtf %} to {% import "bootstrap/form.html" as wtf %} in my templates, as well as replacing calls to wtf.quick_form() with calls to wtf.render_form().
Related
I am working on a visualforce page using an inputField on custom object with a date field and looks something like this:
<apex:page id="myVisualForcePage" showheader="false" controller="myController">
<apex:composition template="myTemplate">
<apex:define name="body">
<apex:outputpanel id="fullPage">
<div class="form-group">
!A bunch of other stuff!
<label class="col-xs-4">My Date</label>
<div class="col-xs-8">
<apex:inputfield id="myDate" styleClass="form-control" value="{!myControllerObject.MyCustomDateField__c}"/>
</div>
</div>
</apex:outputpanel>
</apex:define>
<apex:composition>
</apex:page>
For some reason the datePicker is not being formatted correctly on page load until an actionFunction is called.
This appears to be because the some of the standard salesforce css styling classes do not load on page load until the call is made.
When the page is loaded, we can see that the datePicker does not have the standard elements.css class associated with it and there is no link to the style class:
Datepicker Element
Datepicker Element Styling
CSS links before callout
Following a call to the action function, we can see below that all of salesforce's standard css styling classes are loaded and that the datepicker now has styling elements from element.css which was loaded:
Newly loaded css styling links
New element styles for date picker
If anyone has any information about why this may be happening and how to ensure the resources are loaded on page load I would really appreciate it!
As an update, if I load the following resource resource explicitly then it will work correctly:
<link href="/sCSS/41.0/sprites/1516644206000/Theme3/default/gc/elements.css" type="text/css" class="user" rel="stylesheet"/>
However, I do not need to do this on other pages and I am wondering why? Could this be a difference in API's?
By specifying showHeader=false you're declaring you don't want any SF "overhead" on your page, including stylesheets.
Check <apex:page> and consider explicitly adding standardStylesheets="true"... In theory it's a default but looks like you uncovered some funny behavio(u)r.
standardStylesheets: A Boolean value that specifies whether the standard Salesforce stylesheets are added to the generated page header
if the showHeader attribute is set to false. If set to true, the
standard stylesheets are added to the generated page header. If not
specified, this value defaults to true. By setting this to false,
components that require Salesforce.com CSS may not display correctly,
and their styling may change between releases.
For anyone who has this issue, try changing your visualforce page's API version. I find that v39 works fine but I had a page on v41 and v44 that both had this problem.
I have the code below and I need to pass an html element (anchor) as shown. I have tried using filters like raw and escape but it always prints out the html element as regular text. I also tried setting a new variable that contains the same string text and passed that to testLink and then applied filters to it, but same result. Any ideas how to tackle this problem?
{% include 'example.html.twig' with {'testLink': 'Hurry, Click me NOW'} %}
You cannot handle your problem in the template that is including the example.html.twig template as autoescaping will step in when the passed value is displayed in the included template. Instead, you will have to use the raw filter in example.html.twig (be careful with that solution though as the template is probably used in other places too which might not be safe).
I want to render only one field of a form. When i put {{form_end(form)}} every other field are coming (symfony doc show it clearly) but how to render only one field ? If i dont put {{form_end(form)}}, there is only one field, but no save button
thanks
Yes, CSS can do the trick. But do you want the working of your application to depend on client side styling rules? In most cases it might beter not to render the field HTML at all.
There are two ways in which you can fix this in your template.
Put {% do form.field_you_want_to_hide.setRendered %} before your {{form_end(form)}}.
This will mark the field as rendered and thus it will not show up when form_rest is called.
Instead of {{form_end(form)}}, use {{ form_end(form, {'render_rest': false}) }}, as explained in the Symfony Twig documentation.
It would be even better to change your form class such that the fields are removed from your form. Is it your own form you would like to render, or a form from a third party bundle?
Using Meteor's phenomenal autoform from aldeed.
I have a custom form using autoForm that has the autosave on.
{{#autoForm collection="people" id=formId type="update" class="update" doc=. autosave=true template="autoupdate"}}
I have created a custom input template, the relevant part of which looks like this:
<template name="afInputText_autoupdate">
<input type="text" value="{{this.value}}" {{atts}}/><span class="display-value">{{this.value}}</span>
</template>
The .display-value span is shown and the input is hidden by default (using css), and when clicked on the input is shown and the span is hidden.
Everything works as expected including the autosave feature except that the value in the .display-value span does not update automatically as I would expect.
I suspect there's something about the object used to create the form not being subscribed to the document in question. I don't have the understanding of the inner workings of Meteor yet to figure this out (I've tried).
Could someone kindly point me in the right direction to get that value to update?
I have a simple form for uploading a profile picture and then a thumbnail image showing what has been uploaded. The HTML code is:
<form action="{% url 'base-welcome' %}" enctype="multipart/form-data" method="post">
{% csrf_token %}
<ul>
<li><span>Upload A Profile Picture:</span> <img src="{{ user.profile.get_thumbnail }}">{{ profile_form.picture }}</li> , then closing elements, etc..
The problem is that the form is creating unwanted elements in the "li". See the following image:
The "currently" and "change" have been created. I've already hidden a checkbox that was created using display: none. I can't really do that with these elements because they are just text that was generated.
I think this is a problem with the models.py/views.py pages, but I may be wrong. Just looking for a simple HTML/CSS fix. Thank you so much!!
It looks like picture field is using ClearableFileInput widget. To use standard FileInput widget (without these extra words and checkbox), do just in your form:
picture = forms.ImageField(upload_to='/path/', widget=forms.FileInput)
In that case you just have to render your forms manually :)
You could either write your own helpers - I can see this as ie. custom filters: {{ form.field|as_file_input_field }} or you could use some external helpers like: http://djangopackages.com/grids/g/forms/
I would still suggest writing your own helpers just to learn how django forms renderer works :)
You could also take a look here for some samples of how we tried to solved this problem while before: https://github.com/efabryka/django-template_widgets :)
This is how the ImageField default widget is rendered - maybe it will be worth your while: https://github.com/django/django/blob/master/django/forms/widgets.py#L298
Are you just wanting to hide some text? I haven't touched HTML/CSS in a while but can't you just put the text inside a div or a span and then hide that?
set color: white; for that element, then all text will be "invisible" lol.