Subscribe: Rick Strahl's Web Log
Added By: Feedage Forager Feedage Grade B rated
Language: English
application  applications  body  content  core net  core  iis  modal dialog  modal  net core  net  ssl certificates  ssl  web  windows 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: Rick Strahl's Web Log

Rick Strahl's Web Log

Life, Surf, Code and everything in between


Bootstrap Modal Dialog showing under Modal Background

Wed, 14 Sep 2016 20:42:32 GMT

I've repeatedly run into the following problem with Bootstrap's modal dialog where the dialog ends up showing underneath the modal background: Ugh. This problem seems to have arrived sometime around Bootstrap 3.33 - prior to that things seemed to work just fine but starting with 3.34 and later things started going south. Caused by positioning The problem is that many modern applications use fixed, absolute and relative positioning to lay out their user interface. The above problem occurs when the Modal dialog sits within a container that has any parent that uses either fixed, absolute or relative positioning. The change post 3.34 of bootstrap was that the modal overlay was moved to the DOM root below while the actual modal dialog content in this case is sitting inside of a separate nested DOM structure.
... other content
The problem occurs because the overlay and the other content container are not relative to each other so the position:absolute (or fixed) and their z-index values are not directly related to each other. The easiest solution is to move the modal dialog outside of any container and just declare it under the element, or - remove any absolute, fixed or relative positioning.
... other content
This setup works because there's no top level container above the modal that introduces it's own positioning root. Problem solved, right? sponsored by Not so fast Well not quite. If you can move your elements - great, but in dynamic applications rendered through a framework like Angular, it's likely you have a component rendering the modal, and you can't control where the element goes. In the first example the tag is the Angular application's DOM root and everything rendered dynamically by Angular renders below it. If anything in that tree uses position: absolute or position:fixed - boom the problem shows up in modals. The problem is that the .modal-backdrop overlay sits in the root of the DOM tree while the other content is buried in a separate DOM node tree. If anything inside of that tree is relatively positioned, the z-index can no longer be compared effectively. I tried with a number of values but it just doesn't work in this scenario: .modal-backdrop { z-index: 1040 !important; } .modal-dialog { margin: 2px auto; z-index: 1100 !important; } One workaround is to essentially force the modal out to the body tag with script. Since I trigger the modal in code anyway, it's easy enough to do the following: showEditor() { $("#EditModal").modal("show"); $("#EditModal").appendTo("body"); } This works - sort of. But... this has a nasty side effect as well: Because Angular re-renders the view every time it's accessed, a new #EditModal element is created each and everytime. After a few accesses the 'moved' elements start piling up on the bottom of the page: Not only that - this behavior also causes duplication of the the elements and on occasion causes the wrong data to come up. In my case, because I'm using Angular 2.0 and I control the code, I can fix this by clearing out the modal when I exit the view: showEditor() { $("#EditModal").modal("show"); $("#EditModal").appendTo("body"); } ngOnDestroy(){ $("body>#EditModal").remove(); } And this actually works. I get the modal that pops up and gets moved, and I can access it. When I leave the view the extraneous, moved DOM reference is cleaned up. This works in a pinch but it's[...]

Capturing Zoom Operations in the WPF Web Browser Control

Tue, 06 Sep 2016 04:55:14 GMT

If you need to capture Zoom operations in the Web Browser control - either to avoid letting hte user zoom or to capture the zoom operation and take action on it - you need to dig into the Web Browser's DOM events to capture the scroll wheel and key events. In this post I describe how you can do just that by looking at an application that captures scrolling and rather than zooming adjusts the font size of the content.(image)

Detecting and Setting Zoom Level in the WPF WebBrowser Control

Mon, 22 Aug 2016 10:25:01 GMT

Zoom level detection in the Web Browser control is a pain and in this article I describe one approach I used to both capture the current Zoom level in order to adjust font sizes, and then also explicitly set the Zoom level in the Web Browser control of a WPF application.(image)

Moving to Lets Encrypt SSL Certificates

Sat, 09 Jul 2016 22:18:32 GMT

