Adjusting label color to adapt with background color with ColorPickerExntender

Question

Adjusting label color to adapt with background color with ColorPickerExntender

Donald Symmons 3,066

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>

Accepted answer

0 additional answers

Your answer

Answer 1

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>

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.

Donald Symmons 3,066 Reputation points

2023-05-26T12:29:56.8433333+00:00

Hi @Lan Huang-MSFT ,

Thank you for the correction.

Share via

Adjusting label color to adapt with background color with ColorPickerExntender

0 additional answers

Your answer