I'm using django ModelForm and django-crispy-forms to create beautiful bootstrap forms.
I didn't find any way to generate inline checkboxes like the one available here.
Even using crispy FormHelper(), no way do define fields like:
Field('checkbox1', css_class="inline"),
Field('checkbox2', css_class="inline"),
Field('checkbox3', css_class="inline"),
where checkbox1, checkbox2 and checkbox3 are defined in the model as model.BooleanField.
Any idea?
I'm the lead developer of django-crispy-forms and all I can say is that this is not currently supported. I will try to work on a patch as soon as possible, I will keep you posted.
UPDATE 2012/9/24
django-crispy-forms 1.2.0 has been released today and includes a bootstrap.InlineCheckboxes layout object, for rendering Django CheckboxSelectMultiple widgets with inline checkboxes. I'm not currently planning on supporting a layout object for rendering several BooleanFields this way. That makes probably more sense as a custom personal layout object.
Related
Hi I come from bootstrap and Im trying to learn some vuetify. I had some questions about the framework that I couldnt find the answer to in the vuetify docs.
What is a prop? (1)
What is the difference between adding a prop and adding it as a class attr? (2)
Is there a list where I can find all the props and helper classes for the components? (3)
For example: I was trying to make a container take the full width of the screen and couldnt find any property that the vuetify docs indicated that would make my container act like, this so I had to look online. I finally read on a stack overflow post that there was a prop called full-height that did exactly what I wanted. The problem was the conatiner docs said nothing about this prop in relation to the container itself. I also looked around the customization and the styles and animations tabs on the docs and could find anything about it. Where are all these props and helper classes defined?
Vuetify uses Vue.js components, so you should be familiar with them.
However, I'll try to answer your 3 questions:
Props are a way to pass data to components. Say, for example, you are building a header component which needs to get the title from the page in which you put it in. Then, you can just declare a title property and then use that inside the component. You can then pass it like your standard HTML attributes, e.g. <the-title title="Main Page" /> If the component is called TheTitle. For more thorough information, There is a whole page about props inside the official Vue.js docs.
In your use case, a class is useful when you have the appropriate CSS styling for it, otherwise it wouldn't do anything. My suggestion would be to use props for styling individual components where you don't have the same style anywhere else and classes for cases where a style repeats itself. If the style is local to the component, make sure you add scoped to the style tag to avoid applying it anywhere else.
Vuetify has a nice API explorer which you can use to browse the entire collection of components. Each one has an API section where you can see all the details, including information about the props and other stuff.
I'd like to use Nightwatch's Page Objects system for UI components used across our app. Because nightwatch has their own way of reading/initializing them, I don't see a way of properly extending/re-using them.
For example I want an DateInputPageObject for "date fields". It would identify the label, input, date picker, etc.
I'd use it on any page with a date input field.
I would also like to extend page objects. For example, class FooModal extends Modal. The ModalPageObject would define selectors for elements all modals have - the overlay, container, close button, etc.
I can't find any way to do this in nightwatch, is it possible at all?
The problem is not with nightwatch per se as it's just following the basic structure of page object model BUT that is a very good question and it brings out one of the drawbacks of page object model.
Page object model has been around for some time and the problem with that is that it doesn't serve the needs of modern web applications that use component libraries & living style-guides and re-using components.
Personally I found it easier to use a global json file with all the components structured based on their type. e.g. labels, fields, buttons, etc.
I'm newest in web.
I want customize default scroll-bar in ag-grid. I try use ngx-scrollbar for this. In sources ngx-scrollbar I found that ngx-scrollbar using ng-content for wrapping elements(link to github source file). If wrap ag-grid-angular element then scrolling even doesn't shows because content doesn't overflow ag-grid-angular content because oveflow happen in div with class .ag-body-viewport where using stock srolls. In order to achieve needed effect I wish pass DOM element with class .ag-body-viewport to ng-content of ngx-scrollbar. Is it possible?
More info here github issue but I don't use Nice Scroll or Perfect Scrollbar
I want use ngx-scrollbar because it has capability of customization.
UPDATE
I can pass DOM element to ng-content using next sintax(agGridViewport is native element):
<ng-scrollbar>
{{ agGridViewport }}
<ng-scrollbar>
but it pass element like a copy of real DOM object but I want pass this like a refence.
Now I got UI like a stack style:
[rendered real ag-grid-angular]
[rendered ng-scrollbar with his content]
But it isn't that I need. Also I got bad rendering with artifacts and even some components doesn't appear. Now I want to try use Renderer2 for putting ng-scrollbar element between two DOM elements in tree(.ag-body-viewport-wrapper and .ag-body-viewport). But I think it's very bad idea because Renderer2 doesn't have methods for putting elements between DOM elements in tree and my code will be very unlify and complicated :( It's must be like injection.
No, I can not do injection in DOM with Angular tools. It's bad idea do it and it is not possible now. AgGrid doesn't support customization with tools like ngx-scrollbar which using ng-content for wrapping components and other elements. May be better way using other tools which working by another way or using webkit customization which supports not all web browsers.
UPDATE
Also I try to use smooth-scrollbar. I managed to get better result. I bind him to element .ag-body-viewport. It works fine but it scrolling only content of grid without header be careful. smooth-scroll bar doesn't have options for horizontal and vertical scrollbar as a different units. I know how issue can be solve. Vertical scrollbar must be bind to .ag-body-viewport and horizaontal scrollbar must be bind to .ag-root. If your can find scrollbar which let you do it that you can solve this problem. May be I write special component for Angular in near future and then add link to this answer. If you do it faster you can add yourself link or you can add link to already existing packages.
Trying to include a set of common sections and fields in all my forms. Forms were built using the form builder so I tried using the xi:include tag but the page stops working when I put the tag in. It does not matter what href parameter I provide. The form stops working.
You cannot just include a form into another one: the structure of the resulting document will not be compatible with what Form Runner expects. And that's because a form, or a section thereof, includes parts which belong to the model, and parts which belong to the view.
The main way to reuse parts of a form is to use section templates.
You can also write custom model logic.
I am trying to integrate CKEditor into an internal PHP application, where in the past I was just pasting my HTML into a textarea field in a form.
This HTML that I am submitting in the form is for a custom template system that uses custom tags. These custom tags would then be replaced with real data by my backend. For example, an invoice would have the custom tag <%INVOICE#%>, which my backend would replace with the correct invoice number.
When using CKEditor, these types of tags are being converted into htmlentities such as <%INVOICE#>, which breaks my string replacement on the backend.
Is there a way to make CKEditor recognize tags that are in the format <%*%> and not convert them in any way?
The simplest way to protect those tags against modifications would be to use config.protectedSource. With Show Protected plugin (3rd party addon), you could even see the protected code in wysiwyg area.
A more user friendly solution would be to adopt the widget-based Placeholder plugin to recognize the syntax you use for custom tags. This plugin is just a proof of concept solution, so you can improve it in any way you like. E.g. by offering a select element to the end user with the list of valid placeholders instead of asking to type them manually.
Widgets are powerful, which means that it is technically possible to write even a plugin that returns <%INVOICE#%> in source code, but shows the real invoice number in wysiwyg area.