Styling

Question

User-1499457942 posted

Hi

 I want that Error messages color should be red & Bold and it should be in centre horozontally in all Content Pages. . I have defined errors in below div tag

<div class="col-sm-9 error">

<div class="form-group row">
        <label for="Code" class="col-sm-1 col-form-label">Code</label>
        <div class="col-sm-2">
            <asp:TextBox ID="txt_Code" CssClass="form-control" runat="server"></asp:TextBox>
        </div>
        <div class="col-sm-9 error">
             <asp:RequiredFieldValidator ID="rfvtxt_Code" runat="server" ErrorMessage="Code cannot be empty!" Display="Dynamic" ToolTip="Enter Code" ControlToValidate="txt_Code"></asp:RequiredFieldValidator>
             <asp:RegularExpressionValidator ID="revtxt_Code" runat="server" ErrorMessage="Code can consist of alphabetical characters , spaces!" Display="Dynamic" ToolTip="Enter Alphabats
             " ControlToValidate="txt_Code" ValidationExpression="^[a-zA-Z'.\s]{1,10}$"></asp:RegularExpressionValidator>
        </div>
    </div>
    <div class="form-group row">
        <label for="Description" class="col-sm-1 col-form-label">Description</label>
        <div class="col-sm-2">
            <asp:TextBox ID="txt_Description" CssClass="form-control" runat="server"></asp:TextBox>
        </div>
        <div class="col-sm-9 error">
             <asp:RequiredFieldValidator ID="rfvtxt_Description" runat="server" ErrorMessage="Description cannot be empty!" Display="Dynamic" ToolTip="Enter Code" ControlToValidate="txt_Description"></asp:RequiredFieldValidator>
             <asp:RegularExpressionValidator ID="revtxt_Description" ErrorMessage="Description can consist of alphabetical characters , spaces!" runat="server" Display="Dynamic" ToolTip="Enter Alphabats
             " ControlToValidate="txt_Description" ValidationExpression="^[a-zA-Z'.\s]{1,10}$"></asp:RegularExpressionValidator>
        </div>
    </div>

Thanks

Answer 1

User1992938117 posted

try below <g class="gr_ gr_15 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="15" data-gr-id="15">css</g>

.error{
   font-weight: bold;
   color: red;
   align-content: center;
}

Answer 2

User-1499457942 posted

Hi

  On below line it shows message  align-content is not a known CSS property name

align-content: center; 

 Thanks

Answer 3

User1992938117 posted

That means this <g class="gr_ gr_9 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="9" data-gr-id="9">css</g> class is already defined in Custom.css, 

Either override that using "!Important" or update content of your existing class.

.error{
   font-weight: bold !important;
   color: red !important;
   text-align: center !important;
}

Answer 4

User-1499457942 posted

Hi Rajneesh

  I want text to be vertically Centered in Textbox , not horizontally

Thanks

Answer 5

User1992938117 posted

I would say that use Chrome Dev Tool and play with style the way you want, once done use the same style in your <g class="gr_ gr_74 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="74" data-gr-id="74">css</g> file.

https://developers.google.com/web/tools/chrome-devtools/css/ 

https://developers.google.com/web/tools/chrome-devtools/inspect-styles/