When openui5 converts XML, the class property is not included in the HTML output

I have included the "footerAlarms" value in the XML view, but when I check the HTML version in the browser, it is not showing up. How can I make sure that the class footerAlarms appears in the HTML view?

<footer class="footerAlarms">
            <Toolbar>
                <ToolbarSpacer/>    
                <Link text="{i18n>readMeOss}" press="openSourceFileDownload" class="sapUiMediumMarginBegin LinkOss"/>                                           
            </Toolbar>
</footer>


footer.footerAlarms {
    height: 42px !important;
    width:calc(100%-32px);
    margin:0 16px 0 16px !important;
    background: #FFFFFF !important;
    box-shadow: 
    0 1px 0 0 rgba(255,255,255,0.60),
    inset 0 -1px 0 0 rgba(115,100,90,0.16);
}

https://i.sstatic.net/uOWUp.png

htmlcssxmlsapui5footer

Answer №1

Solution I came up with

onAfterRendering : function(){
    $("footer").addClass("footerAlarms");
  }

Cascading Style Sheets (CSS)

.footerAlarms {
    height: 42px !important;
    // ensure space is included for the value inside curly braces below
    width:calc(100% - 32px);
    margin:0 16px 0 16px !important;
    background: #FFFFFF !important;
    box-shadow: 
    0 1px 0 0 rgba(255,255,255,0.60),
    inset 0 -1px 0 0 rgba(115,100,90,0.16);
}

Answer №2

Make sure to include a dot before footer.footerAlarms in your code snippet:

.footer.footerAlarms {
    height: 42px !important;
    width:calc(100%-32px);
    margin:0 16px 0 16px !important;
    background: #FFFFFF !important;
    box-shadow: 
    0 1px 0 0 rgba(255,255,255,0.60),
    inset 0 -1px 0 0 rgba(115,100,90,0.16);
}

Updated on 291117 at 15:27 :

Here is the corrected version of the code:

