We are looking for a solution to add a CSS class attribute to a Django form's <input..> field. We've seen the advice that suggests we wrap the field in a <div> http://docs.djangoproject.com/en/1.2/topics/forms/#customizing-the-form-template, but this advice mainly seems to apply to a fields label, not it's <input ...>.
This particular advice doesn't work if you are trying to create a border around the <input> field. In that case, the <div> will be applied to the bounding box, and not the actual input field. For example .wrapper { border: 1px solid #666;line-height:22px;height:22px;padding:3px 5px;width:205px;} will create a box around the field, rather than replace the default <input ...> border.
We've fallen back to applying the class through a widget applied to the Form class, but this lacks a certain amount of code elegance (and violates DRY). For example, this solves the need.
class ContactUsForm(forms.Form):
name = forms.CharField(widget=forms.TextInput(attrs={'class':'form_text'}))
But of course, this ties the Form very tightly to the CSS. And it get's even more complex if you are trying to apply class attributes to <input ..> fields if the form is based instead on the cool new forms.ModelForm system.
We've spent the better part of two days playing with this issue (and studying Django source code), and it looks like we may be reaching the farthest edges of Django for this one particular issue -- but we just wanted to take one pass at StackOverflow to see if anyone else had insight.
Thanks for any insight.
One final comment: feel free to set us straight on this if the problem is our understanding CSS (rather than django). We've spent quite a bit of time messing with CSS options, but none of them seem to allow us to accomplish the effect desired -- that is replacing the default <input...> border.
You could use child selector like this:
.fieldWrapper > input {border: 1px solid #666;line-height:22px;height:22px;padding:3px 5px;width:205px;}
Related
Example of the HTML of a dropdown element:
<div aria-owns="ember-basic-dropdown-content-ember1234" tabindex="0" data-ebd-id="ember1234-trigger" role="button" id="ember1235" class="ember-power-select-trigger ember-basic-dropdown-trigger ember-view"> <!---->
<span class="ember-power-select-status-icon"></span>
</div>
The xpath and CSS selector also contain the same ember id.
xpath : //*[#id="ember1235"]
css selector : #ember1235
The ember id would change from id="ember1235" to say, id="ember1265" when there is a change in the UI.
I am using id to locate the element. But every time it changes I need to modify the code. Is there any other attribute I could use for Ember JS UI elements?
There is quite a lot to discuss in your question but hopefully we will have a good answer for you #PriyaK
The first thing to mention is that Ember IDs may not be the best method to select an element in the DOM. As you have already mentioned, they can change from time to time and also it doesn't really give you a great semantic thing to select in your selenium test so it might seem a bit out of context when looking back.
One thing that you could try is to either pass a class to the ember-power-select component (the one that provides the HTML that you used in your example) and use that to select the element, something like:
<PowerSelect
#class="my-fancy-class"
as |name|
>
{{name}}
</PowerSelect>
Then you should be able to select the selected value by using the CSS selector .my-fancy-class span (because the component outputs the selected value in a span)
We just tried this in an example app but it didn't actually work 🤔 Never fear, you can also do something like this and it should work with the same selector as before:
<div class="my-fancy-class">
<PowerSelect as |name|>
{{name}}
</PowerSelect>
</div>
This is fine, but there are also a few issues using classes for selectors in tests. One example of a problem that might crop up is that your tests might all suddenly stop working if you did a style refactor and changed or removed some of the classes on your elements. One technique that has become popular in the Ember community is to use data-test- attributes on your DOM nodes like this:
<div data-test-my-fancy-select>
<PowerSelect
#class="my-fancy-class"
as |name|
>
{{name}}
</PowerSelect>
</div>
which can then be accessed by the following selector: [data-test-my-fancy-select] span. This is great for a few reasons! Firstly it separates the implementation of your application and tests from your styling and avoids the issue I described above. The second benefit of this method is that using what #Gokul suggested in the comments, the ember-test-selectors package, you can make use of these data-test- selectors in your development and test environments but they will be automatically removed from your production build. This is great to keep your DOM clean in production but also, depending on the size of your application, could save you a reasonable amount of size in your templates on aggregate.
I know you say that you are using selenium for your testing but it's also worth mentioning that if you're using the built-in Ember testing system you will be able to make use of some testing helpers that addons may provide you. ember-power-select is one of those addons that provides specific testing helpers and you can read more about it in their documentation: https://ember-power-select.com/docs/test-helpers
I hope this answers any questions you had!
This question was answered as part of "May I Ask a Question" Season 3 Episode 1. If you would like to see us discuss this answer in full you can check out the video here: https://www.youtube.com/watch?v=1DAJXUucnQU
I'm new to bootstrap. The control-label class seems to be undocumented at the bootstrap 3 website and i have noticed it just accidentally in the examples.
Could anyone explain it's purpose or guide me where I can get more info on it?
control-label is useful when we create forms. At the time of creation, you may come across in such situation like your text field is just after the completion of label.
So you have to write CSS to make it more attractive.
In bootstrap, they have provided class called control-label whose work is to automatically set the label. So that label and text field looks better and we don't have to write CSS for that.
CSS of .control-label:
.control-label{margin-bottom:0;
vertical-align:middle;
margin-bottom:0;
text-align:right;
color:#a94442;
}
NOTE : Here I have not include padding because padding may vary according to screen size.
If you want to know more about it, just look at that Demo.You will at least get some idea about it.
See http://getbootstrap.com/css/#forms-horizontal
It's for labeling a .form-group. For .form-horizontal it does
.form-horizontal .control-label {
margin-bottom: 0;
padding-top: 7px;
text-align: right;
}
... mainly for right-aligned labels.
Proposition:
G'day, I have a question for the collective dart wisdom-trust. I made an observation while trying to resolve a mysterious error with Dart and Dart-Polymer (see: related).
The thing I came across relates to dart-polymer (and dart-polymer) Element code-reuse; during my investigation of the aforementioned bug, I created two cloned dart-polymer elements:
<x-fred> and
<z-fred>
Both are clones of the Stopwatch element in the dart-polymer example.
Define a Custom Element tutorial.
The only change from the original is element name(s).
What occurs to me, is that to be able to code-reuse a nice 'stock element' such as a stopwatch I minimally need a distinct fred.html for each Element I code-reuse.
That presupposes that I can organise my project such that this is convenient and simple to maintain.
Question(s):
The real question is about how-can a developer do the following things ... ?
code-reuse an Element layout definition without needing to make a clone (or copy).
Is there a dart-polymer pattern to (at least) allow a project to code-reuse the base dart code for cloned dart-polymer elements?
Is there a way to code-reuse an Element definition, using a declarative or "what-not-how" pattern so that I can say:
<z-fred> is-a stopwatch-element (for example).
Are there patterns or recipes to let you be-a stopwatch-element and configure and/or customise an instance to certain styling, parameters, or behaviours.
If not, then these things need to be set-down for discussion. Where does that happen for dart and [dart:polymer]? Is there an comp.lang.dart? :-)
Example:
Assume I have a Polymer element called <z-fred>. And I want to subclass the z-fred element to produce a new (daughter) element definition: <x-fred>
How can I do this?
I'd expect to be able to do something like ...
<!DOCTYPE html>
<polymer-element name="x-fred">
<link rel="import" href="elements/zfred/fred.html">
<template>
<style>
:host { /* override zfred defiitions */
background-color: blue;
text-align: center;
display: inline-block;
border: solid 1px;
padding: 10px 10px 10px 10px;
}
</style>
<div>
<x-fred>
<h1>X-Fred: {{counter}} </h1>
<p>Fred X is a count-down timer. Fred Z is a normal stopwatch (count-up).</p>
<override>
<button on-click="{{stop}}" id="stopXFredButton">Stop</button>
</override>
</x-fred>
<div>
<p>this is a count-down timer. Remaining time at end: {{ counter }} </p>
</div>
</div>
</template>
<script type="application/dart" src="xfred.dart"> </script>
</polymer-element>
See? My example won't work because what's required here is that XFred.polymer inherits from ZFred.polymer.
That said, there is nothing I've seen to bind .html plus .dart into a 'element module' of some ilk. In my small way I wanted to do that by putting each widget in its own folder. For this to work (and there will be better mechanics), the daughter needs to be able to override parent Public and Protected attributes (not private).
I was thinking that xfred.dart would implicitly inherit zfred.dart (since lexically) both Dart files are unrelated to the Polymer element. At this juncture there are product design questions to be explored. Options like:
HTML files have independent inheritance tree to the .Dart files.
That means that zfred and xfred might use (share) the same underlying implementation, per various examples.
Alternately, one could 'invoke' a suitable .Dart implementation of a defined interface.
A blended 'widget' element made up of .html and .dart code specifications.
In a real user interface, I may want to combine a variety of base UI elements into different kinds of sub-elements to make-up a page, form or layout. I think life remains less messy following concept #1. That satisfies another requirement for me, to do with being able to manage alternate code-behind behaviour for the same element.
At the end of the day. The main question I'm asking is how much is part of the framework and how much is manual hack work to ensure things stay happy? :-)
You can inherit from existing polymer elements.
Polymer.dart Extending DOM elements
Seth Ladds dart-polymer-dart-examples
For discussions the best place are the Dart Google groups
https://groups.google.com/a/dartlang.org/forum/#!forum/misc
https://groups.google.com/a/dartlang.org/forum/#!forum/web
https://groups.google.com/a/dartlang.org/forum/#!forum/vm-dev
https://groups.google.com/a/dartlang.org/forum/#!forum/compiler-dev
https://groups.google.com/a/dartlang.org/forum/#!forum/editor
I was experimenting with Dojo and Dijit in the past days and I find it quite interesting. I was however trying to find a reference or an API doc that helps me understand all the properties I can assign to widgets and containers.
For example a Tab with a Save Icon will be like this:
<div data-dojo-type="dijit.layout.ContentPane" title="Group Two" data-dojo-props="iconClass: 'dijitEditorIcon dijitEditorIconSave'">
Now, where can I find what to put in the "data-dojo-props" property? Where can I find for example all the list of icons?
My main question would be for example on how to create a vertical menubar, but beyond odd examples scattered here and there, the api reference is not much helpful...
Any help? Am I missing something here?
For this kind of situation, the trick is learning how to convert between the programmatic Javascript style and the declarative HTML style (and sometimes also between the old declarative style, without data).
For the new declarative style, basically the only "real" argument now is data-dojo-props and it consists of an object that will be passed to the widget constructor.
//programatic style
new dijit.myWidget({foo:'a', bar:'b'});
//declarative style
<div data-dojo-type="dijit.myWidget" data-dojo-props="foo:'a', bar:'b'"></div>
You can find what properties an widget accepts by checking the corresponding widget documentation and looking for either declarative or programmatic examples (now that we know how to convert between them). If that is not enough, you can also check the source code - it is usually very well commented and is where api.dojotoolkit.org gets its data from anyway.
I'd like to style a select-box with some gradients.
My problem is that somehow there is a shadow added.
You'll see what I mean by opening this fiddle.
The gradient of both classes is the same ...
I do not know why a shadow is added to the select-box and I just can't find a solution.
Can you help me?
Thank you.
The select element is handled by the underlying platform/OS, rather than the browser; as such it's not possible to style them (using Chrome 8/Win XP). If you feel the need to use styled select elements then you'll need to use a regular html element (such as an ol or ul) in combination with JavaScript.
I put together a demo of the ideas involved for another question, which shows how this might be achieved: JS Fiddle demo.
I'm not sure what you mean by the 'shadow', although typically input elements are styled with a :focus pseudo-element rule, to indicate that the element has focus. This can be amended with:
select:focus {
outline: 0 none transparent;
}
Although this does reduce the accessibility of the form for those navigating with keyboards/non-mouse input-devices. Ideally, it's better to define an outline that fits with your site's design.