I want to add Emoji to one of my forms using Emoji-picker in my cms that is built with Symfony and Sonata. But I realize that is not working when you have also added the IvoryCKEditorBundle.
I have this button on the backend:
<p >
<input type="email" class="form-control" placeholder="Input field" data-emojiable="true">
</p>
And when I executed:
window.emojiPicker.discover();
The plugin create the component:
<div class="emoji-wysiwyg-editor form-control cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" data-id="06986ad8-e870-4cc2-a00d-16ca23b47e71" data-type="input" placeholder="Input field" contenteditable="true" style="height: 33px; position: relative;" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor2" title="Rich Text Editor, editor2" aria-describedby="cke_180"></div>
The problem is that is also adding the class for the CkeditorBundle and the Emojis are not added to the input.
Instead of that the input is:
Important to know is that the same example out of the sonata admin bundle is working well.
Someone know what is happening, or how can I work around this problem?
Related
I'm following an online tutorial to add form validation to my Angular app below.
I've followed the steps exactly, and the validation works fine in the tutorial, but not in my code.
Below is the input that I am trying to add validation to:
<div class="form-group" [class.hasError]="fullNameControl.invalid">
<label for="fullName" class="control-label">Full Name</label>
<input
required
id="fullName"
name="fullName"
[(ngModel)]="fullName"
type="text"
class="form-control"
#fullNameControl="ngModel"
/>
<span class="help-block" *ngIf="fullNameControl.invalid">Full Name is required</span>
</div>
When the user leaves the field empty, the Label, perimeter of the input field & the span tag should be in red, but instead they are appearing like this:
Can someone please help as to why the bootstrap validation isn't working?
Also FYI, bootstrap is working fine in the other parts, so it has been imported correctly.
I'm trying to duplicate the search box on this site : https:clearviewlibrary.org over on a Wordpress install here: https://news.clearviewlibrary.org
I was able to get the search box to execute a search on the external site with this code:
<div>
<form method="get" action="javascript:void(0)"
onsubmit="window.open('http://www.wsld.info/#section=search&term<%=Config%>#section=search&term='+this.term.value+'', '_blank');return true;">
<label>
<input type="text" class="searchform" name="term" placeholder="Search Our Catalog" /></label>
</form>
</div>
but I'm stumped on how to go about adding the additional search functionality and radio buttons.
I've tried taking the code from the clearviewlibrary.org site, but that didn't work. I also saw this, but would rather not have the two buttons : HTML form action search, one text box, 2 buttons, 2 possible results
Thanks,
Brad
I am using alfresco community 5.0.d
I want to remove google username field from the user profile.
So far,
I found the file that handles this form, userprofile.get.html.ftl and userprofile.get.js. Now as I comment out the div tag for google username field in userprofile.get.html.ftl then the whole form is getting hidden without any error on console.
Form is coming blank as shown in screenshot below.
Any idea how to remove?
Thanks.
I added hidden class to the div to hide them instead of removing it,as it is not displaying any of the form fields as you mentioned.
<#if profile.googleUsername?? && profile.googleUsername?length!=0>
<div class="row hidden">
<span class="fieldlabelright">${msg("label.googleusername")}:</span>
<span class="fieldvalue">${profile.googleUsername?html}</span>
</div>
</#if>
And for the Edit fields,
<div class="row hidden">
<span class="label"><label for="${el}-input-googleusername">${msg("label.googleusername")}:</label></span>
<span><input type="text" maxlength="256" size="30" id="${el}-input-googleusername" value="" <#immutablefield field="googleusername" /> /></span>
</div>
And it is working fine.
I found the reason for form not being displayed was that I was just removing the div tags but not the dom.get method for those fields.
Files to be modified:
profile.js
userprofile.get.html.ftl
Solution:
Remove the dom.get for the fields that you want to remove from
profile.js.
Remove the div tags of those fields from the
userprofile.get.html.ftl.
Restart the tomcat
Voilaaaa !!!
Fixed and Done.
I have a simple form on my main page. It needs to be toggle-able (is that a word?) between the simple version and the detailed version using a button. Where do I put the code for the button, inside or outside the form element? I read online that the submit button should be within the form, so I'm guessing a toggle button should also be there? But I'd rather ask more experienced people. Also, how would I make the forms retain the same content that the user typed when toggleing?
This is for a form I'm making on Wordpress.
I would recommend placing the toggle button outside of the <form> element and then use jQuery (or plain javascript) to handle the switching between the simple and detailed versions of the form. I'm not exactly clear what you had in mind for the simple and detailed versions of the form, but this approach should be easy to adapt to your purposes.
You can give the advanced form fields the same class (e.g. "detailed"), have them hidden by default in your CSS, and then have them appear when the toggle button is clicked using jQuery.
The values inputted into the detailed form fields won't get lost when the button is toggled; the values are still there, but just hidden. They'd still get submitted when the form submit button was clicked.
This is the toggle and <form> code.
<button id="form-toggle">Toggle Detailed Form Fields</button>
<form id="test-form" action="action_page.php">
<p>First name: <input type="text" name="firstname" value=""></p>
<p>Last name: <input type="text" name="lastname" value=""></p>
<p class="detailed">Email: <input type="email" name="email" value=""></p>
<p class="detailed">Phone: <input type="tel" name="phone" value=""></p>
<p><input type="submit" value="Submit"></p>
</form>
This is the CSS you should place in your stylesheet, it makes the detailed form fields hidden by default:
.detailed {
display: none;
}
This is the jQuery code that you could enqueue as an external .js file in your functions.php file or before the </body> of your footer.php file:
<script type="text/javascript">
jQuery(document).ready(function($){
$('#form-toggle').click(function() {
$('.detailed').toggle('fast');
});
});
</script>
I newbie in drupal 7. I am writing new theme and I don't know how to add my class to form in drupal 7. I install ubercart to setup e-commerce website. I added new attribute for product (Size). I want to redesign in product page. In this page, It has size field but I don't know how to add my CSS. E.g:
<form action="/drupal-7.34/node/6" method="post" id="uc-product-add-to-cart-form-6" accept-charset="UTF-8"><div><div id="uc_product_add_to_cart_form-6-attributes" class="attributes"><div class="attribute attribute-1 odd"><div class="form-item form-type-select form-item-attributes-1">
<label for="edit-attributes-1">Size <span class="form-required" title="This field is required.">*</span></label>
<select id="edit-attributes-1" name="attributes[1]" class="form-select required"><option value="" selected="selected">- Select -</option><option value="1">39</option><option value="2">40</option><option value="3">41</option></select>
</div>
</div></div><input type="hidden" name="qty" value="1">
<input type="hidden" name="form_build_id" value="form-w06CKx7aNBiYShqfg8LiP98CaFLpEb8mgWzFYQWqnQ4">
<input type="hidden" name="form_token" value="JtZIrcKeIfXiVpwX43K6KqHPlZazR1klS1ht3W7PI9I">
<input type="hidden" name="form_id" value="uc_product_add_to_cart_form_6">
<div class="form-actions form-wrapper" id="edit-actions"><input class="node-add-to-cart form-submit" type="submit" id="edit-submit-6" name="op" value="Add to cart"></div></div></form>
I want to add my class to the select element. How can I do that?
In your theme directory there is file named theme_name.info . Inside of it there should be (or you can create it) array that defines css file which will be included on page. Check out explanation here:
https://www.drupal.org/node/171205
https://www.drupal.org/node/171209
So, you basically have to add path of your css file to that list and it will be included on every site page. Your html.php template must print out stylesheets variable (which will contain paths to css files). If you are not sure how to do it check how it's done on some standard drupal theme that comes with drupal installation.
After adding your css to theme info file don't forget to clear the cache!
Other way would be to include it manually, from page.tpl.php file. Just add there common CSS include line, like you would that in plain HTML file.
You can add CSS even from code with drupal_add_css() function, but that's a bit more advanced.
And you can use form id attribute to "aim" it and all inner elements with css.