locked
ASP.NET page CSS styles load in Visual Studio but not on browser RRS feed

  • Question

  • User378096647 posted

    For this ASP.net web form project, I created a Default.css for the Default.aspx so I can write the style separately. I was able to change the width of the search bar in the split screen, and it show me exactly what I want, but when I load this on Chrome does not do anything. but if I copy the textbox code from default.aspx to Site.master it will change the style in both split screen and on Chrome. Can someone tell me why is doing anything with the first method? Is this a bug?

    Site.Master

    <%@ Master Language="VB" AutoEventWireup="true" CodeFile="Site.master.vb" Inherits="SiteMaster" %>
    
    <head runat="server">
    <meta charset="utf-8" />
    <title><%: Page.Title %> - My ASP.NET Application</title>
    <asp:PlaceHolder runat="server">    
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:BundleReference runat="server" Path="~/Content/css" /> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link href="~/content/default.css" rel="stylesheet" type="text/css" />
    <meta name="viewport" content="width=device-width" />
    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
    <div id="body">
        <%-- Link up with the asp:content in Default.aspx --%>
        <asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
        <section class="content-wrapper main-content clear-fix">
            <%-- Default Main Body Content --%>
            <asp:ContentPlaceHolder runat="server" ID="MainContent" />
        </section>
    </div>

    Default.aspx

    <asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>Report Titial is showing hererererere</h1>
            </hgroup>
            <asp:TextBox ID="TB_Search" runat="server" AutoPostBack ="true">Search...</asp:TextBox>
            <asp:Button ID="Btn_Search" runat="server" Text="Button" />
        </div>
    </section>

    Default.css

    #TB_Search
    {
        width: 515px;
    }

    Wednesday, January 29, 2020 6:25 PM

All replies

  • User475983607 posted

    Sever control IDs are dynamic and dependent on nesting.  If you take a look at the HTML, right click the input and select inspect,  you'll see TB_Search Id is renamed to include the master page.

    Use the CssClass attribute or change to a wildcard selector.

    input[id*="TB_Search"]
    {
        width: 515px;
    }

     

    Wednesday, January 29, 2020 7:35 PM
  • User-1610231632 posted

    Set the ClientIDMode property of your textbox control to "Static" and the id of your textbox will stay the same as you named it... 

    <asp:TextBox ID="TB_Search" runat="server" AutoPostBack ="true" ClientIDMode="Static">Search...</asp:TextBox>



    Friday, March 6, 2020 5:03 PM