Created and Modified Date fields are aligning incorrectly [Solved]

[Quincy]

Hello. when trying to use the upload from the front end, the Created and Modified Date fields are aligning to the right outside the template.
Is there a fix for this?
I am using the latest version of Jdownloads and using Firefox as my browser.
See attachment.

[gelöscht durch Administrator]

[ColinM]

Hi,
This is most likely a problem with your template css!  Please see attached pics which show no problems with layout.  I have run this on Firefox.
The solution is to add some extra css into your template css file or into jdownloads_custom.css  Note some templates have a custom.css file for this purpose.

For reference:
HTML code generated for label field, such as the Create together with the relevant css is shown below.

Code Select Expand

<div class="formelm">
    <label aria-invalid="false" id="jform_date_added-lbl" for="jform_date_added" class="">
Created Date</label>

from jdownloads_fe.css
.formelm label {
       width: 11em;
       float: left;
       display: block !important;
       }

and the HTML code generated for date input, with the relevant css        

Code Select Expand

<div class="input-append"><input aria-invalid="false" data-original-title="" title="" name="jform[date_added]" id="jform_date_added" value="" size="22" maxlength="45" class="inputbox hasTooltip" type="text"><button type="button" class="btn" id="jform_date_added_img"><i class="icon-calendar"></i></button></div>

from template.css
.input-append  {
display: inline-block;
margin-bottom: 9px;
vertical-align: middle;
font-size: 0;
white-space: nowrap;
}

A possible source of the problem is that your template css does not have all the 'control' for what is a standard Joomla! form input field. But on balance I suspect that the   " width: 11em;"   is being superceded  by the template.

If you are familiar with the Firefox  Inspector(Q) facility you can see what is happening  - to get into Inspector(Q) place cursor over desired field such as 'Created' and right click, which will allow you to select this debugging aid.
To test I would suggest you add following into jdownloads_custom.css to attempt to force the width

Code Select Expand

.formelm label {
       width: 11em !important;
}
There is an article which describes editing jdownloads_custom.css at http://www.jdownloads.net/documentations/item/custom-css

Hope this helps
Colin

PS the template css might have an align:right; in the .input-append class which would also cause the problem.

[Quincy]

Thank you so much for your help and thorough information ColinM.
The last bit of code offered in your reply, totally fixed the issue.
I appreciate it.
Quincy

[ColinM]

Hi
There is a small possibility that the css added could affect other parts of your site so now we know it works I suggest you try

Code Select Expand

.jd_fieldset_outer .formelm label {
       width: 11em !important;
}
This means that the css only applies when in an html element that has class .jd_fieldset_outer which has in it an html  element with class .formelm only then will it operate on a <label... element
Basically including the .jd_fieldset_outer means it will only apply to jD generated html.

Colin