Menu icon Foundation
Trying to force an input field to 10px wide

I have 2 fields an input field to set the order of uploaded images and a switch to enable or disable the image from displaying. I want the input field to only be 10px wide. enough for 1 number to be entered, I want the input and the switch to be "inline" with each other. No labels for either form element. I have an onblur on the input field and an onchange on the switch so that if either are changed it will go to the update script. The image is a thumbnail 150 px

I have tried the inline-group. setting the grid large-1 thru 3 to see if that would shrink the width..... Any ideas?

Thanks in advance

<div class='large-2 columns callout'>
<img src='./images/home/thumbs/0524151452_thumb.jpg'><br /><div class='row columns'><form action="http://192.168.0.10/~mike7418/index.php/admin/jumbotron/update" method="post" accept-charset="utf-8">

<input type="hidden" name="idjumbotron" value="5" />
<input type="text" name="order" value="0"  onblur="this.form.submit()" size="4" class="large-1 columns float-left" />
<div class='switch tiny'><input type="checkbox" name="active" value="1" checked="checked"  class="switch-input large-3 columns float-right" id="active5" onchange="this.form.submit()" />
<label class='switch-paddle text-right' for='active5'><span class='show-for-sr'></span><span class='switch-active' aria-hidden='true'>Yes</span><span class='switch-inactive' aria-hidden='true'>No</span></label></div></form></div>
</div>
            

         

inputwidthinlineform fields

I have 2 fields an input field to set the order of uploaded images and a switch to enable or disable the image from displaying. I want the input field to only be 10px wide. enough for 1 number to be entered, I want the input and the switch to be "inline" with each other. No labels for either form element. I have an onblur on the input field and an onchange on the switch so that if either are changed it will go to the update script. The image is a thumbnail 150 px

I have tried the inline-group. setting the grid large-1 thru 3 to see if that would shrink the width..... Any ideas?

Thanks in advance

<div class='large-2 columns callout'>
<img src='./images/home/thumbs/0524151452_thumb.jpg'><br /><div class='row columns'><form action="http://192.168.0.10/~mike7418/index.php/admin/jumbotron/update" method="post" accept-charset="utf-8">

<input type="hidden" name="idjumbotron" value="5" />
<input type="text" name="order" value="0"  onblur="this.form.submit()" size="4" class="large-1 columns float-left" />
<div class='switch tiny'><input type="checkbox" name="active" value="1" checked="checked"  class="switch-input large-3 columns float-right" id="active5" onchange="this.form.submit()" />
<label class='switch-paddle text-right' for='active5'><span class='show-for-sr'></span><span class='switch-active' aria-hidden='true'>Yes</span><span class='switch-inactive' aria-hidden='true'>No</span></label></div></form></div>
</div>
            

         
Brian Tan almost 4 years ago

Define inline class for input, and use size=1 or 2, fields can be in same column.

input.inline {
  width:auto;
  display:inline;
  padding-right:0.25rem; /* or to taste */
}

Mike Parks almost 4 years ago

Thanks Brian
I stripped it down and rewrote this and it seems to work other than I have another really strange issue with the input box??? I can't just click on it and change the value??? I have to tab to it to change the value? Really weird if I click on the lower right corner of the input box then I change the value???? idk but it works

<div class='large-2 columns callout'>
<img src='./images/home/thumbs/0524151208_thumb.jpg'><br /><br /><form action="./admin/jumbotron/update" method="post" accept-charset="utf-8">

<input type="hidden" name="idjumbotron" value="4" />
<div class='large-5 columns'>
<input type="text" name="order" value="0"  onblur="this.form.submit()" onfocus="this.select();" size="4" />
</div>
<div class='align-middle switch tiny'>
<input type="checkbox" name="active" value="1" checked="checked"  class="switch-input" id="active4" onchange="this.form.submit()" />
<label class='switch-paddle text-right' for='active4'>
<span class='show-for-sr'></span>
<span class='switch-active' aria-hidden='true'>Yes</span>
<span class='switch-inactive' aria-hidden='true'>No</span>
</label></div></form></div>