I am probably missing something basic but I cannot seem to get emptyItemClass to be applied to a kendo-UI sortable component for angular 2.
I have also tried using emptyItemStyle, and get the same result.
<kendo-sortable [data]="viewColumns" itemClass="itemClass" emptyItemClass="emptyItem" activeItemClass="activeItemClass"
[emptyText]="'No columns selected'" (dragEnd)="doneDragging($event)">
In this above code snipit itemClass and activeItemClass work, but emptyItemClass does not.
Here is a StackBlitz of my problem
You need to remove the brackets in your example and also use ViewEncapsulation.
Working StackBlitz
Related
I have a question about paginationElement in Tabulator.
As per tabulator documentation, i created a DIV and used paginationElement in Table setup to render the paginator in the DIV. Well, it works. But with a drawback, no styling works, no colors, no highlighting of current page. So it is kinda inconvenient.
Is there a way to resolve this?
Otherwise, i am really happy with Tabulator! Thank you for the great work!
Cheers
You might have to style the pagination footer by css as the location of it has been changed by paginationElement.
This is because all of the table styling is based around the pagination element being inside the table.
Moving it outside the table will mean you will need to apply the styles yourself. The classes that denote that you are on the current page etc will still be applied, you just need to tell the browser how to style them.
The Styling Documentation contains more information on the classes used by tabulator and how to style the table
specifically, I would like to test that the logo appears on the home page of the app. I guess I am not sure what I should use to look for the image.
I tried
it('has a logo', function () {
cy.visit('http://localhost:3000')
cy.get('img').should('contains' , 'My-Logo.png')
})
instead of cy.get I also tried to just use
cy.contains('My-Logo.png')
but it also fails.
I wasn't sure what element I should use or if I should be using get, but it fails. When I look at the source code for the web page, the logo is hidden within the javascript (nodeJS, vueJS,and expressJS application) and I noticed the javascript seems to add a sequence of numbers and letters to the image when I go to the image page even though the image name in the assets folder does not have it on there. My-Logo.d63b7f9.png.
I figured out the solution on my own.
cy.get('form').find('img').should('have.attr', 'src').should('include','My-Logo')
I inspected the element and found the <img src... line was embedded within a <form>. I could do a cy.get('form') and pass, but could not do a cy.get('img') to pass. So then I chained them together and it passed. I am not sure why I cannot just simply add the second should statement, but it failed when I tried to just run:
cy.get('form').find('img').should('include','My-Logo')
I am not entirely sure why, but it needed the first "should" statement. I got around VUE adding the sequence of numbers and letters by just asking for the name of the file without the extension. I hope this maybe helps someone else as the documentation did not seem to cover this.
you can use only one should statement like:
cy.get('form').find('img').should('have.attr', 'src', 'My-Logo')
the third arg of should is the value to match with the element attribute.
Does anyone know how to use the TYPO3 focus area in the frontend?
TCA imageManipulation
If I use the crop attribute in the fluid-template
<f:image width="555c" height="312c" src="{article.teaserFile.uid}" treatIdAsReference="1" crop="{article.teaserFile.originalResource.referenceProperties.crop}" />
i get a serialized string in data-focus-area.
<img data-focus-area="{"x":786.1145320197,"y":96.682142857143,"width":271.44177339901,"height":270.05062857143}" src="/fileadmin/_processed_/9/b/csm_testimage_0bfc7bc724.jpg" width="657" height="566" alt="" title="Testimage">
Does the data need to be used by a JS library? Can someone recommend a library here? Because i didn't find a recommendation for a library which can handle focus Area and the attribute data-focus-area.
Or do i have to write a viewhelper giving the attributes e.g. for "jQuery focuspoint" to data-focus-x, data-focus-y, data-image-w, and data-image-h.
No, you don't need to rewrite the ViewHelpers. (It would be nice, if in the future it could be a bit better extendable then now however.)
But you can implement the jQuery Focuspoint. The only thing you need to do, BEFORE you starts the focuspoint plugin, you can transform this array into the needed values with jquery.
An exmaple from the FocusPoint documentation
$('.focuspoint').focusPoint();
So before this line, you can just simply add the values from the array as an own data attribute.
The form is different, but the logic is the same. So you have the x, y, width and height values in the focus-area array.
This would not work with responsify.js for example. It needs bottom, top, left, right values.
So yes... it won't work out of the box.
But NO, you don't need to change the PHP part, because you can solve it on the front end. (You need jQuery plugin anyway, so making some code before using it is easier.)
Changing those ViewHelpers is also a possibility of course, but you really need to rewrite their functionality (also the renderImage function to be concrete) and if you want to update it to a later version it could lead to problems.
I use chosen 1.2.0 from nuget. My chosen.css file contains class like .chosen-container, .chosen-container. When i call my dropdownlist class using .chosen() function. Resulted css class will be chzn-container, chzn-container-multi. It causes display ugly. but functionality work. I have no error in browser console.
When i check another sites, both generated markup and chosen.css contains chzn-container, chzn-container-multi classes only.
Nuget adds only css. It is not add chosen.jquery.js. I don't know why.
The Nuget package named simply "chosen" does not, as the OP says, contain the .js.
You need to search for Harvest.Chosen. Hopefully this will help someone in the future.
I'm learning how to use Draggable Views for Drupal 6 for the first time, following this tutorial: http://thedesignspace.net/MT2archives/000666.html . I'm encountering a problem though: in part 4, once I set up the draggable table ( http://thedesignspace.net/MT2archives/000708.html ) the entire preview disappears, showing no table. Switching the style to another type, such as table, brings everything back. Directly viewing the page from its path makes no difference. Any ideas of what the problem could be?
Not all of my modules were up to date when I encountered this problem. My mistake. Always update all modules first upon being stumped by incompatibility errors, even if the modules in question do not seem to have anything to do with the error.