Enhancement #1373

Edition form: the fields have to be wider

Added by Arnaud Raphaëlle almost 2 years ago. Updated almost 2 years ago.

Status:NewStart date:09/26/2016
Priority:NormalDue date:
Assignee:Arnaud Raphaëlle% Done:

0%

Category:CATALOG
Target version:-
Sponsor: Ergonomic impact:
Functional impact:

Description

In the edition forms it would be better if the fields (type = text) will be wider.
Fields were wider on V3 (see enclosed FeldBreiteV3 and FeldBreiteV4).

FeldBreiteV3.PNG (7.1 KB) Arnaud Raphaëlle, 09/26/2016 02:14 PM

FeldBreiteV4.PNG (8.04 KB) Arnaud Raphaëlle, 09/26/2016 02:14 PM

asitvd_md_edit_css.png (103 KB) Blatti Yves, 09/27/2016 09:03 AM

asitvd_edit.less (2.83 KB) Blatti Yves, 09/27/2016 09:17 AM

History

#1 Updated by Blatti Yves almost 2 years ago

Hi Raphaëlle, pleased to see you on the forge !

In my opinion, this should be fixed by template CSS, since everyone will have different needs.
As an example, at asitvd.ch we have customized fields for :
  • wider area
  • right aligned
  • icon for tooltips
  • bold for mandatory fields

(easySDI has classes ready for this type of customization.)

Our form as example:

Part of our LESS template code for MD edition :

// Metdata Edit Form
.com_easysdi_catalog.view-metadata.layout-edit{

   #form-metadata{
        //Big fields
        input, textarea, .uneditable-input {
            width: 500px;
        }
        //Big selects
        .chzn-container {
            width: 514px !important;
        }

        //fieldsets legend
        legend{
            display: block;
            width: 100%;
            padding: 0;
            margin-bottom: 0;
            border: 0;
            border-top: 0px;
            border-left: 1px solid #BDBDBD;
            background-color: rgba(200, 200, 200, 0.2);

            span{
                font-size: 16px;
            }
        }
        //Nested teansparency
        .inner-fds{
            background-color: rgba(200, 200, 200, 0.2);
            padding-left: 40px;
        }
        //Buttons sizes
        .add-btn{
            font-size: 10px !important;
            line-height: 12px;
            padding: 1px 4px 1px 2px !important;
        }
        .remove-btn{
            font-size: 10px !important;
            line-height: 12px;
            padding: 1px 4px 1px 2px !important;
            margin-left:10px;
            float: none;
        }
        .collapse-btn{
            margin-left: 4px;
        }

        //First level titles
        x%x%> div > fieldset{

            width: 100%;

            x%x%> .action{
                font-size: 25px;
                padding-bottom: 15px;
                margin-top: 30px;
                color: #54af32;
                x%x%:first-child{
                    margin-top: 0;
                }
            }
            x%x%> fieldset {
                x%x%> legend{
                    //background: none;
                }
                x%x%> div{
                    //background: none;
                }

            }
        }

        //other titles
        .action{
            padding-bottom: 10px;
            padding-top: 5px;
            font-size: 16px;
        }

        //placement
        .control-group {
            margin-left: auto;
            margin-right: 0;
            width: 1000px;
            .control-label{
                text-align: right;
                width: 200px;
                margin-right: 10px;
            }
        }
    }

    label{
        //required
        x%x%.labelrequired::after {
            content: "";
        }

        x%x%.labelrequired {
            font-weight: bold;
        }

        //has tooltips
        x%x%[data-original-title]::after {
            color: #949494;
            content: "E";
            //content: "";
            font-family: IcoMoon;
            font-size: 12px;
            margin-left: 4px;
        }
    }
    .well{
        box-shadow: none;
        background: none;
        border: none;
    }
}

#2 Updated by Blatti Yves almost 2 years ago

  • File asitvd_edit.less added
  • Assignee changed from Van Hoecke Hélène to Arnaud Raphaëlle

Here is the LESS file (since redmine broke some characters).

Don't hesitate to ring or mail me if you need more!

HIH, regards

PS : If you really prefer to propose an enhancement of easySDI, you have to assign it to "Technical Committee".
Enhancement have to be voted first.

#3 Updated by Blatti Yves almost 2 years ago

  • Priority changed from Urgent to Normal

Hi Raphaëlle !

Any news ?
- is the proposed 'custom css' solution OK for you ? (This issue can be market as 'rejected', but we should add some of this content in the wiki help)
- or do you think something need to be done is easysdi components ? (in this case, the issue must be completed, assigned to technical committee as 'request for comments')

Thanks

Also available in: Atom PDF