locked
Metro style TextBox in Asp.Net 4.0 ? RRS feed

  • Question

  • Hi. I must create a web site in Asp.Net 4.0.  And I am trying to make it using CSS. So far I have created smth like that:

    And now I want to add textbox. But i want to make it also in metro style. Smth like this:

    How can i achieve that? Thanks. Any other advice about Metro Style Web Site will be appreciated.


    Ferhad Jabiyev

    Saturday, July 21, 2012 1:22 PM

Answers

  • HI

    Do you mean you want to apply the specific CSS to your ASP.net web form textbox and make it like the textbox in metro style?

    Windows Library for JavaScript provides two default style sheets that you can use to give your app the Windows 8 look and feel: ui-dark.css and ui-light.css.

    1 create a metro style javascript/html app.

    2 open the ui-dark.css(In reference->Windows Libarary for javasCript 1.0RC->CSS->ui-dark.css)

    3 search for "Text input controls"

    Then you will get the css style for the textbox.

    Code Like this:

    input[type=text], input[type=password], input[type=email], input[type=number],
    input[type=tel], input[type=url], input[type=search], textarea, .win-textarea {
        -ms-user-select: element;
        min-height: 28px;
        min-width: 64px;
        margin: 4px 0;
        border-width: 2px;
        border-style: solid;
        background-clip: padding-box;
        font-size: 11pt;
        font-weight: 400;
        line-height: 1.3636; /* 20px when font-size is 11pt */
    }
    input[type=text], input[type=password], input[type=email], input[type=number],
    input[type=tel], input[type=url], input[type=search] {
        width: 276px;
        padding: 0;
    }
    input::-ms-value {
        margin: 4px 8px;
    }
    textarea, .win-textarea {
        overflow-y: scroll;
        word-wrap: break-word;
        padding: 4px 8px;
        /* Leave space for autohiding scrollbar on elements that enable text selection. */
        padding-right: 17px;
    }
    textarea:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm), .win-textarea:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
        /* Flip sides for autohiding scrollbar padding on RTL layouts. */
        padding-right: 8px;
        padding-left: 17px;
    }
    textarea {
        min-width: 260px;
        min-height: 39px;
    }
    .win-textarea {
        width: 260px;
        height: 39px;
    }
    If you want you application like metro style you can copy the ui-dark.css code to you Style sheet.
    Monday, July 23, 2012 12:35 PM

All replies

  • HI

    Do you mean you want to apply the specific CSS to your ASP.net web form textbox and make it like the textbox in metro style?

    Windows Library for JavaScript provides two default style sheets that you can use to give your app the Windows 8 look and feel: ui-dark.css and ui-light.css.

    1 create a metro style javascript/html app.

    2 open the ui-dark.css(In reference->Windows Libarary for javasCript 1.0RC->CSS->ui-dark.css)

    3 search for "Text input controls"

    Then you will get the css style for the textbox.

    Code Like this:

    input[type=text], input[type=password], input[type=email], input[type=number],
    input[type=tel], input[type=url], input[type=search], textarea, .win-textarea {
        -ms-user-select: element;
        min-height: 28px;
        min-width: 64px;
        margin: 4px 0;
        border-width: 2px;
        border-style: solid;
        background-clip: padding-box;
        font-size: 11pt;
        font-weight: 400;
        line-height: 1.3636; /* 20px when font-size is 11pt */
    }
    input[type=text], input[type=password], input[type=email], input[type=number],
    input[type=tel], input[type=url], input[type=search] {
        width: 276px;
        padding: 0;
    }
    input::-ms-value {
        margin: 4px 8px;
    }
    textarea, .win-textarea {
        overflow-y: scroll;
        word-wrap: break-word;
        padding: 4px 8px;
        /* Leave space for autohiding scrollbar on elements that enable text selection. */
        padding-right: 17px;
    }
    textarea:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm), .win-textarea:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
        /* Flip sides for autohiding scrollbar padding on RTL layouts. */
        padding-right: 8px;
        padding-left: 17px;
    }
    textarea {
        min-width: 260px;
        min-height: 39px;
    }
    .win-textarea {
        width: 260px;
        height: 39px;
    }
    If you want you application like metro style you can copy the ui-dark.css code to you Style sheet.
    Monday, July 23, 2012 12:35 PM
  • But i am using VS 2010. Could i do it with vs2010?

    Ferhad Jabiyev

    Wednesday, July 25, 2012 12:36 PM
  • Hi Ferhad,

    The CSS style sheet does not have anything to do with your version of Visual Studio.  The style you apply needs to be supported by the browser hitting your web site.  I am going to lock this thread since your questions are not about Metro style apps.  You can get further help understanding Visual Studio in that forum by posting there ( http://social.msdn.microsoft.com/Forums/en-US/category/visualstudio ).  You can get assistance with Internet Explorer by posting there: http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/threads

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, July 25, 2012 2:43 PM
    Moderator