Develop Reference

Chosen with width equal to the largest option

I'm trying to make the DropDownList with the JQuery-Chosen in it reacts like all others "normal" DropDownLists, matching the width equal to the largest option on the DDL.
I tried some different approaches to get this done, using css and JQuery, but all I tried became ugly.
At the official page of Chosen, http://harvesthq.github.io/chosen/options.html , it says:
The width of the Chosen select box. By default, Chosen attempts to match the width of the select box you are replacing. If your select is hidden when Chosen is instantiated, you must specify a width or the select will show up with a width of 0.
Any way to workaround this?
Workspace: http://jsfiddle.net/cdtn0ko7/
$('.chosen').chosen({
width: 'auto'
});

Try this out for size. :D
Fiddle
$('.chosen').chosen();
.form-control {
width: auto;
}

Not sure if I got the question right, but since you are using Bootstrap, you can just do something like this on the css:
.chosen-drop {
position: inherit !important;
}

I tried using this following code and it worked, check this out:
$('.chosen').chosen({
width: '100%'
});

Responsive image tinymce image link

I'm expanding an existing website. I have the site published (if you want to take a look click here). I have just added a very simple blog (made with php and mysql) and it works well, except for one thing. If I add an image to a new or post, the person that is writing the post is able resize it. The problem is that the image has static width and height, and then if I access the blog on a mobile device, the image is cut because it's bigger than the width of the device. I don't know how to solve it, I thaunght I could modify the plugin that allows to insert images to add this parameters (which makes an image responsive):
max-width="['user selected width'], width=100%, height=auto
I've been trying to modify the plugin but i find it very hard to understand, and i'm not very experienced on javascript. Here's the plugin. I'm using tinymce editor to edit or add posts.
Anyone knows were I have to add this parameters? Thank you.

on tinymceini put this.... and voala
image_dimensions: false,
image_class_list: [
{title: 'Responsive', value: 'img-responsive'}
]

add this class in file content.min.css
img {
max-width: 100%;
height: auto;
}

No need to handle this via separate te css. You can apply "img-responsive" class at the time of adding the image in tinymce editor itself.
Add below property in your tintmce editor properties:
image_class_list: [
{title: 'Responsive', value: 'img-responsive'}
],
Reference and credits:
http://archive.tinymce.com/forum/viewtopic.php?pid=114620#p114620

Solution found, instead of modifying the html code that produces tinymce to insert an image, I modify the image proportions on the css stylesheet by modifying the img. I use this code:
[element that contains the image] img {
width:100%;
height:100%;
}

