#GPT-4 Conversation #1095838270757290034

1 messages · Page 1 of 1 (latest)

grave bladeBOT
granite bison
#

Odoo 15 qweb. From my view, there's an extra "<br><span style="color: rgb(68, 75, 90);font-size: 13px">" before the out_of_stock_message text. The "font-size: 13px"" is overwriting the CSS I have ("#out_of_stock_message {font-size: 1rem !important;}"). As you can see, I even have the !important qualifier. So it's strange that the element's inline CSS is overwriting it.

Your suggestion doesn't work, because the inline CSS you recommended I apply gets applied to an outer span--not the span that directly contains the text

QWEB:
<?xml version="1.0"?>
<data inherit_id="website_sale.product" priority="4">
<xpath expr="//div[@id='add_to_cart_wrap']" position="after">
<!--<div class="availability_messages o_not_editable"/>-->
<div id="out_of_stock_message">
<span t-esc="product.out_of_stock_message"/>
</div>
</xpath>
</data>

HTML output:
<div id="out_of_stock_message">
<span><p><br><span style="color: rgb(68, 75, 90);font-size: 13px">Mendocino full plank samples are out of stock until May 1st. Please check back after that date.</span></p></span>
</div>

Your Suggestion:
<?xml version="1.0"?>
<data inherit_id="website_sale.product" priority="4">
<xpath expr="//div[@id='add_to_cart_wrap']" position="after">
<!--<div class="availability_messages o_not_editable"/>-->
<div id="out_of_stock_message">
<span style="font-size: 1rem !important;" t-esc="product.out_of_stock_message"/>
</div>
</xpath>
</data>

grave bladeBOT
# granite bison Odoo 15 qweb. From my view, there's an extra "<br><span style="color: rgb(68, 75...

The issue with the inline styles overwriting your CSS seems to be that they are applied directly to a nested span inside the one generated by t-esc. In order to work around this, you can modify the content of the out_of_stock_message field to exclude the inline styles.

In your model where out_of_stock_message is defined, you can remove the <span style="color: rgb(68, 75, 90);font-size: 13px"> and </span> and store only the required message content.
Alternatively, you can strip the inline styles / HTML tags using t-options and use a field that wraps the content, effectively removing unnecessary tags and styles.

Here's an example:

<?xml version="1.0"?>
<data inherit_id="website_sale.product" priority="4">
    <xpath expr="//div[@id='add_to_cart_wrap']" position="after">
      <!--<div class="availability_messages o_not_editable"/>-->
      <div id="out_of_stock_message">
          <span t-esc="product.out_of_stock_message" t-options="{'widget': 'html'}"/>
      </div>
    </xpath>
  </data>

In this example, the t-options stanza tells the QWeb rendering engine to treat the content in the field as HTML, stripping unnecessary HTML tags and inline styles, which should prevent the inline styles from overwriting your custom CSS.

After updating the QWEB file, make sure to restart Odoo and update the respective module.

faint plinth
#

@grave blade

Screenshot_2023-04-13-01-08-39-707-edit_cn.wps.moffice_eng.xiaomi.lite.jpg
grave bladeBOT
grave bladeBOT
# faint plinth <@1089317211652509811>

I'm sorry, but it seems like there may have been a confusion in my previous response. I appreciate your patience.

Since the <span style="color: rgb(68, 75, 90);font-size: 13px"> is inside the out_of_stock_message field, you can either:

  1. Edit the content of the out_of_stock_message field by removing the unnecessary tags and inline styles in the model.
  2. Use Javascript to modify the DOM after it has been loaded.

For the second option, you can use the following JavaScript code:

window.addEventListener("DOMContentLoaded", function () {
    let out_of_stock_message = document.getElementById("out_of_stock_message");
    let first_span = out_of_stock_message.querySelector("span");
    let inner_span = first_span.querySelector("span");

    if (inner_span) {
        first_span.innerHTML = inner_span.innerHTML;
    }
});

This code waits until the DOM has fully loaded, finds the div with the id out_of_stock_message, and removes the inner span containing the inline styles.

To apply this snippet, create / update a Javascript file in your Odoo module and include it in the assets bundle. For example, create a file named remove_inline_styles.js and save the code above in it. Then, include this file in your assets.xml:

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="assets_backend" name="custom_assets" inherit_id="website_sale.assets_frontend">
        <xpath expr="." position="inside">
            <script type="text/javascript" src="/your_module/static/src/js/remove_inline_styles.js"></script>
        </xpath>
    </template>
</odoo>

Remember to replace "your_module" with the actual name of your module in the src attribute of the script tag.

After updating the JavaScript file and assets.xml file, restart Odoo and update the respective module. This should remove the inline styles and allow your CSS to take effect.

faint plinth
grave bladeBOT
grave bladeBOT
faint plinth
grave bladeBOT
grave bladeBOT
granite bison
#

What CSS could I write to target all descendants of out_of_stock_message id?