Community mailing list archives

community@mail.odoo.com

Re: Survey Module : Manage survey CSS classes ?

by
Yassine TEIMI
- 11/10/2015 15:11:15
Thanks Zahid for your help, 

Before developping a module for overriding I tried the changes usins firebug, there is a live edit options allowing to preview css changes, without touching the source code (there is no way it can be done anyway). 

When applying changes to the form-control class, it doesn't do what I want, because changing the columns width affects all table columns, and I need to narrow just the 2 columns indicated here : 

Images intégrées 1

This is because my table is dynamic, it's generated according to matrix rows and columns defined on the survey object (backend),using qweb templating engine, here is the code generating the table : 

   <template id="matrix" name="Matrix">

<table class="table table-hover">
<thead>
<tr>
<th> </th>
<th t-foreach="question.labels_ids" t-as="col_label"><span t-field="col_label.value" /></th>
</tr>
</thead>
<tbody>
<tr t-foreach="question.labels_ids_2" t-as="row_label">
<th><span t-field="row_label.value" /></th>
<td t-foreach="question.labels_ids" t-as="col_label"> <input type="radio"/>
<!-- other inputs here -->
</td>
</tr>
</tbody>
</table>
</template>

From my point of view, I need a conditionnal css, a css compiled code like sass or less, because I think it allows to apply a css class, according to a condition maybe, but I don't know how to use it, neither how to solve this problem with, do you know how to use sass or less in this case ?

Here is a part from an article ( in french ) explaining that we can use saass to bring if/else/elif to the css.

Images intégrées 2

Any suggestions will be welcome. 

Regards.

2015-11-10 18:56 GMT+00:00 zahid jalal <j.zahid@gmail.com>:
Try to override this class in a new css file , like i explained before:
in that file you can for example put this code
.form-control {
    background-color: #fcfcfc;    /*  grey color */
    font-size: 12px;                      /* smaller size
    height: 34px;
    line-height: 1.3;
    padding: 6px 12px;
    width: 80%;  /* or 120px or whatever value you want*/
}

try to use the addon form last message as a bse for work, transform it until you get the result yout want.

Good luck



SSLL, Intégrateur Odoo.
Intégration de Services.
BI and IT consulting.

On Tue, Nov 10, 2015 at 5:17 PM, Yassine Teimi <yteimi01@gmail.com> wrote:
Hi Zahid, 

Using firebug I found the class form-control : 

.form-control {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #8c8c8c;
    display: block;
    font-size: 16px;
    height: 34px;
    line-height: 1.3;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
}

But there is no url that indicates the source.

2015-11-10 16:47 GMT+00:00 zahid jalal <j.zahid@gmail.com>:
Hi yassine
please install and use Firebug extension for firefox. this addon can inspect all elements on a page and points to original file.  it will be you best help.

rgrds


SSLL, Intégrateur Odoo.
Intégration de Services.
BI and IT consulting.

On Tue, Nov 10, 2015 at 4:34 PM, Yassine Teimi <yteimi01@gmail.com> wrote:
Dears, 

I created a survey, with matrix type question. The matrix columns have the same size, I want to give a column a size smaller than the others, for example, I want to make these two columns smaller : 

Images intégrées 1

Because they are number field, and taking a lot of space, doesn't allow me to print my survey correctly. 

While inscpecting the code I realized that the classe used for the table is : "table table-hover"

And the class used for all form inputs is : "form-control"

If only I can find those classes, i can make some changes and test, I've been looking for it on the survey module css folder, but with no luck. 

Can you point me to some css classes I can use to make a table column, or an input field smaller ? 

Thanks a lot.

--

Cordialement

Yassine TEIMI

Consultant & Odoo Project Manager
TEL : +212 6-27 33 30 78

_______________________________________________
Mailing-List: https://www.odoo.com/groups/community-59
Post to: mailto:community@mail.odoo.com
Unsubscribe: https://www.odoo.com/groups?unsubscribe


_______________________________________________
Mailing-List: https://www.odoo.com/groups/community-59
Post to: mailto:community@mail.odoo.com
Unsubscribe: https://www.odoo.com/groups?unsubscribe




--

Cordialement

Yassine TEIMI

Consultant & Odoo Project Manager
TEL : +212 6-27 33 30 78

_______________________________________________
Mailing-List: https://www.odoo.com/groups/community-59
Post to: mailto:community@mail.odoo.com
Unsubscribe: https://www.odoo.com/groups?unsubscribe


_______________________________________________
Mailing-List: https://www.odoo.com/groups/community-59
Post to: mailto:community@mail.odoo.com
Unsubscribe: https://www.odoo.com/groups?unsubscribe




--

Cordialement

Yassine TEIMI

Consultant & Odoo Project Manager
TEL : +212 6-27 33 30 78