How to use tags input of bootstrap with textarea - textarea

How to use tags-input of bootstrap with textarea? I have applied data-role="tagsinput" against the textarea. But tags-input is not working whereas same code is working for input type="text".

Support is not provided for the Textarea element. It is better to use the Input element for the Taginputs.
See here for reference:
https://github.com/TimSchlechter/bootstrap-tagsinput/issues/38

Related

Does tag-it work on textarea HTML element?

I am using tag-it for my application. My requirement is that I should create tag-it tags and put these tags in a textarea element. I am choosing textarea over input because textarea can support newline.
I have gone through http://aehlke.github.io/tag-it/examples.html, but I notice that it supports only input element. I have also played around with the code and noticed the same.
Does tag-it work on textarea HTML element?
Looking forward to your response
The tag-it library works on input elements. One would, perhaps, have to modify their library in order to accommodate the textarea element.
Another alternative for tag-it would be to use tageditor library https://goodies.pixabay.com/jquery/tag-editor/demo.html as they support textarea HTML elements as well

Using select2 with pre-rendered HTML

I am using select2 in tagging mode to create and edit tags. There is an annoying behavior which is that there is a delay between when the page loads and when the tags appear. Since the tags can spill onto two lines, after the tags appear the whole page readjusts when the content below the tags box is pushed down.
The delay is caused by select2 converting the input HTML tag into the necessary HTML elements for each tag.
The delay could be avoided if the select2 didn't generate the HTML for the tags, but instead I generated it on the server-side and it was included in the original page load. Then the position of elements below the tags field would never change.
Is there a way to have select2 attach itself it existing - pre-rendered - HTML, rather than creating the HTML itself?
Does anyone know of a tag field components that supports this? All of the components I have seen start with an input tag and then generate the HTML dynamically using Javascript.
I could not find a satisfactory answer, so I created a JQuery plugin specifically for my use case: https://github.com/k1w1/rendered-multi-select
It has Rails helper to render the HTML for the control on the server, then the Javascript events are attached when the page loads. This results in faster and flicker free loading.

jqueryUi autocomplete html and desgin

I'm thinking of adding jqueryUi autocomplete to my site, few questions I can't find an answer to:
- Can I remove/replace the the ul tag which holds the responses? I managed to replace the li tags with tr but those are not suppose to be inside a ul tag
Please refer following link: may be this is useful for you.
How to change input type dynamically using jquery or javascript

Applying jQuery Mobile attributes to XPages controls

I have just started looking into using jQuery Mobile on a XPages project. I am unsure whether I should use XPages controls or standard HTML controls in certain circumstances.
For example, I need a simple "Save" button on a page. An xp:button does get rendered with the jQuery Mobile style. But how would I then apply attributes to it, such "data-icon" and "data-inline"?
Or should I be using a standard HTML tag in this case? If so, I lose the ability to code XPages simple actions to, say, save the data sources.
Thanks for any tips.
If you are using 8.5.3 you can use the attr property of the button to add the data-icon and data-inline tags.
<xp:button value="Label" id="button1">
<xp:this.attrs>
<xp:attr name="data-icon" value="marky"></xp:attr>
</xp:this.attrs>
</xp:button>
If not then you can use jQuery to add the attribute using $().attr('data-icon', 'whatever'). Remember though the clientID of the button will change through the interface and you will need to adjust for that. You could you my x$ function
http://openntf.org/XSnippets.nsf/snippet.xsp?id=x-jquery-selector-for-xpages

Entering text in a TEXTAREA while keeping the formatting (just like the text in a PRE tag)

When I enter a text with line-breaks and long sentences, I don't want to see a wrapped or without line-breaks version. What is the CSS style to accomplish this? So far I tried white-space property but none gives the result I want.
You probably want the wrap attribute of the textarea tag. Have a look at this page: http://www.tizag.com/htmlT/htmltextarea.php
I'm not 100% sure what end result you want, but if you look at the options and explanations given via that link, you should be able to choose the one that fits your needs.
As #erik said, the way to do this is to use the wrap attribute on the tag itself, i.e.:
<textarea wrap="off"></textarea>
I just wanted to note, in case you're finicky about HTML validation, that the wrap property of textarea isn't part of any HTML standard.
Unfortunately, this is the only way to do this since the white-space CSS property, as you've discovered, doesn't work quite like you would expect when it comes to <textarea> elements.
Via Sitepoint:
Internet Explorer [...] The values normal and pre behave like pre-wrap on textarea elements. The value nowrap behaves like pre-line on textarea elements.
Firefox versions up to and including 3.0 don’t support the values pre-line and pre-wrap (although -moz-pre-wrap is similar to the latter). The values normal, nowrap, and pre behave like pre-wrap on textarea elements.
Opera 9.2 and prior versions don’t support the value pre-line. The values normal and pre behave like pre-wrap on textarea elements. The value nowrap behaves like pre-line on textarea elements.

Resources