I upgraded from Sencha Touch 2.0.1 to 2.1 and suddently the framework adds a -webkit-transform to all my list elements which destroys lot of my layout, anyone knows why it does so and how to remove it?
See attachement:
With Sencha Touch 2.1 the list component was completly redesigned.
Quote from Realease notes:
The new List component is included with this release. This implementation replaces the old one for lists and is no longer bound one-to-one between a store and DOM elements. This means that the length of the list will no longer have a bearing on it's scrolling performance. In addition, lists can use components if you specify them with an itemConfig and itemTpl will be converted to an itemConfig dynamically if you specify one. Due to these changes, the DOM structure was altered for lists and you may need to change some css selectors to add appropriate styling for your lists. Typically you need to change the selector from '.x-list-item' to '.x-list-item > .x-dock-vertical > .x-dock-body' for any padding or margins you may have added. We have change the TouchTweets example from using a component based DataView to the new List very easily and should be a good example of using the new List component with dynamic large lists.
http://www.sencha.com/blog/whats-coming-in-sencha-touch-2-1
The redesign is the reason for the new css list elements.
I think you have to change and customize your css again for your list.
Related
By design we have visually grouped CMS components on multiple pages. We need some kind of wrapper div or a container around specific component groups to add CSS to it and make them visually appear like one entity. We have tried with styling the slots, but this is by no means a good solution. Do you have any suggestions how we could achieve this?
I can think of various ways, they all have PROs/CONs and limitations. You could combine those strategies as well to have an optimised mix.
The easiest way to implement this is by using standard CSS selectors. There are various selectors that could be used, such as sibling selectors, last-of-type selector.
Changing the CMS structure to fit the grouping, by using a specific slot for the components. With this approach you can influence the layout by using the pageslot position based CSS selector. The disadvantage here is the the page slot is less flexible and cannot contain additional components that you don't like to be part of the "group".
You could combine components in a so-called container component; container components have a list of embedded components. The advantage is that the container component can have non-grouped component siblings, which can be rendered in a different way.
the last resort would be a rewrite of the page layout / page slot component in Spartacus, and conditionally add specific DOM. This is a lower level change and is causing more work and will derail you from the standard implementation.
Hope this will give you some ideas, if not, you should provide more details.
I am using the vue-masonry plugin which let me create a masonry grid easily.
I created a system of infinite loading where you scroll to the bottom of the page and it append new pictures to an array binded with the vue-masonry plugin.
The problem happen when I created a system of polling for the new pictures that were upoaded by other users. Those new pictures need to be at the top of the masonry grid.
The plugin use two Vue Directive masonry (parent) and masonryTile (element). masonryTile has a v-for which loop through the array binded with my Vue instance (which does all the heavy lifting, preloading, sanityzing, etc...).
Is there a way in the directives to know the differences between something being appended or prepended? And try to react differently (I know masonry has some append/prepend method) but in here and with this plugin, the items where already added (at the beginning so the prepend works with Vue) but there's no masonry interaction nor redraw (I tried to use the prototype to trigger the redraw this.$redrawVueMasonry();).
So I don't know what's next to do. Continue finding a way to differentiate a prepend from a append and trying to bind it to the respective masonry's methods ? Or another method that I didn't think of...
Thanks in advance for you help
Ps : I don't think my code is really relevant since It's more a way to optimize the plugin. If you want some specific part of my code anymay, tell me in the comment !
This probably comes a bit too late, this being a 10 month old question.
However vue-masonry is able to handle situations where items are spliced anywhere in the array. But to properly update the grid this.$redrawVueMasonry() should be called inside this.$nextTick() like this:
this.$nextTick(() => this.$redrawVueMasonry());
Hope this helps, if not the original poster, someone else.
We have implemented checkbox in popover. There we are using checked.bind , but in the view model its not reflecting its value on change of the checkboxes.
Sample Gist Run Provided below:
Gist Run
Thanks in Advance
Programmatically injected HTML needs to be compiled manually
The integration with bootstrap I provided to you earlier cannot do this. The bootstrap plugin assigns the innerHTML property of the popover and it does this outside of aurelia's rendering pipeline. The HTML is therefore not compiled by aurelia, which is why bindings (and other aurelia behaviors) will not work.
The templating framework takes care of this for you automatically as long as you are following conventions (such as custom elements). In any other case you'll need to manually work with the ViewCompiler.
In case you're interested, you can see an example with programmatically generated HTML in this gist. Also see this question if you want to know more about it. I do not recommend it in this scenario however.
Use aurelia-dialog
A tooltip (or popover) is just that: a tip on how to use the tool. It should not need more than some plain markup, text and styling (of course this is subjective to some degree, and some people may disagree)
For collecting user input in-between pages or screens, I'd argue a modal dialog is a better fit because of its property to "pop out" more and to de-emphasize the rest of the screen until the user either proceeds or cancels.
More importantly, by using aurelia-dialog your bindings and behaviors will simply work because, well, it's an aurelia plugin :-)
i am using TwitterBootstrap and i want to pass button width dynamic..like below code
I want to pass "#wth" value Dynamically from client side(from view(MVC)).
Right now it's comingStatically on varibles.less file....But i want to pass directly from view(MVC).
so, what is the Best Solution ?
Although it gives the impression of being able to do dynamic things if you use less.js in the browser, those styles are all compiled into CSS files, and have fixed values by the time they are applied to your html. So you can't change values of Less variables after the page loads.
If you need to change the width of a button dynamically based on a few pre-set sizes, I'd say you should add classes to your css (small, medium, large, etc.), and then dynamically add that class to your CSS via Jquery's addClass method.
If you need to set the width directly, I'd use Jquery's css method.
If you're going to be doing a lot of this sort of thing, you may want to look into using a data-binding library that can bind a Javascript object to your html styles, such as Knockout.
In asp.net the DataGrid supports templates. You can provide your own template and have the grid fill the data in your template.
With Dojo Grid, it seems like I can't make my own template outside of the the rigid simplistic cell style grid that Dojo provides.
Does anyone know a way to use a custom template with Dojo Grid? Specifically, with Dojo you're forced to use a cell that corresponds to a data item. I'm looking to use a table as a template with any styling that I choose (rows,columns,rowspans,colspans, more than one data items in a single cell, etc).
Any clues please?
Thanks
Firstly, it sounds like everything you want is available by customizing the grid. You can do nesting of cells and even have things like Filtering Selects in rows. Unfortunately the docs on this are not awesome so it takes Googling and trial and error if you want very customized features.
Secondly, because of the OO nature of Dojo you can always use inheritance to create mixes of various widgets. Specifically the _templated class allows you to specify an HTML template for your widget, which themselves can included templated widgets.
If that sounds non-trivial, you're right, which is why I would suggest digging deeper into the Enhanced grid and probably open up the code before trying to write something yourself.
I can tell you that I struggled getting it working correctly, but I have hence been pleasantly surprised by features that I needed that I thought I would need to build myself but were built into the grid.