Adding Dropdown Arrow for Chosen Plugin in Multiselect Mode

I use the jQuery Chosen plugin in a web application, and recently got the request to display a dropdown arrow in multiselect mode.

I found an answer on SO regarding styling of the dropdown arrow, but that covered only singleselect mode. At least a starting point 😉

Within minutes, I had a CSS-only solution for this particular problem:

<style type="text/css">
.chosen-container-multi.chosen-container .chosen-choices::after {
    background: url(@Url.Content("~/Content/chosen-sprite.png")) no-repeat 3px 4px;
    width: 16px;
    height: 100%;
    content: " ";
    position: absolute;
    right: 0;
    background-color: lightgray;
}
</style>

(Note that this is an ASP.Net MVC application, and @Url.Content() computes the URL relative to application root.)

Only after I solved this, I found that there is a closed (and unresolved) issue on github from 2011, with comments up to 2016, but no solution to a valid feature request…

Emoticon Selection in ASP.Net MVC

I had to implement a good/bad/neutral selection UI in an ASP.Net MVC application.

This simple task turned out to be rather cumbersome, given different browsers implementing different things differently, and the MVC framework restricting access to generated markup.

I first thought about a DropDownList (i.e.) rendering a set of emoji, only to find

• you cannot pass a C# emoji as SelectListItem.Text

new SelectListItem {Text = "\u1F60A" }

• you cannot add the emoji HTML entity 😊 astext (at least not in Chrome)
• you cannot add a @class parameter to SelectListItem
• you cannot add a background-image:url() definition to an
• you cannot add HTML tags inside an(
  except for Firefox

  )

However, I found code to overcome the limitations of SelectListItem, either by copying and extending code from the MS MVC framework, or by XML manipulation of the built-in HTML generator.

Maybe the dropdown list was just the wrong path to follow, so I searched for ways to style radiobuttons, and found this nice demo on codepen.

I modified the demo to fit my needs, and voilà, here’s my first codepen:

A radiobutton-based emoji selector

Update: Apparently, IE does not render an <img> inside a <label> clickable, unless you specify pointer-events: none.

Fixed layout, variable layout, or something completely different?

If you are working on a web application, sooner or later you come across the question of layouting your pages, and you’ll notice that there are a couple of (accepted) choices:

• Variable (fluid, full-window) layout

• Fixed layout (centered or not centered)

• Elastic layout (what??)

Full-window layout is most likely the simplest and earliest web layout. If you create a plain HTML page, the contents will take up the whole width of the browser window. You’ll notice this if you browse pages from the early days of the web, and it’s immediately obvious that text written in long lines is very hard to read on a screen. (Try reading Wikipedia in a full-screen window on 1920 pixels – you soon feel the need to resize the browser window)

Given its age, it is surprising (or rather disturbing?) that the full-window layout is still promoted in current web development environments, as the ASP.Net MVC default page layout is defined in Site.css as

.page
{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

meaning 5% of the window width as margin on the left and right side of the content. (All other measures in the CSS file are given in pixels (px) or relative to font height (em)).

In contrast, sites such as WordPress or online newspapers use a fixed layout. Fixed layout makes it easier to arrange the page elements in a grid independent of the browser’s window size. (Note that while most WordPress templates use fixed layout, the admin pages are full-screen with fixed and variable columns)

As a reaction to both the question fixed-vs-variable and the increasing multitude of web-enabled devices from HD monitors (or bigger) to smartphones, the latest trend in web design is called Responsive or Elastic.

Responsive layout is typically implemented using CSS3 Media Queries which allows the definition of page and page elements styles based on properties of the output format. They make it possible for a browser supporting media queries to apply the CSS styles definition based on window width, so that a text may be layouted full-screen on small displays, and in columns or fixed-width on larger displays.

For more discussion on the topic, visit Smashing UX Design (using responsive layout itself) or the User Experience StackExchange site. CSSGrid.net also implements a 1140px responsive layout.

• Is there a usability reason for centering a website’s content area on a page?
• Best fixed-width website size
• fixed-width vs full-browser for web app
• For websites, is it better to have a variable width layout or a fixed width layout?
• What are some reasons that not all websites have fluid layouts?
• Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?

Enjoy resizing 😉

Embedding Dynamic CSS in Asp.Net

There are many questions on SO on dynamically generating or applying CSS in ASP.Net or ASP.Net MVC.

Today I accidentally found a simple way to embed dynamic CSS in an aspx file:

in the markup, add runat=”server” to the <style> tag

<style type=”text/css”runat=”server”id=”htmlCss”></style>

This will generate a field of type HtmlGenericControl in the page.

In one of the page life-cycle events (Page_Load, Page_Init, etc), assign the literal CSS definition like this:

var css = @"
body
{
  background-color:#b0c4de;
}";
htmlCss.InnerHtml = css;

Disabling Submitting Control in ASP.Net

If you want to disable the control triggering form submission in ASP.Net, two modes need to be distinguished.

If you use AjaxControlToolkit and the control is placed inside an UpdatePanel, you need to hook into the ScriptManager’s BeginRequest and EndRequest events, as shown in this blog post.

If the form uses the standard HTML Post functionality, you may think about disabling the triggering control in the onsubmit event of the form. However, a disabled button cannot submit a form in ASP.Net, even if it is disabled only in the onsubmit event handler.

I found this article describing the problem and the solution is to have a <div> which is initially invisible, and will be displayed in front of the form on submitting by setting its z-index and opacity.

In my solution, however, I chose not to set a fixed opacity for the hiding div (and thus instantaneously dimming the input form), but rather slowly increase the opacity in a timer.

Based on the original article, here is my solution:

<style type="text/css" >
.FreezePaneOff
{
      visibility: hidden;
      display: none;
      position: absolute;
      top: -100px;
      left: -100px;
}

.FreezePaneOn
{
      position: absolute;
      top: 0px;
      left: 0px;
      visibility: visible;
      display: block;
      width: 100%;
      height: 100%;
      background-color: #666;
      z-index: 999;
      filter:alpha(opacity=0);
      opacity:0.0;
      padding-top: 20%;

      font-size: 48px;
      font-weight: bold;
      text-align: center;
}
</style>

<script type="text/javascript">
    var oldSubmit = theForm.onsubmit;
    var opac = 0.0;

    function NewSubmit() {
        var o = true;
        if (oldSubmit) {
            o = oldSubmit();
        }
        if (o) {
            document.getElementById('freeze').className = "FreezePaneOn";
            setTimeout("fadeout()", 100);
        }
        return o;
    }

    function fadeout() {
        opac += 1.0;
        if (opac >= 70)
            return;

        var f = document.getElementById('freeze');
        f.style.opacity = opac / 100.0;
        f.style.filter = "alpha(opacity=" + opac + ")";

        setTimeout("fadeout()", 100);
    }

    theForm.onsubmit = NewSubmit;
</script>

CSS Link List

In a web application with its custom CSS that also defined hyperlinks, Internet Explorer would render disabled hyperlinks greyed-out, whereas Firefox showed them as normal text.

Tracking down this different behavior, I found that you can define CSS styles not only by class and tag, but also by attributes using the [attribute] notation:

*[disabled], a[disabled]:hover, a[disabled]:visited
{
color:gray;
}

If you are looking for CSS definitions for fixed headers, footers and sidebars, take a look at these sample CSS. I’m thinking about including them in the next version of dbscript.