This week marks the expiration of my last paid for SSL certificates and moving all certificates to Lets Encrypt. In the process I had a chance to moving some of my smaller personal and hobby sites as well as moving my wildcard cert for the main site. In this post I'll describe the process I'll describe what tools I used and the process I went through to gradually move my sites over to Lets Encrypt.(image)

First Steps: Exploring .NET Core and ASP.NET Core

Thu, 30 Jun 2016 02:30:51 GMT

In this post I'll demonstrate how to get started with .NET Core and ASP.NET using the Command Line Tools. I'll create a few very simple projects and starting with a plain console application, show how to hook up ASP.NET, run an API and MVC app and then run the app locally on Windows and then move it over to run on the Mac. This is not meant to be your typical getting started tutorial that jumps right into Visual Studio and creating a Web project from there. Rather, the purpose of this post is to demonstrate some of the core underpinnings of how .NET Core and ASP.NET Core projects are bootstrapped to run.(image)

ASP.NET Web Site Project Publishing and Changing ACLs

Wed, 29 Jun 2016 09:02:01 GMT

When publishing ASP.NET Web Site Projects, the project publish will overwrite server ACLs by clearing them to the inherited defaults and removing rights from common accounts. The result is that if you have custom ACLs set on the server they will be wiped by default. This occurs only on Web Site projects and in this post I remind myself of the .pubxml override setting that disables this default behavior(image)

Upgrading to ASP.NET Core RTM from RC2

Mon, 27 Jun 2016 22:04:29 GMT

I installed and upgraded an ASP.NET Core Sample application today and while the actual project upgrade process from RC2 was relatively easy, there were a few hiccups with installation and one of the breaking changes for the RTM release. In this post I'll go over some of the things I ran into and the workarounds.(image)

Use Powershell to bind SSL Certificates to an IIS Host Header Site

Fri, 24 Jun 2016 05:34:39 GMT

Managing SSL certificates on Windows has always been a pain in the ass and recently with the introduction of SNI to support multiple SSL certificates per site things have changed slightly in order to register certificates with IIS programmatically. In this post I show how to use PowerShell and the IIS WebAdministration snap in commands to create or import and register an SSL Certificate via the Command Line along with how this convoluted process works(image)

ASP.NET Core and .NET Core Overview

Mon, 13 Jun 2016 19:06:52 GMT

ASP.NET Core and .NET Core are almost here, with the RTM release scheduled for the end of this month. In this post I’m going to revisit the high level overview architecture of .NET Core and ASP.NET Core since so much has changed, to help you understand how the pieces fit together and what it means to develop on the new stack along with some personal thoughts on how I plan to approach all of this new tech in my own work.(image)

Publishing and Running ASP.NET Core Applications with IIS

Mon, 06 Jun 2016 11:19:08 GMT

If you plan on hosting ASP.NET Core applications on IIS, you'll find that the process to get your application to run is quite different than it was with classic ASP.NET. Because ASP.NET Core applications are essentially standalone Console applications that run outside of IIS, some special tooling and new publishing tools are required to get your apps up and running on Windows Server. In this post I'll give an overview of the architecture and show you how to deploy your ASP.NET Core applications using IIS on Windows Server.(image)

IIS Channel Listener Errors in Windows 10 Insider Build 14342

Tue, 31 May 2016 00:17:27 GMT

After installing Insider Build 14342 I ran into some major issues with IIS crashing hard and resulting in stopped Application Pools. After some tracking it turns out this is due to application pool bitness which causes 32 bit Application Pools to crash for me.(image)

Windows Updates and Lost Software Licenses and Activations

Mon, 30 May 2016 06:27:50 GMT

Windows Updates often hose Software Activations and Licenses for various commercial software packages. It's a pain in the ass and it's time to let those vendors that use the outdated practice of counting activations based on Windows OS criteria is no longer viable.(image)

Strongly Typed Configuration Settings in ASP.NET Core

Mon, 23 May 2016 10:42:45 GMT

ASP.NET Core provides built-in support for using strongly typed classes to represent configuration information. The configuration system provides a flexible mechanism for using different configuration storage providers and mapping those providers to your strongly typed objects. In this post I show how to set up strongly typed resources and use them in your ASP.NET Web applications.(image)

Using Westwind.Globalization to edit loose RESX Files

Wed, 18 May 2016 20:32:54 GMT

