Can an INPUT text field be variable width?

Hi,
My client wants me to make the input text box take up the same width as the report below it and when the browser is resized they want it to go with the width of the report also.

How would I do this?
Thanks,
Bill
LVL 2
BILL CarlisleAPEX DeveloperAsked:
Who is Participating?
 
Kyle HamiltonData ScientistCommented:
wrap the report and the input in a div. make both the report and the input width:100%. then both will resize together to whatever the width of the container is.

<div class="container">
   <input type="text"/>
   <div class="report"></div>
</div>

Open in new window


.container input,
.container .report{
   width:100%;
}

Open in new window

1
 
BILL CarlisleAPEX DeveloperAuthor Commented:
awesome Kyle.. sorry I didn't mention the search anchor img link to the left of the search text box.
plus I can't test it today due to our server is down.

this is what I actually have:
img - text box
report

plus what would I set the size of the text box?

thank you, Bill
0
 
Kyle HamiltonData ScientistCommented:
there are different ways of dealing with that. what's the image? a search icon or something?

post a jpg of the desired result, or a link to any code you may have written so far. It's always easiest to "fix" stuff in context.
1
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
BILL CarlisleAPEX DeveloperAuthor Commented:
Hi Kyle,

Here is the code generated by Oracle APEX 4.2, but I can add or remove whatever I need through the template or jQuery onLoad.

<div class="apex_cols apex_span_2" id="uRightCol">
      <aside>
        <section class="uRegion  clearfix" id="APP_IN_PROGRESS" aria-live="polite">
  <div class="uRegionHeading">
    <h1>Applications in Progress<a class="eLink" title="Edit" href="javascript:apex.navigation.popup.url('f?p=4000:374:3733299892893::::P374_ID,FB_FLOW_ID,FB_FLOW_PAGE_ID:38743283662167250,212,2');"><img src="/i/e.gif" alt="Edit" class="eLink"></a></h1>
    <span class="uButtonContainer">
      
    </span>
  </div>
  <div class="uRegionContent clearfix">
    <button class="uButton iconOnly iconButton search" onclick="void(0);" id="P0_GO" type="button" title="SEARCH"><span><i></i></span></button> <a class="eLink" title="Edit" href="javascript:apex.navigation.popup.url('f?p=4000:372:3733299892893:::372:P372_ID,FB_FLOW_ID,FB_FLOW_PAGE_ID:38743903581167256,212,2');"><img src="/i/e.gif" alt="Edit" class="eLink"></a><input type="hidden" name="p_arg_names" value="38743682648167252"><input type="text" id="P0_SEARCH" name="p_t55" class="text_field" value="ice" size="19" maxlength="2000"><a class="eLink" title="Edit" href="javascript:apex.navigation.popup.url('f?p=4000:371:3733299892893:::371:P371_ID,FB_FLOW_ID,FB_FLOW_PAGE_ID:38743682648167252,212,2');"><img src="/i/e.gif" alt="Edit" class="eLink"></a><input type="hidden" name="p_arg_names" value="2605416063462118"><input type="hidden" name="p_t56" id="P0_APPLICATION_NUMBER" value="OAP82"><input type="hidden" name="p_arg_names" value="2830711947099138"><input type="hidden" name="p_t57" id="P0_MERCHANT_APPLICATION_ID" value="318889"><input type="hidden" name="p_arg_names" value="2611625206883311"><input type="hidden" name="p_t58" id="P0_SECTION_CODE" value="BI"><input type="hidden" name="p_arg_checksums" value="2611625206883311_C3B57DA36657A4087474609C47D21951"><input type="hidden" name="p_arg_names" value="2611821325885126"><input type="hidden" name="p_t59" id="P0_APPLICATION_PERCENTAGE" value=""><input type="hidden" name="p_arg_checksums" value="2611821325885126_12B77601F0CD7FD523A0976A7EFC1F4D"><div id="report_38743283662167250_catch"><table class="uReportContainer" id="report_APP_IN_PROGRESS" summary="">
<tbody class="uReportPagination">
<tr><td></td></tr>
</tbody>
<tbody class="uReportBody">
<tr><td>
<table summary="Applications in Progress" class="uReport uReportStandard">
<tbody><tr><td headers="X" style="background: rgb(51, 153, 255);">  46%</td><td headers="DD" style="background: rgb(51, 153, 255);"><input type="hidden" name="f23" value="OAP82">ICE CREAM COMPANY, 25231 GROGANS MILL ROAD</td></tr>
<tr><td headers="X">  49%</td><td headers="DD"><input type="hidden" name="f23" value="OAP81">JOE'S PLACE, 1800 HUGHES LANDING</td></tr>
<tr><td headers="X">  38%</td><td headers="DD"><input type="hidden" name="f23" value="OAP80">TEST MERCHANT, 22810 FRY RD</td></tr>
<tr><td headers="X">  29%</td><td headers="DD"><input type="hidden" name="f23" value="OAP78">TESTING , 4571 HIGHWAY 183</td></tr>
<tr><td headers="X">  51%</td><td headers="DD"><input type="hidden" name="f23" value="OAP77">DPA, 123 MAIN</td></tr>
<tr><td headers="X">  34%</td><td headers="DD"><input type="hidden" name="f23" value="OAP76">TEST,  123456</td></tr>
<tr><td headers="X">  46%</td><td headers="DD"><input type="hidden" name="f23" value="OAP75">TESTING, 25231 GROGANS MILL ROAD</td></tr>
<tr><td headers="X">40%</td><td headers="DD"><input type="hidden" name="f23" value="OAP71">A,  25231</td></tr>
<tr><td headers="X">84%</td><td headers="DD"><input type="hidden" name="f23" value="OAP66">BILLY BOB'S WATERBEDS,  426 EDALYN ST</td></tr>
<tr><td headers="X">36%</td><td headers="DD"><input type="hidden" name="f23" value="OAP56">COOL BREEZE, 25231 GROGANS MILL ROAD</td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody class="uReportPagination">
<tr><td colspan="2" align="right"><table summary="" width="100%"><tbody><tr><td class="pagination"></td><td class="pagination"></td><td nowrap="nowrap" class="pagination"><span class="fielddata">1 - 10</span></td><td class="pagination" align="right"><a href="javascript:apex.widget.report.paginate('38743283662167250', {min:11,max:10,fetched:10});" class="uPaginationNext">Next <img src="/i/f_spacer.gif" alt=""></a></td><td class="pagination"></td></tr></tbody></table></td></tr>
</tbody>
</table>
<div class="uReportDownloadLinks"></div></div>
  </div>
</section>
      </aside>
    </div>

Open in new window


The P0_GO is the img button


thanks for your help.. Bill
0
 
Kyle HamiltonData ScientistCommented:
You seem to have a button and an image. the button has no text?

http://jsfiddle.net/sobptq8v/

Please provide the images and CSS needed to make sense of the snippet in the jsfiddle
1
 
BILL CarlisleAPEX DeveloperAuthor Commented:
Hi Kyle,
That code was generated by oracle apex so the CSS comes from many embedded files.
So I guess I was just looking for ideas even though A working example would even be better.
Otherwise I guess I will retract my question.
If you have any ideas let me know.
Thank you very much,
Bill
0
 
BILL CarlisleAPEX DeveloperAuthor Commented:
Thanks for the help Kyle!

In the future I will have to create a reproduction of the problem on APEX.ORACLE.COM

Thanks again,
BillC
0
 
Kyle HamiltonData ScientistCommented:
np :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.