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
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 trying to make use of the #extend of sass so that I don't mix markup and html together. As explained in this article.
In short, instead of writing
<div class="alert alert-primary>This is an alert!</div>
You'd instead write something like
<div class="banner">This is an alert!</div>
.banner {
#extend .alert;
#extend .alert-primary;
}
Such that styling and content stay nicely separated.
The problem: When using this with webpack (sass-loader) and components (e.g. Vue.js or Angular), I run into a problem where including a bootstrap partial will now result in the complete compilation of the entire bootstrap file into css.
This results into a class .btn[data-v-3614b62c] and another .btn[data-v-45ac961c] etc. for every component that uses the partial bootstrap/scss/_buttons.scss and that for all classes defined in that partial.
Even if I don't use it.
In the long run, this will be detrimental for the application since its size will increase rapidly and I image the browser will slow down with that many css classes to parse.
The question(s): How do I make sure sass doesn't duplicate the entire imported partial?
Can I enable some kind of tree shaking where it only includes the classes I use?
Do I have to change my file structure so that sass understands I only need certain classes inside the partial rather than everything?
Code example
This is a vue component using bootstrap
<template>
<form class="form">
<input type="text" class="input">
<button class="button-submit">Send</button>
<button class="button-cancel">Cancel</button>
</form>
</template>
<style lang="scss" scoped>
#import "node_modules/bootstrap/scss/functions";
#import "node_modules/bootstrap/scss/variables";
#import "node_modules/bootstrap/scss/mixins";
#import "node_modules/bootstrap/scss/root";
#import "node_modules/bootstrap/scss/buttons";
.form {
.button-submit {
#extend .btn;
#extend .btn-primary;
}
.button-cancel {
#extend .btn;
#extend .btn-danger;
}
}
</style>
This will result in the entire partial _buttons.scss to be compiled into css instead of only .form .button-submit and .form .button-cancel.
Live example
https://codesandbox.io/embed/musing-feynman-8w2kx.
To see the problem I have:
Right click on the example to the right and click Inspect
In the Elements tab, navigate to #document > html > head
At the bottom you'll have several style elements
Two of them will contain all the button css where only the [data-v-######] attribute is different and at the end are my couple of lines code.
Note that the same happens for production builds. The css is then simply bundled up in a single file, but duplicates are still around.
If you are #importing the same CSS rules into different components, then you will get the same rules duplicated across all modules. That's just how it works.
You should only be #importing modules that define abstract declarations like variables, mixins, functions, etc, not actual styles.
The only way you can de-duplicate the styles globally is if you use something like mini-css-extract-plugin to extract and combine all the CSS into a single file and then run it through something like cssnano which will discard duplicate rules (although with scoped CSS, this probably won't work).
Modules are typically built independently of other modules and there isn't a simple way to know if a rule has been declared already by a previous module. In development you may be using style-loader which operates on a per-module basis and injects styles into the webpage on demand; there's just no way it can work out which styles should be injected in case some particular style has already been injected by another component.
It just gets messy; keep it simple by not duplicating styles in the first place.
If you really want to use #extend, then make a separate .scss file which is the only module that #imports the bootstrap styles, and define all your extensions in there.
For a project where Vue is dropped in, is using style or similar available to components?
Vue.component('vue-sup', {
template: '<div>Sup</div>',
style: '* { color: blue; }'
})
I tried adding the styles inside the template like:
<div>
<style>
.here{}
</style>
<div>Sup</div>
</div>
which didn't work because the template parser detected a tag with side effects
Vue's implementation of scoped css is entirely a feature of vue-loader, and thus only works with compilation. Scoped css momentarily made a debut into Html 5 but saw almost no adoption and was dropped entirely as far as I know. There is the anticipation that "Shadow DOM" may be supported broadly and could be use to add scoped css, but adoption is not there yet either.
So at this point you can add unique classes or ids obviously to a parent container and scope your css that way, but is understandably not what you are asking for nor is it always practical.
The best alternative is a pollyfill. There are several that are available. Here is one by Sam Thorogood and another by Thomas Park but if you do a quick search you will likely discover more.
I came across the same problem and I'm able to insert styling inside Vue template
by creating a component that will dynamically insert a <style> tag on the DOM. This might be impractical like #skribe said but it allows me to have separate CSS from JS without using .vue extension.
You can take a look at this
how can i change width of container in bootstrap3. I want content in center of browser (70% of browser's width).
<p>
Use Bootply to design, prototype, or test the Bootstrap framework. Find examples, share code and rapidly build interfaces for Bootstrap.
Use Bootply to design, prototype, or test the Bootstrap framework. Find examples, share code and rapidly build interfaces for Bootstrap.
</p>
<p>
Use Bootply to design, prototype, or test the Bootstrap framework. Find examples, share code and rapidly build interfaces for Bootstrap.
Use Bootply to design, prototype, or test the Bootstrap framework. Find examples, share code and rapidly build interfaces for Bootstrap.
</p><p>
Positive Energy By Nature <br>
Sun is always there for us
</p>
<p>
Use Bootply to design, prototype, or test the Bootstrap framework. Find examples, share code and rapidly build interfaces for Bootstrap.
</p>
</div>
Please check my code
You surround your p tags in a
<div class="container">
Then in your css file declare something like:
.container {
max-width: 70%;
}
I hope that this will help you :)
But instead of 70% it is better to declare max-width precisely...like max-width: 1100px;
You can create a new style. Name it styl.css. Afterwards, search bootstrap3 folder. You will find bootstrap.min.css. Type Ctrl+F and search for "container" class. Modify it.
for example,
.container{
width:70;
}
I hope that will help you.
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;}