Adjusting label color to adapt with background color with ColorPickerExntender

Donald Symmons 2,861 Reputation points
2023-05-26T07:02:37.7833333+00:00

How to do I change label color and make the label visible if user chooses dark background color.

For instance, if I choose black color from ColorPickerExtender the label color should change to white. Its just to adjust the label color to adjust to background color

 <asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
                                        <cc1:ColorPickerExtender ID="ColorPicker1" runat="server" TargetControlID="TextBox1"
                                            PopupButtonID="ColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="LabelColor" />
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="ColorBtn" runat="server" style="height: auto; background-color: transparent; color: #404344;">
                                                <span id="toggle_picker" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; font-size: 10pt; border: none;"></span>
                                            </span>
                                        </div>

<script type="text/javascript">
        function LabelColor(sender) {
            document.getElementById("bgCard").style.backgroundColor = "#" + sender.get_selectedColor();
            document.getElementById("lblName").style.color = "#ffffff;"; //I tried to do this, but it did not work.
        }
    </script>
.NET
.NET
Microsoft Technologies based on the .NET software framework.
3,625 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,410 questions
0 comments No comments
{count} votes

Accepted answer
  1. Lan Huang-MSFT 28,836 Reputation points Microsoft Vendor
    2023-05-26T08:18:43.9066667+00:00

    Hi @Donald Symmons,

    First, remove PopupButtonID="ColorBtn" if you don't use the button. Then there is one more ";" in JS.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <script type="text/javascript">  
    
    
            function LabelColor(sender) {
                document.getElementById("bgCard").style.backgroundColor = "#" + sender.get_selectedColor(); 
                document.getElementById("lblName").style.color = "#ffffff";
            }
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <div>
                <div class="card1" runat="server" id="bgCard" style="width: 100%; height: auto; border: 0.3px solid #c7c7c7; border-radius: 5px; position: relative;">
                    <div class="card-body">
                        <asp:Label ID="lblName" runat="server" Text="lblName"></asp:Label>
                    </div>
                </div>
                <asp:TextBox ID="TextBox30" runat="server" AutoCompleteType="None" Font-Size="10pt" CssClass="form-control" />
                <cc1:ColorPickerExtender ID="ColorPicker1" runat="server" TargetControlID="TextBox30" 
                    PopupPosition="TopRight" OnClientColorSelectionChanged="LabelColor" />
                <div class="input-group-append">
                    <span class="input-group-text" id="ColorBtn" runat="server" style="height: auto; background-color: transparent; color: #404344;">
                        <span id="toggle_picker" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; font-size: 10pt; border: none;"></span>
                    </span>
                </div>
            </div>
        </form>
    </body>
    </html>
    

    15

    Best regards,
    Lan Huang


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


0 additional answers

Sort by: Most helpful