Using the default setup using the CKeditor v5 online builder and it works, but I have a minor challenge.
The text area insist on having placeholder text inside the area. I have looked into the documentation but there is no ay to set it to false.
The actual html code does not include a placeholder-tag, so it's not to blame. Sere the attached screenshot which (sorry in Danish) includes 2 placeholders in the main text area. I have not enabled it anywhere, so why are they showing?
When inspecting the elements in a browser, there are 2 (one with the big letters and another one with the smaller letters)
Help is appreciated.
You could do the following to remove the title plugin and set the placeholder to blank:
ClassicEditor.create( document.querySelector( '.editor' ), {
removePlugins: ['Title'],
placeholder: '',
});
Well, I guess that I solved the issue my self all though it is not very logic.
I had included a plugin named 'title'.
"..Enables support for adding the title field to your document. It helps ensure that there will always be a single title field at the beginning of the document..."
All though the plugin was added I did not actively activate the function anywhere. Nor did I find any syntax to enable or disable the function. I just appeared with no option to change that.
Anyhow. I made a new package using the CKeditor 5 Online Builder and I did not select the 'title' plugin and everything was fixed.
I removed the placeholder in the CKEditor using this:
config = {
toolbar: [
'heading',
],
removePlugins: ['Title'],
}
Related
I have implemented select2 widget, version 4. It works, but the x icon. It is not clearing the selection.
If you see this doc: https://select2.github.io/options.html, it says that this a problem in fact, but the documentation is incomplete for this.
Anyone has solved this already?
Thanks
Jaime
No it's not a bug. The "X" icon requires placeholder option.
Without it, clearAllow option cannot be used. So, right code will be like this:
$(".js-example-placeholder-single").select2({
placeholder: "Put some text...",
allowClear : true
});
By the way, there is undocumented option called debug. If you pass it to select2() method, the found errors will be printed on console. For example code in below:
$(".js-example-placeholder-single").select2({
//placeholder: "Put some text...",
allowClear : true,
debug: true
});
Will get in browser's console:
Why allowClear requires placeholder option?
The real drop down list, that you create with <select> and <option> elements hides by select2. And created new one.
In the new created drop down list, the field that user see (without drop down list) created automatically. Each time when you select new option, select2 will change previous Field with new one.
When X icon clicked, it also delete main field. And creates new field with parameters of placeholder.
Finally I have found it is a bug in Select2 4.0.2.
The solution is this, in select2.js, line 1760.
This has to be replaced:
this.$element.val(this.placeholder.id).trigger('change');
this.trigger('toggle', {});
By:
this.$element.val(this.placeholder.id).text(this.placeholder.text).trigger('change');
//this.trigger('toggle', {});
This solution also causes the dropdown not to appear when selection is cleared.
In my case, the clear button is not working even placeholder option is set. I need to add z-index property:
.select2-container .select2-selection--single .select2-selection__rendered {
z-index:1;
}
Adding of the empty select option with value '' helped me.
Select2 4.0.3.
[Stackoverflow disallows the word help in the title. Hence the h3lp]
We are in the proces of moving our code from Orbeon 3.9 to Orbeon 4.x. One of the many things that changed is the behavior for display of xforms:alert and xforms:help. Example code:
<xforms:input ref="#code">
<xforms:alert ref="$resources/required-field"/>
<xforms:help ref="$helptext"/>
</xforms:input>
In Orbeon 3.9 the alert is displayed as a red img with a white exclamation mark that has the text as tooltip, only if the binding fails. The help is displayed as a blue-ish image with a question that activated a tiny pseudo window containing the (potentially large) help text.
In Orbeon 4.7 the alert text is displayed as-is, no image and no condition based on binding. This interferes with a carefully designed interface as it takes up a lot more space. The help text is not displayed at all because .xforms-help has display: none;. Overriding that doesn't work because the text would then just be displayed inline.
I could not find documentation for these changes. Does anyone know the rationale and how to make "alert" and "help" useful yet again?
There are two changes with Orbeon Forms 4.x which might be relevant to this:
The HTML layout of elements has changed a bit. This means existing CSS might have to be adapted. You can check this by comparing the HTML produced by 3.9 vs. 4.x for a given page. With 4.x, all form elements, for example, are wrapped within a <span> or <div> element.
Form Runner uses Twitter Bootstrap as a CSS library. But the Bootstrap CSS files are also included for non-Form Runner pages.
This said, "red icon" alerts should still work, see for example the good old Espresso Order or Bookcast demos.
If you see alerts inline and unconditionally, it means that somehow the proper CSS doesn't apply, either because of the HTML layout change mentioned above, or because some CSS files are missing.
Look at this post : http://blog.orbeon.com/2014/01/improving-how-we-show-help-messages.html
and this : http://discuss.orbeon.com/how-to-use-the-quot-new-quot-xforms-help-in-4-5-td4658348.html
julien
Is there any way in MVC to specify "Empty Text" for text fields?
Empty Text is normally a property give to a textbox to display when text is empty, and is cleared out OnClick.
For example: have the text box say "Enter here..." and then onFocus that text would clear and allow you to type in the entry, however if text is empty, "Enter here..." would display again.
I'm trying to find out if there's any ways to get this out of the box w/o any additional coding, as this feature is widely supported by 3rd Party controls (ie: Telerik's AJAX Controls) does anyone know if MS made any provisions to offer anything similar?
Thanks.
You could use HTML5 placeholder attribute:
#Html.TextBoxFor(x => x.SomeProperty, new { placeholder = "some default text" })
And if you need to support older browsers you could always achieve the same effect with javascript. For example there are existing jQuery plugins such as jQuery.placeholder.
Use placeholder attribute in HTML 5
There's no such thing as what you are referring to in HTML, at least not called that. 3rd party controls have implemented this functionality themselves.
There is, in HTML 5, a property called a placeholder, but this won't appear in non-html5 compliant browsers (IE8, IE7, older versions of FF, etc..)
The only way to do this cross browser is to use javascript to implement the functionality.
I was wondering if there is a way to get Sublime Text 2 to autocomplete HTML attributes like in Aptana?
Autocomplete is enabled by default when you use "<" and your tag and then hit enter. So if you enter <p and then hit enter it will finish out the tag pair for you... where you will end up with <p></p> and your cursor will be in the middle. You can change this to tab if you prefer by pasting the following into your Preferences -> Settings - User file:
{
"auto_complete_commit_on_tab": true
}
This will override the default value of false for completion on tab. Again that is only if you wish to use tab instead of enter.
Hey you may try https://github.com/agibsonsw/HTMLAttributes or install trought package control package called "HTMLAttributes" ;). Its works for me. For example you type:
<p then press space bar then ctrl+space and you got list of attributes.
You can try to use emmet package. It was made specifically for html&css code completion. For more information you should read the documentation.
I was having the same issue; although I use both plugin packages HTMLAttributes and Emmet, neither one provides the auto-complete functionality I was looking for that's similar to Dreamweaver's.
Solution: I found a package called SublimeCodeIntel that does exactly what I needed.
Example: I code html emails and do a lot of inline CSS. End goal:
<td style="vertical-align:top;">
After installing SublimeCodeIntel, I typed <td style="v and a list of CSS properties starting with "v" displays.
Using my arrow keys, I select vertical-align and press tab to confirm, then type the letter "t" and a list of CSS values now displays.
I select top and then press tab to again confirm my selection.
Note: You can create predefined snippets for Emmet for undefined CSS properties but I wanted something "out of the box" instead of having to a) learn how to create them via the documentation (though I'm sure it's simple), and b) create a snippet each time I came across an undefined CSS property/value like vertical-align.
Hope this helps.
I currently using ahDoctrineEasyEmbeddedRelationsPlugin to embed a Block form into a Page form.
All works well, but I'd like to hide the label of the embeddedRelation.
I've created a 'homepage-main-top' Block within the Page form in the admin, now when editting this Page, I now see 'homepage-main-top' is randomly appearing before the embedded block relation
Looking at the plugin docs, there doesn't seem to be anything relating to removing/hiding this:
http://imageshack.us/photo/my-images/197/relation.png
Does anyone know how to not display this?
Thanks
I've been struggeling with somewhat the same problem, only I needed to style the label instead of hidding / stripping it.
From what I've found out there is no simple way to manipulate the label of the embedded form, but I figured the following 'hack'.
The embedRelation method accepts a inner- and outer-decorator parameter. You can use these to wrap extra markup around the label and the embedded form. You can then use CSS to hide the label using a specific id / css class.
By openning tags in the outerdecorator and closing them in the inner decorator you can wrap the label in a tag (which is rendered inbetween the two). It is kind of tricky to make sure your HTML is still valid.
I know this is kind of a crappy solution but I haven't found a better way up until now.
Add this line to your parent form:
$this->widgetSchema['EmbeddedFormName']->setLabel(' ');
If the above doesn't work, try using the 'newFormLabel' option (from the plugin's documentation).
$this->embedRelations(array(
'RelationName' => array(
// ...
'newFormLabel' => ' ',
// ...
),
// ...
));