4 Replies - 747 Views - Last Post: 04 April 2013 - 11:05 AM

#1 Zel2008  Icon User is offline

  • D.I.C Addict

Reputation: 14
  • View blog
  • Posts: 790
  • Joined: 06-January 09

Keeping form input controls in a row

Posted 27 March 2013 - 02:00 PM

Hi all,

I have a form with multiple rows of input, one of which (for simplicity) looks like this:

<form id="patient_lookup" action="#" method="post" enctype="multipart/form-data">
	<div class="form_row">
	<label>A:</label>
	<input type="text" id="a"/>
	<label>B:</label>
	<input type="text" id="b"/>
	<label>C:</label>
	<input type="text" id="c"/>
	<label>D:</label>
	<input type="text" id="d"/>
	<label>E:</label>
	<select id="e"><option value=""></option><option value="1">e1</option><option value="2">e2</option></select>
	</div>
	<input id="submit" type="submit" value="Submit">
</form>



My form_row class looks like this:

/* A div that wraps a "row" in a form. */
.form_row {
	display:    block;
	margin-top: 10px;
	width:      100%;
}



And I want everything within this "row" to always remain on one line -- not wrap around at the border of the browser window, and not create a scrollbar to see anything long.

Basically, I want the controls to be able to fit on the screen in a row, regardless of the screen size. It seems like in this particular row that the default size of the text boxes is what's pushing the select box over the boundary of the window.

Is there a way to force the elements to squeeze into the div, no matter how wide the browser window is? I don't want to use tables because they're not always dynamic, and this form doesn't show tabulated data.

Thanks,
Zel2008

This post has been edited by Zel2008: 27 March 2013 - 02:01 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Keeping form input controls in a row

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3467
  • View blog
  • Posts: 11,768
  • Joined: 12-December 12

Re: Keeping form input controls in a row

Posted 27 March 2013 - 02:12 PM

If you don't want a scrollbar to appear you could try:

input, select {
    width: 10%; min-width: 60px;
}

They will eventually drop underneath each other if the browser-width is tiny, but setting a min-width is sensible (otherwise they would become unusable).

This post has been edited by andrewsw: 27 March 2013 - 02:14 PM

Was This Post Helpful? 1
  • +
  • -

#3 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3467
  • View blog
  • Posts: 11,768
  • Joined: 12-December 12

Re: Keeping form input controls in a row

Posted 27 March 2013 - 02:17 PM

BTW width: 100% is unnecessary for the DIV (as is display: block), as it is a block-level element anyway, and it is preferred to associate a label with particular controls (which uses their IDs):

<label for="a">A:</label>

If you want the inputs to also stretch, then increase the width-percentage and set a sensible max-width.

This post has been edited by andrewsw: 27 March 2013 - 02:22 PM

Was This Post Helpful? 1
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,228
  • Joined: 08-June 10

Re: Keeping form input controls in a row

Posted 27 March 2013 - 11:39 PM

View PostZel2008, on 27 March 2013 - 10:00 PM, said:

And I want everything within this "row" to always remain on one line -- not wrap around at the border of the browser window, and not create a scrollbar to see anything long.

thatís gonna be unuseable if the browser width becomes very small (say, 50 px). so at one point itís either wrap or overflow (although that can be directed a bit with CSS media queries).


View PostZel2008, on 27 March 2013 - 10:00 PM, said:

It seems like in this particular row that the default size of the text boxes is what's pushing the select box over the boundary of the window.

then just change the default size. either by the size attribute (number of visible characters) or via CSS (box model dimensions).
Was This Post Helpful? 1
  • +
  • -

#5 Zel2008  Icon User is offline

  • D.I.C Addict

Reputation: 14
  • View blog
  • Posts: 790
  • Joined: 06-January 09

Re: Keeping form input controls in a row

Posted 04 April 2013 - 11:05 AM

Hi guys,
I'm so sorry, I thought I responded to this post. I used a combination of everything you all said, thanks for everything.
Zel2008
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1