.footerAlarms {
        height: 42px !important;
        width:calc(100%-32px);
        margin:0 16px 0 16px !important;
        background: #FFFFFF !important;
        box-shadow: 
        0 1px 0 0 rgba(255,255,255,0.60),
        inset 0 -1px 0 0 rgba(115,100,90,0.16);
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Please select the option to choose all values

Currently, I am working on implementing a select option feature on my webpage. I have integrated PHP into it to ensure that the selected option remains unchanged after submission. My goal is to include a value of "any" so that when the user chooses "ANY," ...

javascriptphphtml

Next.js: Customizing the output format of CSS Modules classes

I'm a beginner with NextJS. I'm looking to update the CSS classes prefix + suffix to this new format: <li class="desktop__menu-item--2feEH"></li> <li class="desktop__menu-item--2feEH"></li> <li class ...

cssreactjswebpacknext.js

Ways to verify if XmlDocument has been altered

Is there a built-in flag in the XmlDocument object to indicate when it has been changed? I am currently conditionally modifying the XmlDocument in different parts of my code and I want to avoid passing around a "changed" flag. var doc = new XmlDocument( ...

c#.netxmlc#-4.0

Using CSS to create a strikethrough effect on prices with spacing

I have a woocommerce setup and I want to showcase the original prices by striking them out like a price tag when products are on sale. However, there seems to be an issue with the space that woocommerce automatically adds between the currency and the pric ...

csswoocommercetext-decorationsstrikethrough

Avoid the div from covering the scrollbar within its containing parent div

Background: Trying to resolve an issue mentioned here: https://github.com/likeastore/ngDialog/issues/94 Challenge: If you open this plnkr link: http://plnkr.co/edit/qKJiNwyivqJVCAtyhwYR?p=preview and attempt to hold and drag the scrollbar with the mouse, ...

angularjscssangularjs-directiveng-dialog

How do I adjust the padding around mathematical equations in MathJax?

When Math equations are placed within a div element with padding set to 0, it appears like this: Is there a method to modify the padding value for the math content? ...

jqueryhtmlcssmathjax

Eliminate the empty choice for Angular when dealing with dynamic option objects

Looking for assistance with this code snippet: <select ng-model='item.data.choice' > <option ng-if='item.data.simple_allow_blank == false' ng-show='choice.name' ng-repeat='choice in item.data.simple_choices&ap ...

cssangularjshtml

Alert: Converting an array to a string may result in unexpected behavior

I am currently working on implementing pagination and encountered an error. This is my first time working with this, so any help would be greatly appreciated. Thank you! try { // Determine the total number of items in the table $total = $con -> ...

phphtml

Is there a way for me to position my chat messages on the right side in the chat room?

I have a react chat application and I'm looking to customize the appearance of my messages. Currently, all entries with an orange vertical bar belong to me and are displayed on the left side of the chat room. I would like to move them to the right sid ...

cssreactjs

Calculate the combined sum and alter the values of three input fields

There are three text boxes (testbox, testbox2, testbox3) that receive values from an input field, radio button selection, and checkbox. The correct values are displayed in testbox, testbox2, testbox3. Additionally, the sum of testbox, testbox2, testbox3 n ...

javascripthtml

Retrieving Checkbox Values in PHP: A Step-by-Step Guide

Question: Retrieving values from a checkbox I am facing an issue with the script below where I am only able to retrieve the last selected value of the checkbox. How can I modify the code to fetch all the selected values for validation purposes? Here ...

phphtmlformscheckbox

Personalize or delete the spacing within an ion row

Currently, I am delving into the world of Ionic app development. Although I have grasped the concept of the Grid layout, I find myself hitting a roadblock when it comes to adjusting or removing spaces between rows 2 and 3 in my app interface, as illustrate ...

htmlcssangularionic-frameworkionic2

Adding a backslash in Angular: Tips and Tricks

I have a question about adding a backslash to a string that is returned from a div, for example Car1 \sold. Although I am able to retrieve the status, I am having trouble adding the backslash. Here is what I have tried so far: <span>{{addBackl ...

javascriptangularjshtmlangulartypescript

Link with javascript onClick attribute

Is there a way to combine a JavaScript "onClick" event with an HTML "a href" link? I would like for the first step to be triggered upon clicking the link using "onClick", and if that is successful, the user should then be redirected to another page using t ...

javascripthtmlonclickhyperlinkajax-request

Room available on the body's right side for tiny gadgets

I'm currently facing a website issue while using Bootstrap. Everything seems to be working fine until I attempt to check the responsiveness of my website. There appears to be an excessive white space on the right side of my body, but only in a specifi ...

htmlcssbootstrap-4

"Enhance your website with a backspace button using jquery - here's

Recently, I delved into the world of jQuery and decided to test my skills by creating a jQuery calculator. Everything worked perfectly except for the backspace button. This is what I tried: if (value === backspace) { $(input).val($(input).val().substring ...

javascriptjqueryhtmlcss

Is it possible to enable an email hyperlink to function on a computer?

I successfully created an email link that is functional on mobile devices by using 'href="mailto:[email protected]"'. When I click on the button from a mobile device, it prompts me to choose how I want the email delivered. However, when I tr ...

htmlhtml-email

Create an overlay that completely masks the height of a different element

Having a variety of elements on my screen that require overlays, I find myself facing a challenge. These elements come in different sizes and can be resized while the page is active. Although I managed to position overlays using CSS, the issue of 100% hei ...

jquerycss

No elements can be located by Selenium through the use of css, xpath, name, or id in Python

I'm facing a challenge logging into a forum after bypassing the cookie message by switching to its iframe. Despite trying to access elements on the page, I'm encountering difficulties. Here's the code I'm using: #set path, open firefox ...

pythonhtmlseleniumauthenticationautomation

How to create the appearance of multiple line breaks using CSS

While pondering a question, I stumbled upon a humorous solution that wasn't quite finalized. Check out the Fiddle and attempt to remove the <br/> tag. The challenge is to achieve the same effect (red div displayed) without resorting to this ra ...

javascripthtmlcss