Web Analytics Made Easy -
StatCounter How to adjust multiple textboxes in a row with browser window size - CodingForum

Announcement

Collapse
No announcement yet.

How to adjust multiple textboxes in a row with browser window size

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to adjust multiple textboxes in a row with browser window size

    I have three textboxes in one row. When I adjust my browser window width to make it smaller it puts the three textboxes that were in one row into one column for each text box.

    So for example, it looks like this before the browser width adjustment:

    Textbox 1 Textbox 2 Textbox3

    After the browser width adjustment to make the window smaller:

    Textbox 1

    Textbox 2

    Textbox 3

    Is there a setting on an web form that prevents this from happening.

  • #2
    Give them each a class and a width of ~33% (31.33333333%)

    Keep in mind, usability wise though, the smaller the screen, that harder it is to see/interact with that field since it is so small

    Code:
    /* CSS */
    .smallTxt {
      width: 31.33333333%;
      margin-right: 2%;
    }
    
    <!-- HTML -->
    <input type="text" class="smallTxt" ... >
    <input type="text" class="smallTxt" ... >
    <input type="text" class="smallTxt" ... >
    This should do *roughly* what you want.

    Good luck, let me know if you need more help.
    Riley
    Riley-Shannon.com - My Portfolio
    FraktalServices.com - My Company

    Comment


    • #3
      Originally posted by mldardy View Post
      I have three textboxes in one row. When I adjust my browser window width to make it smaller it puts the three textboxes that were in one row into one column for each text box.

      [...]

      Is there a setting on an web form that prevents this from happening.
      This works:

      Code:
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-Latn-US">
      	<head>
      		<title>Demo Document</title>
      		<style>
      			p {
      				display: flex;
      				flex-wrap: nowrap;
      			}
      			p input:not([type]) {
      				width: calc((100% - 2ch) / 3);
      			}
      			p input:not([type]):not(:first-child) {
      				margin-left: 1ch;
      			}
      		</style>
      	</head>
      	<body>
      		<p>
      			<input/>
      			<input/>
      			<input/>
      		</p>
      	</body>
      </html>

      Comment


      • #4
        Thanks everyone for your help.

        Comment

        Working...
        X