I am trying to use the #Input() togglePosition on an Angular Material Expansion Panel. The documentation states the following:
#Input()
togglePosition: MatAccordionTogglePosition |
The position of the expansion indicator.
Here is a Stackblitz of me trying to use that Input, but the application fails to build. On the first line of the HTML I have added:
<mat-accordion [togglePosition]="'before'">
I forked the original example on Angular Material, so I thought it would work. Am I doing something wrong?
The togglePosition feature was released in v8.1 of Angular Material, so it will not work if you are using v8.0 or earlier.
Assuming that you are using ' mat-expansion-panel-header ' selector , try to add this code into your styles.css:
.mat-expansion-panel-header {
flex-direction: row-reverse !important;
}
Since they are using 'flex-direction:row' betwin the toggle arrow and the title , we only have to reverse them
Related
I have a standard laravel + inertia + vue3 setup using breeze, and as Inertia docs says, navigation between pages should mimic browser default behavior reseting scroll to top when page loads. But it is not working this way in my case.
I don't have preserveScroll: true in my links but this happens anyway.
I have tried with a vuejs onMounted() hook to scroll to top when component loads, but immediately the page scrolls from top to last scroll position from previous page.
So I've deactivated this hook because its ugly flashing effect.
Any idea on how to solve this?
Thanks in advance.
I think you have to define the scroll region: https://inertiajs.com/scroll-management#scroll-regions
It seems that your app doesn't use document body scrolling.
My css file had a property overscroll-behavior: contain; applied to body tag. Since I removed it, everything is working fine now.
temporary solution
in Layout.vue
mounted(){
Inertia.on('success', () =>
window.scrollTo({ top: 0, left: 0, behavior: 'instant' })
)
}
I added kendo chart on a page according to the documentation.
But started to get next error 5 times per each kendo ui chart
Error: <g> attribute transform: Expected number, "matrix(NaN,NaN,NaN,NaN,…".
Charts are drawn but those errors break pdf export. When I use same datasource as in my app on kendo ui dojo.telerik editor there is no error.
I know there might be dozens of possible reasons but I'm a bit locked with that for next few days. So I decided to try luck on stackoverflow in case anyone had anything similar.
Any ideas?
I had the same error, and for me it was related to the <kendo-chart-series-item-labels> component.
I had as property rotation="auto" but the rotation property should be only a number. Removing the property solved it.
<kendo-chart [chartArea]="{ height: 300 }">
<kendo-chart-series>
<kendo-chart-series-item
type="column"
colorField="color"
[gap]="1"
[spacing]="0.25"
[color]="barColor"
[data]="chartData"
[stack]="true"
field="TotalSum"
categoryField="TransactionType"
[tooltip]="{ visible: false }"
>
<kendo-chart-series-item-labels
font="bold 16px unity-medi"
color="#3c3c3c"
rotation="auto"
[margin]="30"
></kendo-chart-series-item-labels>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
solution: remove rotation property inside the kendo-chart-series-itme-labels component
Kendo API documentation for this component here: https://www.telerik.com/kendo-angular-ui/components/charts/api/SeriesLabelsComponent/
Of course, in your case, it may come from a different component.
Maybe double check if you have a property inside a kendo-chart or one of its child component that requires only numbers while you may be passing a string or something else to it?
I am a newbie in cypress and trying to create some basic scripts for my learning, Handling dropdown by clicking the elements is fine, but hovering on the element is not working in this case, I can see the required element is getting hovered but the sub-menu is not appearing.
it.only('Mouse hover using trigger ', () => {
cy.visit('https://www.puregrips.com/pages/custom-grips')
cy.contains("a", "Custom").trigger('mouseover')
})
You can use the cypress-real-events plugin and this worked with your webpage.
To install use the command:
npm i cypress-real-events
Then inside your cypress/support/index.{js,ts}, write:
import "cypress-real-events/support";
And in your code you can directly write:
cy.contains("a", "Custom").realHover('mouse')
Note: Since the above plugin uses Chrome DevTools Protocols to simulate native events, hence this will only work with Chromium-based browsers, so no firefox.
Things I tried that didn't work -
cy.contains("a", "Custom").trigger('mouseover')
cy.contains("a", "Custom").invoke('show')
Just try this, it should work:
cy.get('.locater').invoke('show').click({ force: true })
cy.get('[your selector]')
.eq(0).invoke('show')
.trigger('mouseenter')
.wait(1000)
.should('have.attr','your-selector','Active tooltip')
.trigger('mouseleave');
This worked for me for the above problem.
Issue:
Timed out retrying after 5000ms: cy.trigger() failed because this element is not visible: CUSTOM
This element <a.header__linklist-link.link--animated> is not visible because its parent <ul.header__linklist.list--unstyled.hidden-pocket.hidden-lap> has CSS property: display: none
it.only("Mouse hover using trigger ", () => {
cy.viewport(1440, 660); //setting viewport as site is responsive web design
cy.visit("https://www.puregrips.com/pages/custom-grips"); //visit url
//used within to get parent and children to get the desired web-element
//and used invoke("show") to show the hidden elements
cy.get(".header__linklist").within(() => {
cy.get("li").contains("CUSTOM").invoke("show");
});
});
Added final screenshot:
I have textarea which is required field. I've found post suggesting that Dojo doesn't have validation for Textarea, but in Dojo 1.9, there's an argument 'required'.
I've done the following:
new Textarea({required:true, value:""}, query('[name=description]')[0])
but the effect isn't what I've expected. The texarea has red border always, even if the field wasn't focused (as opposite to, for example, ValidationTextBox). But when I call:
form.validate()
the validation is passed even if the texarea is empty.
Is it possible to get Textare behave the same as in ValidationTextBox, or as for now, the validation for that component is not yet ready and I'd have to write custom version (as in linked post) or wait for next Dojo?
I've done it using mixin of SimpleTextArea and ValidationTextArea:
define(["dojo/_base/declare", "dojo/_base/lang", "dijit/form/SimpleTextarea", "dijit/form/ValidationTextBox"],
function(declare, lang, SimpleTextarea, ValidationTextBox) {
return declare('dijit.form.ValidationTextArea', [SimpleTextarea, ValidationTextBox], {
constructor: function(params){
this.constraints = {};
this.baseClass += ' dijitValidationTextArea';
},
templateString: "<textarea ${!nameAttrSetting} data-dojo-attach-point='focusNode,containerNode,textbox' autocomplete='off'></textarea>"
})
})
See also my answer in Dojo validation of a textarea
The power of Dojo lies in extending it with ease. If you really need the required functionality, then implement it. If you design it well, there should be no problem if it actually gets implemented in a new release of Dojo.
If you really want to know if such a feature exists or is in development I suggest looking at http://bugs.dojotoolkit.org. Besides, you can always contribute to the code, that's what open source is meant for.
I would like to add to the answer of Donaudampfschifffreizeitfahrt
instead of "this.baseClass += ' dijitValidationTextArea';"
I would do
this.baseClass = this.baseClass.replace('dijitTextBox', 'dijitValidationTextArea');
because
• we do not need the TextBox class if we have got a textarea mixin
• ! the "rows" parameter is mixed in but not fired/styled if the TextBox class is present ...
I'm trying to insert a link into an instance of CKEditor using the following line: -
CKEDITOR.instances.CKInstance.insertHtml('My Text');
All that happens though is that 'MyText' is inserted without the link. Anyone know how to insert the link properly?
PS. I know that CKEditor comes with a plugin to insert links but I'm doing my own one
Thanks
Shazoo
I guess that you're using CKEditor 4.1 or newer. And since you don't use the official link plugin, your editor discards all <a> tags. You need to properly configure Allowed Content Filter so your editor accepts <a> tags back again.
You can do it when defining your command, like this:
// Assuming you want a dialog-driven command...
editor.addCommand( 'yourCommand', new CKEDITOR.dialogCommand( 'link', {
allowedContent: 'a[!href]', // Allow <a> in the editor with mandatory href attr.
requiredContent: 'a[href]' // This command requires <a> with href to be enabled.
} ) );
Or in editor's config with config.extraAllowedContent = 'a[!href]'. This is not recommended though as you develop a plugin (right?), which should bring a custom command.