javascript - Dynamic width for a disabled input data -

-

first of did try researching how make input dynamic based from width of data answers see input not disabled. trigger key or onclick not applicable mine since input disabled.

this screenshot of problem. can see amount in words in pesos cut , not dynamically expanding.

enter image description here

this html:

<table width="100%">     <tr>          <td>             <div style="height:35px">                    <div style="float:left" class="controllabelbold">check number:</div>                    <div style="float:left">                      <input type="password" name="checknumber" class="text ui-widget-content ui-corner-all" style="width:250px; height: 17px;" />                    </div>            </div>           </td>         <td>            <div style="height:35px">                    <div style="float:left" class="controllabel">check date:</div>                    <div style="float:left">                    <input name="checkdate" class="checkdate text ui-widget-content ui-corner-all"  style="width:250px;" readonly /></div>            </div>          </td>     </tr>     <tr>         <td>            <div style="height:35px">                    <div style="float:left" class="controllabel">client name:</div>                    <div style="float:left"><input name="clientname" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly /> </div>            </div>          </td>         <td>            <div style="height:35px">                    <div style="float:left" class="controllabel">amount:</div>                    <div style="float:left"><input name="amount" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly/></div>            </div>          </td>     </tr>     <tr>         <td>              <div style="height:35px">                    <div style="float:left" class="controllabel">pesos:</div>                    <div style="float:left"><input id="amountinwords" name="amountinwords" class="text ui-widget-content ui-corner-all"                      style="min-width:250px;" readonly /></div>            </div>          </td>     </tr> </table>

question:

  • is possible dynamic though input disabled? if yes how? if no why?

requirements:

  • the minimum width of input pesos should 250px because needs aligned other input.

  • my problem input of pesos

  • html, css or javascript solution accepted.

  • i think don't need include css styles anymore since not needed. if css solution add new class.

  • i prepared jsfiddle here

using css, 1 cannot make <input> expand size based on content. possible via javascript, though (see rayon dabre's solution).

but simple answer here use element naturally expands show content, <span>, , style input:

from picture, i'm approximating close : 

span.disabledinput {   display: inline-block;   background-color: #f0f0f0;   border-radius: 6px;   border: 1px solid #eee; }

you can make editable. here's more convincing example:

.form-control.disabledinput {    height: initial;    background-color: #eee;    border: 1px solid #ccc;;    display: inline-block;    clear: left;    width: auto;    color: #666;    box-sizing: border-box;  }  .form-control.disabledinput:focus {    border-color: #66afe9;    outline: 0;    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);  }  .form-group.col-xs-12 label {    display: block;  }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous">  <div class="container">      <div class="row">      <div class="form-group col-sm-6">        <label for="checknumber">check number:</label>        <input type="password" class="form-control" name="checknumber" id="checknumber">      </div>      <div class="form-group col-sm-6">        <label for="checkdate">check date:</label>        <input type="text" class="form-control" name="checkdate" id="checkdate" readonly>      </div>      <div class="form-group col-sm-6">        <label for="clientname">client name:</label>        <input type="text" class="form-control" name="clientname" id="clientname" readonly>      </div>      <div class="form-group col-sm-6">        <label for="amount">amout:</label>        <input type="text" class="form-control" name="amout" id="amount" readonly>      </div>      <div class="form-group col-xs-12">        <label>pesos:</label>        <span type="text" tabindex="0" contenteditable="true" class="form-control disabledinput">to make <code>span</code> not editable, remove <code>contenteditable</code> attribute... <br />don't forget resize browser!</span>      </div>    </div>

if want match exact styling, should inspect disabled <input>. pay close attention line-height, font-size, padding , margin properties. also, don't forget add tabindex attribute can :focus-ed, real <input>s in page.

now, because input disabled, that's need do.

however, if fake "input" wasn't disabled you'd have add contenteditable="true" it. , if had part of form on submission, you'd have add <input type="hidden"> change value match .text property of <span>. again, resorting javascript.


Comments

Post a Comment

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

-
i have spring project , try make use spring boot , run @ embadded tomcat following : https://spring.io/guides/gs/rest-service/ this application //@configuration //@enableaspectjautoproxy @springbootapplication @componentscan(basepackages = "gux.prome") public class application { public static void main(string[] args) { springapplication.run(application.class, args); } } if use maven command: mvn spring-boot:run , project starts fine, need debug , run main method @ intelij, exception occurs: exception in thread "main" java.lang.illegalargumentexception: cannot instantiate interface org.springframework.context.applicationlistener : org.springframework.boot.logging.classpathloggingapplicationlistener @ org.springframework.boot.springapplication.createspringfactoriesinstances(springapplication.java:414) @ org.springframework.boot.springapplication.getspringfactoriesinstances(springapplication.java:394) @ org.springframework.bo...
Read more

reactjs - React router and this.props.children - how to pass state to this.props.children -

-
i'm using react-router first time , don't know how think in yet. here's how i'm loading components in nested routes. entry point .js reactdom.render( <router history={hashhistory} > <route path="/" component={app}> <route path="models" component={content}> </route> </router>, document.getelementbyid('app') ); app.js render: function() { return ( <div> <header /> {this.props.children} </div> ); } so child of app content component sent in. i'm using flux , app.js has state , listens changes, don't know how pass state down this.props.children. before using react-router app.js defines children explicitly, passing state natural don't see how now. using couple of react helper methods can add state, props , whatever else this.props.children render: function() { var children = react.ch...
Read more

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -

-
i have excel workbook used generate quotations customers. there main page user inputs data, , there buttons generate various pdfs , send them customer. however, 1 user consistently getting error preventing generating , sending pdfs. i beleive "microsoft windows common controls 6.0 (sp6)". it's installed on users' computers. on mine, location "c:\windows\syswow64\mscomctl.ocx" on others "c:\windows\system32\mscomctl.ocx" the user experiencing issues on 32-bit machine, "mscomctl.ocx" file should in system32. have manually put in there, , pointed common controls reference in vba it. issue seems keep reverting looking in syswow64. since folder doesn't exist, can't find it, , can't produce pdfs. i thought perhaps issue user running older version of office (2007) there users on 2013 , 2016. thought perhaps mixture of 64-bit , 32-bit users. user gets sent workbook other users (as quotation process goes further, gets passed ...
Read more