Align radio buttons with label on one line

Uncategorized Leave a comment

Use relative positioning for the input element and correct the top position of the input, based on the line-height of the element containing the input element.

image

<!DOCTYPE html>
< html>
< head>
    <meta charset="UTF-8">
    < title>Align radio button with label on one line</title>
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
   
    <!–<link rel="stylesheet" href="plain.css">
    <script type="text/javascript" src="plain.js"></script>–>
    <style>
        .radio-container {
            box-sizing: border-box;
            font-family: ‘Open Sans’, sans-serif;
            font-size: 13px;
            line-height: 30px;
            margin: 0;
             outline: 0;
            overflow: hidden;
            padding: 0;
        }

        .radio-container input {
             box-sizing: border-box;
            margin: 0;
            outline: 0;
            padding: 0;
            position: relative;
            top: 9px;
            vertical-align: top;
         }
    </style>
< /head>
< body>
    <h1>Align radio button with label on one line</h1>
    <div class="radio-container">
         <input name="red" type="radio" value="red" checked="checked">
        red
        <input name="green" type="radio" value="green">
        green
        <input name="blue" type="radio" value="blue">
        blue
    </div>
< /body>
< /html>

Fix favicon error

Uncategorized Leave a comment

When there is no favicon.ico in the root of your website, then the browser will automatically get a 404 favicon error.
To prevent this error, you can add a transparent favicon.ico to the “head” tag of your HTML page:

<link rel="icon" href="data:;base64,iVBORw0KGgo=">

 

image

How to create a triangle with pure CSS and HTML

Uncategorized Leave a comment

This post describes in 3 examples, how you can create a triangle with pure CSS and HTML.

 

clip_image001[4]

 

HTML
<br />
Example 1
<br />
<br />
<div class="example1"></div>

<br />
Example 2
<br />
<br />
<div class="example2"></div>

<br />
Example 3
<br />
<br />
<div class="example3"></div>

CSS
.example1 {
    height: 40px;
    width: 40px;
    border-left: 10px solid blue;
    border-right: 10px solid blue;
    border-bottom: 10px solid #000000;
    border-top: 10px solid #000000;
}

.example2 {
    height: 20px;
    width: 20px;
    border-left: 10px solid blue;
    border-right: 10px solid blue;
    border-bottom: 10px solid #000000;
    border-top: 10px solid #000000;
}

.example3 {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #2f2f2f;
}

How to show html embeded inside JSON to the user with AngularJS and ngSanitize.

Uncategorized Leave a comment

 

image

 

I want to show HTML to the user, that was stored in a SQL Server Database. The data was queried from the SQL Server Database by using Entity Framework, then the C# model was converted to JSON, by using JSON.net and send to the browser by the ASP .NET web api service.

To show this HTML to the user with AngularJS, I used ngSanitize and the ng-bind-html directive:

(at this moment plunker is down, so I will edit this post in the future to add a plunker).

 

If the HTML contains angular bindings / directives, you can use the compile service to bind the scope to the html fragment:

https://docs.angularjs.org/api/ng/service/$compile

So instead of using the ng-bind-html, you can use this directive:

https://github.com/incuna/angular-bind-html-compile/blob/master/angular-bind-html-compile.js

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="spike">
<head>
    <!-- Why is angular added to the html tag? Because IE8 won't work without it. -->
    <title>Spike page</title>
    <meta charset="utf-8">
    <!-- Why is "edge" used? Because we want the highest support for modern standards. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Library scripts -->
    <!--<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-sanitize.min.js"></script>

    <!-- Live reload script with grunt. -->
    <!--<script src="http://localhost:35729/livereload.js"></script>-->

    <!-- App styles -->
    <style>
        /*
            A small custom reset stylesheet is used, to fix style differences between browsers.
        */
        html, body
        {
            height: 100%;
        }

        body, div, p, ul, li, button
        {
            border: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            font-family: "Open Sans", sans-serif;
            margin: 0;
            outline: 0;
            padding: 0;
        }

        body
        {
            background-color: #F1F1F1;
            padding: 20px;
        }

        .spike-title
        {
            color: #393939;
        }

        .spike-content
        {
            color: #393939;
        }
        .spike-content-with-class
        {
            color: #ff0000;
        }
    </style>

    <!-- App scripts -->
    <script>

        (function ()
        {
            "use strict";

            var app = angular.module("spike", ["ngAnimate", "ngSanitize"]);
        }());

        (function ()
        {
            "use strict";

            var app = angular.module("spike");

            var controller = function ($scope)
            {
                $scope.title = "How to show html embeded inside JSON to the user with AngularJS and ngSanitize.";

                var json = '{ \"html\":\"<br><br><p>Some html in JSON.</p><br><br><p class=\"spike-content-with-class\">Some html in JSON with a class attribute.</p>\" }';
                var content = JSON.parse(json);

                $scope.content = content.html;
            };

            app.controller("main", ["$scope", controller]);
        }());
    </script>