Although Westwind.Globalization is primarily aimed at Web applications, you can also use it to edit arbitrary RESX files using the Localization Administration interface that comes with the library. In this post I show how you can import RESX resources, then use the editor to manipulate RESX resources interactively, and then export the resources back out, using a local Web application on your machine.(image)

Creating Single Instance WPF Applications that open multiple Files

Fri, 13 May 2016 12:34:20 GMT

If you're building document centric applications, Singleton style EXE applications are pretty common. Rather than creating new windows for each opened file, a more common scenario is to open new tabs in a single instance. In this post I'll describe how to create a WPF application that allows only a single instance to run and passes command line arguments passed in secondary instances to the primary instance and I'll describe some pitfalls that you might have to watch out for.(image)

Getting 'motivated' to move to SSL and HTTPS

Mon, 09 May 2016 23:43:28 GMT

The pressure is on: HTTPS is pushed front and center more and more as we see the browser vendors and API tools providers, making SSL encryption no longer an optional part for many things that you build on the Web. SSL and HTTPS are becoming a requirement and for good reasons. I personally ran into this with the Google Maps API in one of my applications that now requires an HTTPS based client page in order to use this API. In this post I discuss some of the issues and why this is actually a good thing, and some of the steps I took to move my existing site to HTTPS.(image)

Windows 10 Bash Shell Network Connectivity not working?

Wed, 13 Apr 2016 22:41:53 GMT

When trying out the Windows 10 Bash on Ubuntu shell, I ran into several problems with networking. Turns out that there are issues with IPv6 and by swapping or removing the IPv6 nameserver entries with IPv4 versions connectivity can be restored back.(image)

Google AdSense for AJAX Content

Sat, 09 Apr 2016 10:39:33 GMT

I recently redesigned one of my Web sites to use dynamic page re-loading for additional page content, which broke the original AdSense ad code. In this post I'll describe how to get AdSense ads to work with AJAX loaded content by explicitly calling Googles ad code from your dynamic navigation code.(image)

Configuring ASP.NET and IIS Request Length for POST Data

Wed, 06 Apr 2016 10:05:19 GMT

One of the most infuriating things about IIS configuration in general is how the Request length is configured in the IIS and ASP.NET. There are several places that control how much content you can send to the server and over the years this setting has changed in a number of ways. The places where it's configured is not super obvious and they can be fluid because some of these features are...(image)

Custom Message Formatting in WCF to add all Namespaces to the SOAP Envelope

Sat, 02 Apr 2016 10:55:59 GMT

Over the last few days I've been fighting with a Web Service that does not allow inline namespaces which WCF copiously uses by default in its generated service proxies. In this post I describe how to create a custom message formatter add namespaces explictly to the SOAP envelope.(image)

Reversing Sort Order on DOM Elements using jQuery

Thu, 24 Mar 2016 12:57:33 GMT

When creating list content in Web pages, it's often quite useful to allow users to sort or reverse the order of items displayed. Creating client side sortable lists is easy to do and in this post Rick shows an easy way to make a list reversible using jQuery.(image)

Code Magazine Article: Flexing your HTML Layout Muscles with Flexbox

Thu, 03 Mar 2016 12:34:15 GMT

Flexbox is a relatively new CSS based technology that makes it much easier to create structured layouts with HTML and CSS. Based on a containership hierarchy, Flexbox combines the structured features of tables with the free form layout capabilities of arbitrary HTML elements that make it possible to create complex , yet flexible HTML designs much more easily that was otherwise possible. My article in CoDe Magazine describes the reasons for Flexbox, the basics of operation and few practical examples you can use today to put flexbox to use.(image)

Registering and Unregistering a VSIX Extension from the Command Line

Wed, 02 Mar 2016 01:30:53 GMT

If you use VSIX extensions and you need to install them as part of an installation script, you can use the VSIX Installer executable that ships with Visual Studio to control the install and uninstall process.(image)

Using Let's Encrypt with IIS on Windows

Mon, 22 Feb 2016 21:17:17 GMT

Let's Encrypt is a new, open source certificate authority for creating free SSL certificates. In this post I show you how you can use some of the API clients on Windows to create Let's Encrypt certificates for use in IIS.(image)