wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes Adjusting size of select Box in java script Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Adjusting size of select Box in java script" Watch "Adjusting size of select Box in java script" New topic
Author

Adjusting size of select Box in java script

shan blossom
Greenhorn

Joined: Sep 06, 2006
Posts: 17
In my html page,I am using multiline grid.It has 4 select boxes.Onclick of ADD ROW button a javascript is called.In that javascript function there is code for creating the new row.In that row select box size is somewhat big in size.How to adjust the dimensions of the select box?Can anybody help me?

This is the javascript code I am using

function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;

// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);


// left cell
var cellLeft = row.insertCell(0);
var check1 = document.createElement('input');
check1.type="checkbox";
check1.name="remove";
check1.height=25;
cellLeft.className="white";
cellLeft.appendChild(check1);

// right cell
var cellRight = row.insertCell(1);
var e1 = document.createElement('select');
e1.options[0] = new Option('Select','value0');
e1.options[1] = new Option('Java','value1');
e1.options[2] = new Option('.NET','value2');
e1.options[3] = new Option('Database','value3');
e1.options[4] = new Option('SAP','value4');
e1.options[5] = new Option('Testing','value5');
e1.options[6] = new Option('Communication','value6');
cellRight.className="white";
cellRight.appendChild(e1);

// left cell
var cellLeft = row.insertCell(2);
var text1 = document.createElement('input');
text1.type="text";
text1.name="skillGroupCodeDescription";
cellLeft.className="white";
cellLeft.appendChild(text1);

// select cell
var cellRight= row.insertCell(3);
var sel = document.createElement('select');

sel.name = 'selRow' + iteration;
sel.options[0] = new Option('Select', 'value0');
sel.options[1] = new Option('JSP', 'value1');
sel.options[2] = new Option('EJB', 'value2');
sel.options[3] = new Option('Struts', 'value3');
sel.options[4] = new Option('Java Script', 'value4');
sel.options[5] = new Option('C# .NET', 'value5');
sel.options[6] = new Option('VB .NET', 'value6');
sel.options[7] = new Option('ASP .NET', 'value7');
sel.options[8] = new Option('SQL', 'value8');
sel.options[9] = new Option('Oracle', 'value9');
sel.options[10] = new Option('ABAP', 'value10');
sel.options[11] = new Option('Error Checking', 'value11');
sel.options[12] = new Option('Manual Testing', 'value12');
sel.options[13] = new Option('Automated Testing', 'value13');
sel.options[14] = new Option('Verbal Commn', 'value14');
sel.options[15] = new Option('Written Commn', 'value15');
sel.options[16] = new Option('Testing', 'value16');
cellRight.className="gridselect1";
cellRight.appendChild(sel);

// left cell
var cellLeft = row.insertCell(4);
var text2 = document.createElement('input');
text2.type="text";
text2.name="skillGroupCodeDescription";
cellLeft.className="white";
cellLeft.appendChild(text2);


var cellRight = row.insertCell(5);
var e2 = document.createElement('select');

e2.options[0] = new Option('Select', 'value0');
e2.options[1] = new Option('1', 'value1');
e2.options[2] = new Option('2', 'value2');
e2.options[3] = new Option('3', 'value3');
e2.options[4] = new Option('4', 'value4');
e2.options[5] = new Option('5', 'value5');
e2.options[6] = new Option('6', 'value6');
e2.options[7] = new Option('7', 'value7');
e2.options[8] = new Option('8', 'value8');
e2.options[9] = new Option('9', 'value9');
e2.options[10] = new Option('10', 'value10');
e2.height = 15;
cellRight.className="white";
cellRight.appendChild(e2);
}
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

Adjust the size to whatever you want using the CSS width rule.

Also, please be sure to use UBB code tags when posting code examples to the Ranch. Please read this for more information.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Vishnu Prakash
Ranch Hand

Joined: Nov 15, 2004
Posts: 1026
Hi

I am facing the same issue.



For input type "text" we have size attribute to specify the width of the text box. Similarly how to specify the width of a combo box.

If I specify size attribute for input type 'select' it doesn't increase the width of the combo box, instead it increase the height of the combo box.

Kindly give me a solution.


Servlet Spec 2.4/ Jsp Spec 2.0/ JSTL Spec 1.1 - JSTL Tag Documentation
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

Originally posted by Vishnu Prakash:
Similarly how to specify the width of a combo box.


There is no such thing as a combo box on the web; please see this. I'm sure that you mean a dropdown create by a select element, right?

If I specify size attribute for input type 'select' it doesn't increase the width


You should have an HTML reference handy. It will tell you waht each attribute does.

Kindly give me a solution.


Same as already stated; use CSS.
Vishnu Prakash
Ranch Hand

Joined: Nov 15, 2004
Posts: 1026

right?


Yes, you are right.


Same as already stated; use CSS.


Isn't CSS generic. Like if I specify a drop down's width as size=10, its applicable to all the drop downs, isn't it.

Isn't there a solution where we can alter the length of the drop downs individually.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

Originally posted by Vishnu Prakash:
Isn't there a solution where we can alter the length of the drop downs individually.


Yes, CSS.

CSS selectors are very powerful they can aplly to a single element, all elements, or any subset in between. If you are going to be working in HTML, you need to wrap your head around CSS.

A non-elegant solution is to apply the CSS rule directly in the element markup:

Vishnu Prakash
Ranch Hand

Joined: Nov 15, 2004
Posts: 1026
Thanks Bear.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Adjusting size of select Box in java script
 
Similar Threads
dynmicall adding row
Add Rows dynamically to a table
need help in dyanmically adding drop down box
Add and Edit a row
unable to access the values of dynamically newly added rows to table