Rick Strahl's Weblog
Wind, waves, code and everything in between...
.NET • C# • Markdown • WPF • All Things Web
- The Markdown Editor for Windows
WebLog Posts in Category HTML
November, 2023 (2)
October, 2023 (2)
September, 2023 (2)
August, 2023 (2)
June, 2023 (1)
May, 2023 (3)
April, 2023 (4)
March, 2023 (1)
February, 2023 (4)
January, 2023 (3)
December, 2022 (1)
November, 2022 (1)
October, 2022 (1)
Visual Studio (54)
Web Services (19)
Web Api (16)
Sql Server (10)
Microsoft AJAX (8)
West Wind Ajax Toolkit (7)
Web Connection (7)
Entity Framework (6)
Internet Explorer (5)
Html Help Builder (5)
Markdown Monster (5)
Software Development (5)
Live Writer (5)
Source Control (4)
Help Builder (3)
Web Browser Control (3)
Visual Studio Code (2)
Web Development (2)
ASP.NET vNext (2)
ASP.NET Core (2)
.NET Standard (2)
Visual Studio (1)
ASP.NET Markdown (1)
Control Development (1)
Credit Card Processing (1)
Dynamic Types (1)
CSharp Dotnet (1)
WPF Windows (1)
VS Code (1)
Web Assembly (1)
Web Deployment Projects (1)
Web Design (1)
Preventing iOS Textbox Auto Zooming and ViewPort Sizing
April 17, 2023 - Maui, Hawaii
If you've build mobile Web applications that need to run on iOS Safari and on an iPhone you might have run into the problem of input fields 'auto-zooming' the display when the input field and popup keyboard get focus. The view zooms and doesn't return back to the unzoomed even after exiting the input field. In this post I describe why this happens in some scenarios, and a couple of ways you can work around this annoying iOS Web browser behavior.
February 16, 2023 - Maui, Hawaii
When using async events, it's important to understand how events work when called asynchronously. Specifically if you need to interact with the event context for things like preventDefault(), cancelBubble() or returning values that determine completion state, you need to be careful as these may have no effect if called after an `await` call.
UpperCase Styling via CSS and text-transform
February 09, 2023 - Maui, Hawaii
February 06, 2023 - Maui, Hawaii
HTML Table Cell Overflow Handling
January 26, 2023 - Maui, Hawaii
HTML table column wrapping and truncating doesn't work like other HTML elements. Specifically if you want to keep table column content from wrapping via `overflow` or `white-space` wrapping settings you'll find that tables just laugh in your face. Here's a quick post that describes table wrapping and text truncation issues and the hacky workaround.
Use CSS.escape() to escape QuerySelectorAll()
April 10, 2022 - Maui Time, Hawaii
Ran into an issue recently where a querySelector operation was failing in document link navigation when navigating hashes. There are a few issues at work when using Hash navigation but one issue i didn't expect to run into was a naming conflict of a hash tag that interfered with CSS operators. Turns out there's an easy solution around with with CSS.escape - if you can make the connection. In this post I talk about the problem how it might show up and how to fix it.
Using the brightness() CSS Filter to generically highlight Content
July 28, 2020 - Maui, Hawaii
Filters are not new in CSS, but their often overlooked for providing some useful generic behaviors for things like hover styling or nice background effects. In this post I discuss how to use the brightness() filter to create a generic button hover behavior and also briefly discuss the newish `backdrop-filter` property.
Fixing Adsense Injecting 'height: auto !important' into scrolled Containers
May 25, 2020 - Maui, Hawaii
Ran into a weird issue today with AdSense in one of my older Web sites. I noticed that the site was not using the custom scrolling in containers that I've been using for years. Turns out Google's AdSense on this page is injecting some extra styling that changes the scroll behavior - and the way the entire page works. Here's what the problem is and how you can work around it.
Live Reloading Server And Client Side ASP.NET Core Apps with BrowserSync
May 18, 2019 - Maui, Hawaii
January 21, 2019 - Maui, Hawaii
Creating an HTML Packager
November 01, 2018 - Maui, Hawaii
Recently I needed to add the ability to save HTML documents in Markdown Monster. Saving raw rendered Markdown is not really sufficient and so I set out to create an HTML packager that can package an HTML Web endpoint into a self-contained local package either as a single self-contained file, or an HTML document with all dependencies localized. In this post I discuss why this is needed and how to implement and use this library to capture HTML output in a few different ways.
Web Code is a solved Problem: How about fixing Web UI next?
May 31, 2018 - Hood River, Oregon
Flexing your HTML Layout Muscles with Flexbox
November 11, 2017 - Maui, Hawaii
Flexbox is a 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.
Google AdSense for AJAX Content
April 09, 2016 - Maui, HI
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.
AngularJs ng-cloak Problems on large Pages
June 02, 2014 - Hood River, OR
Angular supports the ng-cloak directive to address hiding initially unrendered template content. I found out the hard way that sometimes with very large pages this mechanism doesn't quite work and still results in slight page flicker of the unrendered template content. In this post I describe the problem and several easy solutions to get around it the edge case scenario.
January 06, 2014 - Maui, HI
HTML5 Input type=date Formatting Issues
November 08, 2012 - Maui, Hawaii
The new HTML5 Input types make it easier to display special formatted input types like dates and email addresses. Browsers that support them display a nice UI for editing and can validate values. However, support currently is limited and date formatting especially is complex as it involves using an ISO date format that doesn't fall back nicely to non-supporting browsers.
.NET HTML Sanitation for rich HTML Input
July 19, 2012 - Maui, Hawaii
If you need to sanitize raw HTML for display in Web applications, the job at hand is scary for .NET backends. Unfortunately it seems there aren't a lot of tools available to help in this formidable tasks and the tools that are tend to be inflexible to the point of often being unusable. In this post I show a base implementation of an HTML Sanitizer that can be customized for your own needs.
HTML 5 Input Types - How useful is this really going to be?
December 10, 2011 - Maui, Hawaii
The HTML 5 input controls enhancements seem like a nice feature - until you look a little closer and realize that that validation and styling these control enhancement use are likely going to interfere with your existing application logic and styling. Here are are some thoughts on the subject.
A Key Code Checker for DOM Keyboard Events
December 08, 2011 - Maui, Hawaii
jQuery Time Entry with Time Navigation Keys
November 30, 2011 - Maui, Hawaii
How do you display editable time values in Web applications? While date display has a pretty clear UI choice with date pickers, visual time picking isn't very efficient. In this post I show a keyboard based alternative to navigating and entering time (and date values) values using hotkeys hooked up through a jQuery plugin.
Building a jQuery Plug-in to make an HTML Table scrollable
May 28, 2011 - Hood River, Oregon
Table displays in limited space require some rendering alternatives. While paging is a common way to address fixed size displays, it's not an end-all solution. Sometimes it's necessary to display larger amounts of data in a small fixed space on an HTML page. Scrollable list are fairly easy to do with most HTML structures, but HTML tables are notoriously difficult to manage when it comes to scrolling. In this post I describe a jQuery plug-in that attempts to make any table scrollable by decomposing and reassembling the table into two distinct areas.
Restricting Input in HTML Textboxes to Numeric Values
April 22, 2011 - Maui, Hawaii
There are lots of examples limiting HTML textbox input to numeric values only but most examples fail to capture valid keys like navigation and edit keys properly so as to not interfere with normal textbox behaviors. Here's a simple plug-in that takes special keys into account.
Rounded Corners and Shadows – Dialogs with CSS
April 11, 2011 - Maui, Hawaii
CSS 3 provides for box-radius and box-shadow, two features that make it really easy to create attractive floating windows easily with native CSS. Here's what you need to know to create rounded corners and box shadows effectively.
Changing an HTML Form's Target with jQuery
January 30, 2011 - Chennai, India
jQuery UI Datepicker and z-Index
September 12, 2009 - Hood River, Oregon
The jQuery UI datepicker is a nice and easy to use datepicker control but if you're using it with other components that use absolute positioning you might run into issues with z-Index precendence. Here's a discussion of the problem and a couple of easy solutions around it.
Rounded Corner Rendering in newer Browsers
July 08, 2009 - Hood River, Oregon
An annoying IE position: Relative and OverFlow-Y Bug
May 11, 2009 - Maui, Hawaii
Ran into a real sneaky but that only shows up in pre-IE 8 standards mode versiosn of Internet Explorer. Any parent elements that contain child elements that have position: relative set cannot be contained in the parent container via overflow settings or even a fixed height, resulting in elements spilling out of the bottom of the container. It appears there's no direct workaround short of using a different approach to element positioning.
Browser Rendering Differences and Browser Resets
September 24, 2008 - Maui, Hawaii
As ASP.NET develoers it can be really easy to not pay attention to good CSS style layout practices. But CSS is vitally important especially when dealing with different browsers and consistent formatting. Using browser resets in particular is a big help in taking some of the pain out of cross browser rendering differences.
FireFox 3 and Static File Caching Problems
August 31, 2008 - Maui, Hawaii
FireFox 3.0 apparently is much more aggressive in caching content than previous versions of FireFox. While this is good for performance in many situations I've noticed that this is seriously becoming a problem in some of my applications where support files like scripts and CSS files get updated in applications and FireFox doesn't recognize those changes. The problem appears to be that FireFox is...
Forcing Client Windows to pop up as Windows in Tabbed Browsers
July 22, 2008 - Geneva, Switzerland
By default if you open a new window in Tab based browsers like FireFox 3 or IE 7 new windows pop up in new tabs. In most situations this is the desirable behavior, but sometimes it's in fact required to get a new window to pop up on the desktop and get it activated immediately.
July 07, 2008 - Murten, Switzerland
A jQuery Client Status Bar
June 13, 2008 - Murten, Switzerland
Status bars are very useful in client applications to display well status information and having a reusable and easily callable and configured status component to display messages is extremely handy. Here's an implementation that uses jQuery plus a bit of CSS to make short work of displaying status content.
Unwanted Padding in IE Image Rendering in div Tag
June 05, 2008 - Zurich, Switzerland
I've repeatedly run into an issue where putting an image inside of a div tag as its only content causes IE to render a bit of padding that shouldn't be there. No problem in other browsers, but definitely an issue in IE.
:hover behavior in IE 7
May 13, 2008 - Geneva, Switzerland
Ran into an odd problem today with :hover CSS styling that wouldn't work in IE 7. It turns out that I accidentally wiped out my doctype, but even after restoring the doc type I still ended up with problems in large lists.
Customized Loading... Images
April 27, 2008 - Hood River, Oregon
Here's a cool site that provides a number of different Ajax loading images that you can use in your apps: http://www.ajaxload.info/ What's cool about this thing versus some other sites that have many of these same images is that this is actually a dynamic app that lets you completely customize foreground and background colors including background colors which is great if you need to stick...
Absolute Positioning inside of a Relative Element with CSS
March 28, 2008 - Maui, Hawaii
Getting elements positioned absolutely inside of a container is not terribly obvious and not very discoverable using CSS. But it can make for a cool effect and is a useful feature for many overlay type operations in Html markup. Here's an example of a hover over delete button that pops up on focus of an element.
Cross Domain Support in IE 8 and Silverlight/Flash Applications
March 16, 2008 - Maui, Hawaii
Peter Bromberg posts a quick note about the IE 8 Cross Domain Request object which allows making cross domain calls from within the browser. If you'll recall traditionally the XmlHttp object now standard in all main stream browsers does not explicitly support cross domain calls, which are blocked for security reasons. What's a real pisser about this though is that there are other ways to make...
Firefox 3.0 XmlHttpRequest Default Content-Type change
March 12, 2008 - Maui, Hawaii
I ran into a small problem with some of my AJAX code that's checking content-type on inbound requests from the client - it looks like FireFox 3.0 is now including the charset on the content type from the client on POST operations which if not explicitly checked for can break existing code expecting only to see a content type. Small issue, but easy to miss especially in framework code like mine that frankly should have been prepared for this...
Sensible Debugging in IE 8
March 06, 2008 - Maui, Hawaii
One thing that caught my attention in the IE 8 notes and that eventually made me download and install it is that it will feature the Developer Toolbar which has been an add-in for previous IE versions as a built in tool. Not only that but IE 8 includes a very FireBug-like debugger that can be easily hooked up to page content. This is a very worthwhile improvement IMHO because the debugging...
IE 8 to support Standards Mode out of the Box - Yay!
March 04, 2008 - Maui, Hawaii
Microsoft announced today on the IE Blog that IE 8 will run in high standards mode by default, which is a complete about face from the previous position that was going to require special meta-tag headers to force the browser to run this way. This is an unexpected, but very welcome turn of events and brings some hope that we'll in our lifetime will have a version of IE that is compliant with the remainder of the browser world.
February 08, 2008 - Maui, Hawaii
December 27, 2007 - Maui, Hawaii
.NET 3.5 includes a new DataContractJsonSerializer that makes it real easy for serializing and deserializing .NET objects to and from JSON. This post shows code for simple serialization and deserialization as well as discussion of some of the features and limitations.
Creating a scrollable and grouped Repeater Layout
August 23, 2007 - Hood River, Oregon
A couple of people asked me today about a layout I put together for an application. The layout is bascially a scrollable and grouped repeater that looks a little like a ListView control in WinForms. This sort of layout can be great for longer lists when paging is not really the right choice - a common scenario in AJAX applications actually. Here's a quick walk through on how this layout is put together.
JSONP for cross-site Callbacks
July 04, 2007 - Hood River, Oregon
Images as Style Attributes
June 29, 2007 - Hood River, Oregon
Here's a little tip that I started using more frequently recently that involves images. When embedding images into pages you're often inclined to use an IMG tag or an ASP.NET image control. In some situations though - especially if the same image repeats on the page - it can be much more efficient...