I have an AngularJS application that uses Bootstrap (v3) for styling. I want to disable the Bootstrap form validation in one of my forms, which automatically gives my input field a green or red glow when a user types in content or leaves the input field empty, respectively.
Is there a way to do this using an HTML/CSS/JavaScript override? I do not want to edit the original Bootstrap files, nor do I want to use jQuery.
Note: I read that you can achieve this using jQuery with $(#form).data('bootstrapValidator').enableFieldValidators('input', false), but as I mentioned: I do not want to use jQuery.
Thank you.
You can create your own CSS file that defines the same styles as Bootstrap, like .has-error. As long as your CSS file is parsed later, you will override their implementation. Alternatively you can add !important and then you dont need to worry about order.
Note though that this could have unintended consequences, as you are fully overriding Bootstrap in this case.
Related
Is there a way to tell Angular to not compile contents of certain elements?
Use case:
Angular CMS contains textarea elements that have CKEditor attached. The CKEditor is using the divarea plugin instead of the default iframe plugin. The textareas contain HTML templates. These templates are exported on demand and fed to a Angular webapp.
The templates are simple enough: plain text, ordered lists, the occasional predefined class attribute applied on the plain text; but the plain text can contain placeholders for the Angular webapp to interpolate. I do not want to let the Angular in the CMS interpolate these at all.
Currently my problem is that the Angular in the CMS interpolates these placeholders and, since they don't refer to anything, removes them. I would rather not just change the delimiters to '{[', ']}', as while this might fix this in the short term, the chance of directive and text copy collision increases as the project goes on, and I'd like to avoid it.
Is there any directive or other way to tell Angular to keep away from the content of specially marked elements?
Use ng-non-bindable directive on the element:
The ngNonBindable directive tells Angular not to compile or bind the
contents of the current DOM element. This is useful if the element
contains what appears to be Angular directives and bindings but which
should be ignored by Angular.
Or use your own directive with terminal: true property to match the layout better, because it is the only thing that ng-non-bindable directive does.
I'm using drupal 7 and want to hide my comment form for any content type to be hidden by default. I just need "Add comment" button, once i click on it, then it should render comment form. Is there any module / way to achieve this.
you could hide the comment form in CSS with something like
#comment-form{display:none;}
plus a selector specific for one content type if you want.
Then add a javascript in that page adding some code to your subtheme's page.tpl.php that is in your subthem's templates folder (if there is no such file copy it from te parent theme templates folder)
drupal_add_js('path_to_js_file/file.js');
And in the file.js you define the function to show/hide the comment form, i.e. to change the style of #comment-form to display:block;
Then you have to create the button and you can do this in several ways:
you can create a custom block with the code for the button, you can add it in the node.tpl.php template. You can add a custom field to the content type with Display Suite code field, or maybe other modules.
This is just one way to do it.
Here's what I am trying to do:
I have a grid of elements that have text-overflow: hidden and I want to be able to show a popover/tooltip iff the text is actually hidden. I can do this manually with javascript by doing some width math but I am unsure how I would modify the existing directives to add this new condition.
Any ideas?
I know there are lots of great rich text editors out there that can easily be ported to angular and plenty of discussion on how to do this, but I'd like to create my own.
I have the basic idea down:
create a text area and watch the input and perform a function as the input changes. I am familiar with the ngBindhtml directive, only to the extent that I can apply it to an element.
Any idea how I might be able to create a function that would render plain text into html?
I've tried it before but ended up using textAngular.
Basically i replaced the textarea with a iframe, similar to the way tinyMCE does.
The contenteditable on a element allow you to replace the textarea and write directly on the div. You would insert all html elements like headers and text this way. You'll have to handle the cursor position on text, apply styles based on buttons and text selection, etc.
Well, I also came across this and created my own editor as I was required to add features like Table addition etc. The repo is still under development but you can some idea by taking a look at this plunkr. Unlike old answers, I have tried to keep it as a component so that it can be reused at many other places as required.
You can star this git repo to stay updated or feel free to add your inputs
I am having some issues getting TinyMCE to be as flexible as I need it to be. In my editor (used in a cakePHP-based app) I am not allowing users to edit the html, so we are relying entirely on the WYSIWYG. Unfortunately, TinyMCE is currently not allowing users to apply two CSS classes to the same text. Whichever style is applied last wipes out the original.
To give an example: If a user wants to designate a line of text to be both 'huge' and 'highlighted' (both CSS classes), they would highlight the text and choose 'huge' from the CSS style dropdown, then highlight the same text again and choose 'highlighted'. What results is text that only has the 'highlighted' class applied to it.
I can work around this problem currently by just adding an extra character to the text I am trying to style, apply the 'huge' class to that, apply the 'highlighted' class to the original text, and then delete the extra character. But, this really is far from an ideal solution.
Does anyone know of a way to resolve this issue?
You will have to write your own plugin looking similar to the style plugin.
When the user selects a class from the dropdown you just add it to the selected text instead of replacing it.