Below is the solution I found using css and jquery instead of tinymce plugins.
$(document).ready(function(){
var tiny_images = $(this).find('img').map(function(){
if($(this).attr('class') == undefined){
if($(this).attr('src').indexOf("data:image")!=-1){
$(this).addClass("tiny-img");
}
}
}).get()
});
.tiny-img {
max-width: 100%;
height:auto;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Using CSS is a safer way to do this
img {
max-width: 100%;
height: auto;
}

With version 5 you want to put the same code at the end of the /skins/ui/oxide and /skins/ui/oxide-dark content.css files.
/* <your name> added the following to create responsive images */
img {
max-width: 100%;
height: auto;
}

Expanding/Contracting Textarea on Typing

I am looking to have a comment field that will grow to show all text when the user clicks on it and then shrink back down (hiding the unshowable text) when the user clicks out of the text area. The user should be able to type in text and modify what they see.
I am assuming that textarea is the way to go since input doesn't have multi-line functionality. However, I am a little stuck on how to implement this. It seems everything out there just has the textarea resize to fit the text but not shrink back down after the user is done typing in it.
Could someone help me out/point me in the right direction?
Thanks!

You can use the :focus and :active states to change the textbox once the user clicks on it. Something like:
textarea{
width: 200px;
height: 200px;
resize: none;
}
textarea:focus,
textarea:active{
width: 400px;
height: 400px;
}
Once the user clicks into the space, the text box will expand to the new dimensions. These work very similarly to :hover, if you're familiar with adding hover states.
Demo in a jsbin: http://jsbin.com/culil/1/
To add this stylings to you page you have two options.
1: You can include it as a css class in your site's stylesheet:
Css:
.parentcontainer > textarea:focus,
.parentcontainer > textarea:active {
width: 400px;
height: 400px;
}
This is a best practice because it separates the concerns of styling ( which should be CSS ) and adding interactivity ( which should be JavaScript).
2: You can add the class before you append the element using javascript:
css:
.your-textarea-class:focus,
.your-textarea-class:active{
width: 400px;
height: 400px;
}
js:
$(function(){
var textarea = $(".parentDiv").append("<textarea></textarea>");
$("textarea").addClass("my-textarea-class");
});
http://jsbin.com/buhado/1/edit

Extjs allign only cell text to right

i need to align cell text to right side.
{
xtype : 'numbercolumn',
dataIndex : 'lineAmount',
id : 'lineAmount',
header : 'Net Line amount',
sortable : true,
width : 150,
summaryType : 'sum',
css: 'text-align: rigth;',
summaryRenderer : Ext.util.renderers.summary.sum,
editor : {
xtype : 'numberfield',
allowBlank : false
}
adding align property does not work for me because it also aligns header text

There is a config present for numbercolumn known as align. just use that.
Whenever you are stuck refer the secha docs which is beautifully designed just for beginners.
I am assuming you are beginner and explaining you how to use docs.. for your clear understanding:
First go to search field, to search for a component, method, or event or something else.
In your case, let us assume that you have searched for "numbercolumn", then you can see the following window which displays all the cofigs, properties, methods etc.. Just hover on them and know what "numbercolumn" is related with.
In your case, you are looking for a config which align's the text to right. then you are mostly looking for key words like txtAlign, align, textAlign, etc..
Hence, you will find a config, which is by name "align". just click on it to learn more about it.
After learning about the cofig "align", you might want to test it. For this purpose, the docs have provided inline code editor which is shown in the below image.
The code editor has two tabs, "code editor" and "live preview". The words says everything.
Just add your changes in "code editor" tab and see your result in "live preview" tab.
For example, Adding align: "right" code in the below "code editor".
Updated
CSS:
.columnAlign{
text-align: right;
}
extjs
tdCls: "columnAlign",

As answered Mr_Green you can align the text to the right or left using
align.
For header to remain centrally aligned use css as :
.x-column-header-inner{
text-align:center;
}
Update :
.....//
{
xtype : 'grid',
cls : 'gridCss',
...//other configs
}
.....//
In your app.css file :
.gridCss .x-column-header-inner{
text-align:center;
}
In your index.jsp
<link rel="stylesheet" type="text/css" href="app/resources/css/app.css">

Actually thanks both guys for your posts it helped me alot. I have found one solution myself.
I needed to add id property to my column. For example :
{
xtype : 'numbercolumn',
dataIndex : 'lineAmount',
id : 'lineAmount',
header : 'Net Line amount',
}
and then it has its own css class for example : .x-grid3-td-lineAmount so i added suggested css to these classes and it working ok now for me
.x-grid3-hd-inner{
text-align: left;
}
.x-grid3-hd-lineAmount{
text-align: left;
}
.x-grid3-td-lineAmount{
text-align: right;
}
.x-grid3-hd-taxAmount{
text-align: left;
}
.x-grid3-td-taxAmount{
text-align: right;
}
.x-grid3-hd-invoiceAmount{
text-align: left;
}
.x-grid3-td-invoiceAmount{
text-align: right;
}
i think in 4.2 version it is better to use #Mr_Green solution, but in 3.4 this workarround works for me :)

jqgrid convert text

I'm not sure how to call this so any suggestion to change the title is welcome.
I'm trying to convert a quite large text to something like 'just show some characters...'.
Obviously the large text begins with same string but it's much longer.
My grid is read-only and I'll show the whole data into a dialog when users click each row.
The input field (in another page) is a text area so users can write down huge data to be show in the grid. I would like to keep each row with same height.
Also I know I have to sanitize the text to avoid special characters and new lines
I guess it should be a colModel option to do that but I couldn't find it.
Something like that:
colModel :[
{name:'notes', index:'notes', maxcharlength: 20},
Many thanks.

You can make a CSS class that will clip the text and show ellipses and assign it to the column using the classes attribute. The CSS class would look like this:
.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Then assign it to the column like this:
colModel :[
{name:'notes', index:'notes', maxcharlength: 20, classes: 'ellipsis'},

At the end and thanks to Oleg's links I could fill the grid stripping html and showing ellipsis in this way:
First a css:
.ui-jqgrid tr.jqgrow td.textInDiv div {
max-height: 50px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
Second a custom formatter on the column:
colModel :[
{name: 'notes', classes: "textInDiv",
formatter: function (v) {
return '<div>' + jQuery.jgrid.stripHtml(v) + '</div>';
}
}
]
Notes come from server as html so please note the jqgrid function to strip html tags.
In Oleg's links he uses jqgrid.htmlEncode to escape tags.
Hope this helps to others.