Can an INPUT text field be variable width?

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?
BILL CarlisleAPEX DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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>

Open in new window

.container input,
.container .report{

Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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

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

thank you, Bill
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.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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">
        <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">
  <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">
<tbody class="uReportBody">
<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 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="'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>
<div class="uReportDownloadLinks"></div></div>

Open in new window

The P0_GO is the img button

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

Please provide the images and CSS needed to make sense of the snippet in the jsfiddle
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 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,
Kyle HamiltonData ScientistCommented:
np :)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.