</head>
<body>
    <div ng-controller="main">
        <h2 class="spike-title">{{ title }}</h2>
        <div class="spike-content" ng-bind-html="content"></div>
    </div>
</body>
</html>

Variable sized column with ellipsis in a table

Uncategorized Leave a comment

If you want a column of a table in HTML to expand and you want the text to show "ellipsis" for overflowing text, you can use the solution found at:

 

http://stackoverflow.com/questions/17345158/variable-sized-column-with-ellipsis-in-a-table

 

Just give each cell for the specific column the following class:

.expand-column
        {
            max-width: 1px;
            overflow: hidden;
            -ms-text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

How to preserve leading spaces in a DropDownList in HTML and C#

Uncategorized Leave a comment

If you want to show a hierarchy of data in a DropDownlist by using spaces in front of each item, then you will find that normal spaces don’t work, instead use &nbsp; and Server.HtmlDecode().

 

 

namespace WebApplication1
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DropDownList1.Items.Clear();
            DropDownList1.Items.Add("Level 1");
            DropDownList1.Items.Add("  Level 2");
            DropDownList1.Items.Add("    Level 3");
            DropDownList1.Items.Add("      Level 4");
        }
    }
}

No hierarchy!!!

 

image

 

namespace WebApplication1
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DropDownList1.Items.Clear();
            DropDownList1.Items.Add(Server.HtmlDecode("Level 1".Replace(" ", "&nbsp;")));
            DropDownList1.Items.Add(Server.HtmlDecode("  Level 2".Replace(" ", "&nbsp;")));
            DropDownList1.Items.Add(Server.HtmlDecode("    Level 3".Replace(" ", "&nbsp;")));
            DropDownList1.Items.Add(Server.HtmlDecode("      Level 4".Replace(" ", "&nbsp;")));
        }
    }
}

Now with hierarchy!!!

 

image

Best practices for using relative paths in CSS, HTML and ASP .NET

Uncategorized One Comment

In many cases, elements or controls on your page must refer to an external resource such as an image or another *.aspx file. To refer to these resources I prefer to use relative paths, because on my development machine the URL might be http//:localhost but on the production machine the URL might have a host header, like http://mywebapp.roelvanlisdonk.nl. or an other port like http://localhost:81.

When using relative paths there are two kinds of elements

  • Not web server controls like (html tags, css statements etc.)
  • Web server controls (ASP .NET server controls)

Not web server controls (html tags, css statements etc.)

Always start an URL with a "/", no matter where you are in the tree structure, this relative URL will always work

  • "/Images/Logo.png"
  • <img alt="Logo" src="/Images/Logo.png" />

Don’t use:

  • "../" like "../Images/Logo.png"
  • "no slash at all" like "Images/Logo.png"

 

Web server controls

Always start an URL with a "~/"

  • "~/Images/Logo.png"
  • Response.Redirect("~/Pages/MyPage.aspx");
  • <asp:HyperLink ID="HyperLink1" runat="server" navigateUrl="~/Pages/Default.aspx">Test HyperLink</asp:HyperLink>

Don’t use:

  • "/" like "/Images/Logo.png"
  • "../" like "../Images/Logo.png"
  • "no slash at all" like "Images/Logo.png"

 

See: http://msdn.microsoft.com/en-us/library/ms178116.aspx