• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Adjusting size of select Box in java script

 
shan blossom
Greenhorn
Posts: 17
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64716
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Vishnu Prakash
Ranch Hand
Posts: 1026
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64716
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1026
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

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
Pie
Posts: 64716
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1026
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic