Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS help needed - Spacing, Formatting

Posted on 2014-03-30
4
Medium Priority
?
639 Views
Last Modified: 2014-04-04
Hi All,
I need some css help.. I have been going around in circles on trying to get this to be closer grouped as my "Desired View" pic shows.

ExistingView.pdf

DesiredView.pdf

Oracle APEX is a tool that creates the layout based on some limited dev input so I am showing two chuncks that I can start from, if one is easier than the other.

And so far I am using
div.fieldContainer{
  float: left;
  margin-bottom: 0px;
  margin-top: 5px;
}
label.uOptional {
  width: 5%;
}

#P10_SEARCH_BTN {
  margin: 5px;
}

Open in new window


	  <div class="uButtonRegionContentContainer">
	      <div class="uButtonRegionContent"><div class="apex_row">
	  <div class="apex_cols apex_span_4 alpha">
	  <div class="fieldContainer horizontal rightlabels" id="P10_INVOICE_FROM_DATE_CONTAINER"><label for="P10_INVOICE_FROM_DATE" class="uOptional">Invoice From Date</label>
	  <div class="fieldControls"><input type="hidden" name="p_arg_names" value="6446728547348225"><input type="text" class="datepicker hasDatepicker" id="P10_INVOICE_FROM_DATE" name="p_t01" maxlength="14" size="8" value="01-07-2008" autocomplete="off"><img class="ui-datepicker-trigger" src="/i/asfdcldr.gif" alt="Popup Calendar: Invoice From Date" title="Popup Calendar: Invoice From Date"><a class="eLink" title="Edit" href="javascript:apex.navigation.popup.url('f?p=4000:371:4396537762962:::371:P371_ID,FB_FLOW_ID,FB_FLOW_PAGE_ID:6446728547348225,777,10');"><img src="/i/e.gif" alt="Edit" class="eLink"></a>
	  <span class="uItemHelp" data-item-id="P10_INVOICE_FROM_DATE"></span>
	  </div>
	  </div>
	  </div><div class="apex_cols apex_span_4 ">
	  <div class="fieldContainer horizontal rightlabels" id="P10_INVOICE_TO_DATE_CONTAINER"><label for="P10_INVOICE_TO_DATE" class="uOptional">To Date</label>
	  <div class="fieldControls"><input type="hidden" name="p_arg_names" value="6446921215351609"><input type="text" class="datepicker hasDatepicker" id="P10_INVOICE_TO_DATE" name="p_t02" maxlength="14" size="8" value="01-22-2008" autocomplete="off"><img class="ui-datepicker-trigger" src="/i/asfdcldr.gif" alt="Popup Calendar: To Date" title="Popup Calendar: To Date"><a class="eLink" title="Edit" href="javascript:apex.navigation.popup.url('f?p=4000:371:4396537762962:::371:P371_ID,FB_FLOW_ID,FB_FLOW_PAGE_ID:6446921215351609,777,10');"><img src="/i/e.gif" alt="Edit" class="eLink"></a>
	  <span class="uItemHelp" data-item-id="P10_INVOICE_TO_DATE"></span>
	  </div>
	  </div>
	  </div><div class="apex_cols apex_span_4 omega">
	  <button class="uButton uHotButton " onclick="apex.submit('P10_SEARCH_BTN');" id="P10_SEARCH_BTN" type="button"><span>Filter</span></button> <a class="eLink" title="Edit" href="javascript:apex.navigation.popup.url('f?p=4000:372:4396537762962:::372:P372_ID,FB_FLOW_ID,FB_FLOW_PAGE_ID:6451510162618842,777,10');"><img src="/i/e.gif" alt="Edit" class="eLink"></a>
	  </div>
	  </div></div>
	      <span class="uButtonContainer">

	      </span>
	  </div>

Open in new window


OR

