Solved

CSS help needed - Spacing, Formatting

Posted on 2014-03-30
4
600 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 150 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 150 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This video shows how to Export data from an Oracle database using the Original Export Utility.  The corresponding Import utility, which works the same way is referenced, but not demonstrated.
This videos aims to give the viewer a basic demonstration of how a user can query current session information by using the SYS_CONTEXT function

763 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