View Issue Details

IDProjectCategoryView StatusLast Update
0000076VitalPBX[All Projects] Improvementpublic2018-07-10 13:47
ReporterdjonyAssigned Tomrivera 
PrioritynormalSeverityminorReproducibilityhave not tried
Status assignedResolutionopen 
PlatformVitalPBXOSCentosOS Version7
Product Version2.0.0-4RC2 
Target VersionFixed in Version 
Summary0000076: Improve CSS
DescriptionI have suggestion for the functions name and it's corresponding fields. Now you use "float: left" to align the function name and its field, but if you reduce the screen resolution, then the function name and field move in different directions relative to each other because of the word hyphenation (see attach css1).
I suggest to use "display: inline-block" (for function name) , "display: inline-table" (for fields) and "vertical-align: middle" (for all) instead of "float: left". In this case name and field will always be aligned with each other, regardless of the screen resolution (see attach css2).

To quick check, create file in /usr/share/ombutel/www/resources/css for example 90-custom.css with:


.pbx_module_tabs .form-group {
    display: inline;
}

.form-horizontal .control-label {
    padding-top: 0px;
        vertical-align: middle;
    float: none; /*disable global "float" parametr */
    display: inline-block;
        margin-bottom: -15px;
}

.form-group .custom-elem-area {
    padding: 0;
    display: inline-table; /* why not "inline-block"? Because with inline-block breaks the additional field elements such as headphone and magnifier */
    vertical-align: middle;
    float: none; /*disable global "float" parametr */
        margin-bottom: -15px;
}

But of course it's better to change the code in the main css files
TagsNo tags attached.

Activities

djony

2018-02-27 07:41

reporter  

css1.jpg (325,388 bytes)
css2.jpg (329,529 bytes)

mrivera

2018-03-06 22:33

administrator   ~0000113

I tried your css, but it doesn't looks good on responsive mode, or in form-groups with multiple inputs

Screenshot_220.png (13,851 bytes)
Screenshot_220.png (13,851 bytes)
Screenshot_221.png (37,281 bytes)
Screenshot_221.png (37,281 bytes)

djony

2018-03-07 18:23

reporter   ~0000114

Because I'm not strong css, I do not know how to solve the accompanying problems of displaying other elements. I gave an example in order to show that it is possible to align the function name and its field, but my skills are not enough to provide you with a ready solution.

djony

2018-07-10 13:47

reporter   ~0000159

Finally I can gave you working solution, try it.

Create file in /usr/share/ombutel/www/resources/css for example 90-custom.css with:

/* Align functions name and its fields */
button, input, optgroup, select, textarea {
    margin-right: 2px;
}
.form-horizontal .control-label {
    padding: inherit;
    margin-right: 5px;
    vertical-align: middle;
    float: none;
    display: inline-block;
    text-align: left;
    margin-bottom: 5px; /*было -12px*/
}
.form-group .custom-elem-area {
    padding: 0;
    display: inline-table;
    vertical-align: middle;
    float: none;
    margin-bottom: 5px; /*было -12px*/
}
.pbx_module_tabs .form-group {
    display: inline;
}
/*fix for bulk modification*/
#bulk_modificationgeneral > div:nth-child(1) > div > div:nth-child(1) > div > div > span > label.form-control {
  width: 100px;
}
/*fix for extensions status*/
.form-horizontal .form-group {
  margin-right: 0px;
  margin-left: 0px;.
}
.form-group {
 margin-bottom: 5px;
            }
/*fix for custom codes */
.fstatus {
    margin-top: -19px;
    }

@media (max-width: 767px) {
  .form-horizontal .control-label {
     margin-bottom: 0px;
    padding-left: 15px;
}
}
/*fix for cron profiles*/
#cron_profilesgeneral > div:nth-child(4) > div > div.col-xs-12.col-md-10.col-lg-8.column-pbx > div:nth-child(1) > div:nth-child(1) > div > label,
#cron_profilesgeneral > div:nth-child(4) > div > div.col-xs-12.col-md-10.col-lg-8.column-pbx > div:nth-child(2) > div:nth-child(1) > div > label,
#cron_profilesgeneral > div:nth-child(4) > div > div.col-xs-12.col-md-10.col-lg-8.column-pbx > div:nth-child(3) > div:nth-child(1) > div > label,
#cron_profilesgeneral > div:nth-child(4) > div > div.col-xs-12.col-md-10.col-lg-8.column-pbx > div:nth-child(4) > div:nth-child(1) > div > label,
#cron_profilesgeneral > div:nth-child(4) > div > div.col-xs-12.col-md-10.col-lg-8.column-pbx > div:nth-child(5) > div:nth-child(1) > div > label
 {
    width: 24%;
    }

/*fix for texnology settings - profiles */
@media (min-width: 769px){
    #profilesgeneral
                .col-md-5 {
                 width: 20% !important;
                }
    }

Issue History

Date Modified Username Field Change
2018-02-27 07:41 djony New Issue
2018-02-27 07:41 djony Status new => assigned
2018-02-27 07:41 djony Assigned To => mrivera
2018-02-27 07:41 djony File Added: css1.jpg
2018-02-27 07:41 djony File Added: css2.jpg
2018-03-06 22:33 mrivera File Added: Screenshot_220.png
2018-03-06 22:33 mrivera File Added: Screenshot_221.png
2018-03-06 22:33 mrivera Note Added: 0000113
2018-03-07 18:23 djony Note Added: 0000114
2018-07-10 13:47 djony Note Added: 0000159