Can someone point me in the direction of the app.css file within DurandalJS that controls the modals

I am currently facing an issue with implementing a modal in my app using the DurandalJS (SPA) framework. The modal is not displaying correctly, as it opens without a blockout and stretches horizontally across the entire browser.

(I expect "Feeds", the "New Feed" button, and the "Logout" link to be blocked out.)

Despite reading through the documentation multiple times, I only found a clue under the "The Default Modal Context" section:

Note: The default modal context has some required css for positioning which can be found in the app.css file. It assumes that the target browser supports position: fixed. If your target browsers do not support this, you should replace the default modal context with a custom implementation.

The mention of an "app.css" file has me puzzled... I have searched high and low but cannot locate it. Even after scouring DurandalJS's github repo and looking at the only app.css file present, there seems to be nothing that directly impacts the modal's behavior. Any suggestions?

javascriptcssdurandal

Answer №1

To begin with, refer to the contents of the file named durandal.css. Access durandal.css here 

.modalBlockout {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;

    pointer-events: auto;

    -webkit-backface-visibility: hidden;

    -webkit-transition: opacity 0.1s linear; 
    -moz-transition: opacity 0.1s linear; 
    -o-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear; 
}

.modalHost {
    top: 50%;
    left: 50%;
    position: fixed;
    opacity: 0;

    -webkit-backface-visibility: hidden;

    -webkit-transition: opacity 0.1s linear; 
    -moz-transition: opacity 0.1s linear; 
    -o-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear;
}

.messageBox {
    background-color: white;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    outline: none;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    min-width: 300px;
}

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

A comprehensive guide on implementing filtering in AngularJS arrays

I am working with the array provided below: [ { Id: 1, Name: "AI", Capacity: 2, From: "2021-10-27T08:00:00", To: "2021-10-27T08:50:00", }, { Id: 2, Name: "TEST", Capacity: 2, ...

javascriptangularjs

Angular failing to append hash to ng-href in browsers that do not support it

When I attach an ng-href to a link like this: ng-href="{{post.btn.url}}" The resulting value is: ng-href="/news/some-post" In browsers that do not support html5 mode, these links do not work properly because they require a #. How can I handle this in I ...

javascriptangularjs

How can I insert a button into a Flatlist using React Native?

Is there a way to add a single scrollable button inside a FlatList without duplicating it? I've been experiencing issues where adding a button inside the FlatList results in multiple buttons being displayed. On the other hand, placing the button outs ...

javascriptreactjsreact-nativereact-hooksreact-native-flatlist

Unable to view the image in browsers other than Internet Explorer

On a webpage, there is a feature where clicking on the "Add More" link should display an input box and a "Delete" button image. Surprisingly, this functionality works perfectly on IE browsers, but not on Mozilla or Chrome. In non-IE browsers, only the text ...

javascriptcssgoogle-chrome

What is the best way to make a sliding DIV appear at the edge of the browser window?

I recently came across a really interesting effect on a webpage. After arriving on the page, a slide-in window appears after about a minute. It slides in from the right side, remains at 250x180 for around ten seconds, then shrinks to 250x50 and stays visib ...

jquerycss

Identify and sort JSON objects based on keys with multiple values

My JSON file contains objects structured like this: [ { "name" : "something", "brand": "x", "category" : "cars" }, { "name" : "something2 ...

javascriptjson

The integration of HTML and CSS using ng-bind-html appears to be malfunctioning

<ion-item ng-bind-html="renderHtml(word[key])"> </ion-item> When referring to word[key], it represents: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> This is the CSS being u ...

javascripthtmlcssangularjs

Combine entities in Firebase when the names match

Currently, I am developing a simple shopping cart application. Whenever a user clicks on the Add To Cart button, I save the product in the database as an array item. If a user tries to add multiple items of the same product, I aim to group all products, ...

javascriptangularfirebasegoogle-cloud-firestore

Adaptable Bootstrap Button that Adjusts to Different Screen Sizes

I want this button to adjust its size according to the screen dimensions. The current code keeps the button fixed in place. See below for the code snippet. <button type="button" [className]="'btn btn-block m-0'" kendoButton ...

cssangularresponsive-designbootstrap-5

What is the process of setting a function as a property value in the Vuex State of an object from a component?

Can someone assist me with incorporating a function into the property of an object as a value for the state in my Vuex store? I am currently restructuring some code for a website using vue.js and fullpage.js. I have moved my fullpage options to the vuex s ...

javascriptvue.jsvue-componentvuexfullpage.js

Can child elements' visibility be controlled by their parent's class using only CSS?

Is it possible to achieve this functionality using only CSS: When the parent element has a "hidden" class, its child elements with an "a" class should be hidden For example: <div class="parent"> <div class="a"></div> // Visible ...

cssvisibility

In the game of rock paper scissors, the icons become unclickable once you achieve a score of 5

I have created a Rock Paper Scissors game where the score resets if either the user or computer reaches 5 points, but I want to prevent any further play after hitting 5. Currently, the game displays a message and reloads after 5 seconds, during which tim ...

javascripthtmlcss

ES6 Multiton design pattern: a powerful way to manage multiple instances

I am currently working on implementing the Multiton Design Pattern within my user module in a node.js application. I am seeking out some solid examples to guide me in this process. ...

javascriptnode.jsdesign-patternsmultiton

Tips for simulating or monitoring a function call from a separate file

Within my codebase, there is a function that is triggered upon submission. After the payload has been posted, I aim to execute a function located in a distinct file named showResponseMessage: Contact.js import { onValueChangeHandler, showResponseMessage, ...

javascriptreactjsjestjsenzyme

What is the process of encoding JSON in PHP using jQuery Ajax to send post data?

I created an HTML form to submit data to a PHP file upon hitting the submit button. $.ajax({ url: "text.php", type: "POST", data: { amount: amount, firstName: firstName, lastName: lastName, email: email }, ...

javascriptphpjqueryajaxjson

Toggle jQuery to hide a div and update its CSS styling

There is an anchor with the class of "hide-btn1" that I want to trigger a series of actions when clicked: The rcol-content should hide and the text should change from Hide to Show The #container width needs to increase to 2038px The table.status-table wi ...

javascriptjqueryhtmlcss

Guide on decrypting a file encrypted with C# using Node JS

I currently have encrypted files in C# using DES and PKCS7 encryption. My objective is to decrypt these files in Node JS. The decryption code in C# that I am using appears like this: public string SSFile_Reader( string fileToDecrypt ) { DESCryptoService ...

javascriptnode.jsencryptioncryptographycryptojs

Ways to conceal and reveal image and text elements based on array loop output

I am currently working on setting up a questionnaire. The questions and answer options are being pulled from a database using an API. Some of the options include images, with the image link stored in the database. I am trying to find a solution where text ...

javascriptarraysangular

What is the best method for disabling autoscroll for a specific div id when the :target attribute

I created this accordion menu using only html and css, but the buttons are built with the :target id. Is there a way to prevent the automatic scrolling when any button is clicked without using javascript? It currently moves to the anchor #id. I've se ...

javascriptjqueryhtmlcssaccordion

Steps to enable the submit button in angular

Here's the code snippet: SampleComponent.html <nz-radio-group formControlName="radiostatus" [(ngModel)]="radioValue" (ngModelChange)="onChangeStatus($event)"> <label nz-radio nzValue="passed">Passed</label> <label nz-rad ...

javascriptangulartypescript