i'm using ParsleyJS library to validate my form, but if a field is invalid i only want to apply the error classes but i don't want to display the error messages. If i use the property data-show-errors="false, then neither the class or the error shows. I used this method of putting display:none in the css:
ul.parsley-error-list {
display:none !important;
}
ul.parsley-error-list li {
display:none !important;
} and it works, but i wanted to know if this is the right approach for doing this or if the library has a way to configure it? Thanks!
As of version 2.0+ you can disable the error messages with adding:
data-parsley-errors-messages-disabled
attribute to your form input elements. This won't disable the red color marking of the inputs though.
No you're right, there is currently no support for this kind of option, and it would be nice to provide it natively in config.
I'll look into it, or feel free to add it and submit a PR.
Thanks
Related
I'm using react-native-render-html to render html and the HTML Tag is like a defines subscript text.
Au IV<sup>e</sup>
In my app :
I'm trying to have style to avoid that but I think there is better way to solve the issue.
What to you thing
The default style for <sup> element looks like this:
{
textAlignVertical: 'top',
fontSize: 'smaller'
}
Unfortunately, there is a bug on React Native whereby textAlignVertical: 'top' doesn't work for nested Text elements on Android.
I've also submitted a feature request for 'sub' and 'sup' support in their Canny.
I suggest you:
Upvote the Canny feature request;
Upvote the bug report;
That would help giving more visibility to those issues. And if you or your team has any Android SDK experience, you could also submit a fix upstream. Check the bug report thread as a contributor seems engaged in resolving the issue.
Is there a way to define a custom header template for a dynamic dialog?
For the normal dialog you have the possibility to define the p-header tag, with your custom html code.
But I don't find any way to do this for a dynamic dialog.
There is no official way mentioned in PrimeNG documents to add custom template to DynamicDialog header. When we open a DynamicDialog, we only attach a body of Dialogbox and not header/footer.
You can add dynamic title to DynamicDialog while opening it. Hope this will help.
const ref = this.dialogService.open(DialogComponent, {
data: this.data,
header: this.title,
width: '60%'
});
You can modify css of DynamicDialog header like:
::ng-deep .p-dialog .p-dialog-header {
border-bottom: 1px solid #000;
}
Important Note:
You can use simple Dialog in PrimeNG where you can create custom headers,body & Footers. It will work same like DynamicDialog. Do mention modal=true like below:
<p-dialog [(visible)]="display" [modal]="true">
<p-header>
Header content here
</p-header>
Content
<p-footer>
//buttons
</p-footer>
The answer is a little bit late. But maybe someone else is also searching for a workaround. Afaik it is still not possible since this issue on GitHub is still open.
However in documentation to DynamicDialog there is mentioned, that you can not show the header with the parameter showHeader. This means you could easily just hide the default header and in the component for your dialog design your own header.
Wanting to leverage some of the built in functionality (date validation, etc) of react-day-picker while not offering the calendar overlay (offering the user an input field without the calendar overlay).
I'm not seeing any options in the docs to show only the input field without the calendar overlay.
Am I missing something?
Maybe a hacky way but I can see that you can provide custom prop classNames to the DayPickerInput component. Source
And you could provide an object like
<DayPickerInput>
classNames={{
overlayWrapper: 'myCustomClass'
}}
/>
.myCustomClass {
display: none;
}
or if you can hide the default class for the overlay wrapper
.DayPickerInput-OverlayWrapper {
display: none!important;
}
Nope, looking into the source but it's open source. You can copy the file and remove the parts you don't need.
I am trying to use Angular Bootstrap Confirm by Matt.
In his demo (click here), it is mentioned that html can be used in the message. His code:
Are you really <b>sure</b> you want to do this?
I changed that to
Are you really <b>sure</b><br> you want to do this?
and it still worked. But if I try to add any complex element like input or button, it does not work.
Enter <b>Yes</b><br> <input type='text'> <br>and click 'Yes'
Is there a way to add input or textarea to the message?
You would have to fork their code, based on the source, it is using a class, so you could not do this through the interface.
https://github.com/mattlewis92/angular-bootstrap-confirm/blob/master/src/angular-bootstrap-confirm.html
Is there a way to disable the icons in ui-select2? I am using ui-select2 in angular js, which is like adding tags while posting a question on stackoverflow:
How can I disable remove icon conditionally?
Official website of ui select2
[Edit 2018-11-12] You could always do a "display: none" on the x span:
span.select2-selection__choice__remove {
display: none;
}
You could also use that to disable click on it with pure JS.
And there is also a "locked" option: http://select2.github.io/select2/#locked-selections
You can then control, per data, which one can't be removed from the selection.
Could something like this help you?
Remove span tag in string using jquery
It's not a direct answer, and it's not ui-select2 specific, but it should help you understand how to remove certain elements. You can just add a condition and that's that.
This is also works
span.select2-selection__clear {
display: none;
}