[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 669
  • Last Modified:

CSS help needed - Spacing, Formatting

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
BILL Carlisle
Asked:
BILL Carlisle
  • 2
2 Solutions
 
Neil_BradleyWeb UX/UI DeveloperCommented:
Bill,
can you post us a link to your work in progress page?
N
0
 
COBOLdinosaurCommented:
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
 
BILL CarlisleAPEX DeveloperAuthor Commented:
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
 
BILL CarlisleAPEX DeveloperAuthor Commented:
thank for trying
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now