[Solved] CSS styles not applied inside form runat='server' in ASP.Net

Last Reply 10 months ago By dharmendr

Posted 10 months ago

I have a mix of asp.net and html cotrols of a web forms page. Using VS2017 with C#, html template with css stylesheet. the asp.net controls require the inclusion of <form runat="server"> The moment I include this the css does not work properly. Some formatting does have but items like html column background is ignored or appears trasparent. I am including a snippet of the html column and css Please help. rgs

   <form runat="server">
  <div class="row">
    <div class="col-xs-12 custom-411-col-xs-12 column-19">
      <h6 class="heading-9"><span class="heading-text-11">Select Category</span>
      </h6><select class="select drop-down-1" id="SelectCustomerSite"><option>Option 1</option><option>Option 2</option><option>Option 3</option></select>
    </div>
    <div class="col-xs-12 custom-411-col-xs-12 column-20">
      <h6 class="heading-9"><span class="heading-text-12">Manufacturer</span>
      </h6><input value="" name="text-name" type="text" id="CustomerSiteNumber">
    </div>
body > .row > [class*='col-xs-'].column-19 {
    background-color: #d9cfcf;
    text-align: center;
}

body > .row > [class*='col-xs-'].column-20 {
    margin-top: 0;
    margin-bottom: 0;
    background-color: #d9cfcf;
    text-align: center;
}

 

You are viewing reply posted by: dharmendr 10 months ago.
Posted 10 months ago

Hi Harties,

Change your css with the below. As per your css its trying to find row class inside body tag. But row class is inside form tag and form tag inside body tag.

CSS

<style type="text/css">
    body .row > [class*='col-xs-'].column-19
    {
        background-color: #d9cfcf;
        text-align: center;
    }
        
    body .row > [class*='col-xs-'].column-20
    {
        margin-top: 0;
        margin-bottom: 0;
        background-color: #d9cfcf;
        text-align: center;
    }
</style>