Solved

CSS help needed - Spacing, Formatting

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

[Webinar] Code, Load, and Grow

Managing multiple websites, servers, applications, and security on a daily basis? Join us for a webinar on May 25th to learn how to simplify administration and management of virtual hosts for IT admins, create a secure environment, and deploy code more effectively and frequently.

Question has a verified solution.

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

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…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This video shows how to Export data from an Oracle database using the Datapump Export Utility.  The corresponding Datapump Import utility is also discussed and 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

732 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