<div class="uButtonRegionContentContainer">
    <div class="uButtonRegionContent"><div class="fieldContainer horizontal rightlabels" id="P10_INVOICE_FROM_DATE_CONTAINER"><label for="P10_INVOICE_FROM_DATE" class="uOptional">Invoice From Date</label>
<div class="fieldControls"><input type="hidden" name="p_arg_names" value="6446728547348225"><input type="text" class="datepicker hasDatepicker" id="P10_INVOICE_FROM_DATE" name="p_t01" maxlength="14" size="8" value="01-07-2008" autocomplete="off"><img class="ui-datepicker-trigger" src="/i/asfdcldr.gif" alt="Popup Calendar: Invoice From Date" title="Popup Calendar: Invoice From Date"><a class="eLink" title="Edit" href="javascript:apex.navigation.popup.url('f?p=4000:371:4396537762962:::371:P371_ID,FB_FLOW_ID,FB_FLOW_PAGE_ID:6446728547348225,777,10');"><img src="/i/e.gif" alt="Edit" class="eLink"></a>
<span class="uItemHelp" data-item-id="P10_INVOICE_FROM_DATE"></span>
</div>
</div><div class="fieldContainer horizontal rightlabels" id="P10_INVOICE_TO_DATE_CONTAINER"><label for="P10_INVOICE_TO_DATE" class="uOptional">To Date</label>
<div class="fieldControls"><input type="hidden" name="p_arg_names" value="6446921215351609"><input type="text" class="datepicker hasDatepicker" id="P10_INVOICE_TO_DATE" name="p_t02" maxlength="14" size="8" value="01-22-2008" autocomplete="off"><img class="ui-datepicker-trigger" src="/i/asfdcldr.gif" alt="Popup Calendar: To Date" title="Popup Calendar: To Date"><a class="eLink" title="Edit" href="javascript:apex.navigation.popup.url('f?p=4000:371:4396537762962:::371:P371_ID,FB_FLOW_ID,FB_FLOW_PAGE_ID:6446921215351609,777,10');"><img src="/i/e.gif" alt="Edit" class="eLink"></a>
<span class="uItemHelp" data-item-id="P10_INVOICE_TO_DATE"></span>
</div>
</div><button class="uButton uHotButton " onclick="apex.submit('P10_SEARCH_BTN');" id="P10_SEARCH_BTN" type="button"><span>Filter</span></button> <a class="eLink" title="Edit" href="javascript:apex.navigation.popup.url('f?p=4000:372:4396537762962:::372:P372_ID,FB_FLOW_ID,FB_FLOW_PAGE_ID:6451510162618842,777,10');"><img src="/i/e.gif" alt="Edit" class="eLink"></a></div>
    <span class="uButtonContainer">

    </span>
  </div>

Open in new window


Thank you very much,
Bill
0
Comment
Question by:bcarlis
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 5

Assisted Solution

by:Neil_Bradley
Neil_Bradley earned 600 total points
ID: 39965425
Bill,
can you post us a link to your work in progress page?
N
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 600 total points
ID: 39966586
So the tool gives you a problem generating code that should take 5 minutes to write, test and deploy if it was written directly and you want a workaround so you can continue to use it???!!!???

The code you posted is not much help without the rules for the classes be referenced, and the code around the fragment, may also contribute to the problem or inhibit a simple solution.

So if you do as Neil requested and post a link we may have a solution to either fix the junk generated by the tool or direct code the goes around the roadblocks it is throwing up.

Cd&
0
 
LVL 2

Author Comment

by:bcarlis
ID: 39966617
Well, I guess I will have to accept what I can do with it... I can not post a link because it goes to our EBS server and it is internal.

Thanks anyway,
Bill
0
 
LVL 2

Author Closing Comment

by:bcarlis
ID: 39978798
thank for trying
0

Featured Post

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Via a live example, show how to take different types of Oracle backups using RMAN.
This video shows how to copy an entire tablespace from one database to another database using Transportable Tablespace functionality.

670 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question