Caret displays inside of asp:Label control instead of beside it

Question

Caret displays inside of asp:Label control instead of beside it

Donald Symmons 3,066

I am trying to have a caret display beside my asp:Label control so that when the caret is clicked, there will be a dropdown that will have logout, but the caret is displaying inside the label.

How can I have caret display beside the Label instead of inside?

<div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="nav navbar-nav ml-auto">
                                <li class="dropdown" id="Li3" runat="server" style="padding: 5px; cursor: pointer;">
                                    <asp:Label class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" ID="user" runat="server" Font-Size="10pt" Text="" ForeColor="#0b2436"></asp:Label>
                                    <ul class="dropdown-menu dropdown-menu-right" style="border: none; background-color: #fff; font-size: 9pt; border: 0.5px solid #e9ebeb;">
                                        <li class="dropdown" runat="server">
                                            <asp:LinkButton ID="LinkButton3" runat="server" Font-Size="11pt" ForeColor="red" BackColor="White" OnCommand="Logout_Command">
                                                <i class="fal fa-sign-out" aria-hidden="true" style="margin: 0 auto; font-size: 10pt; color: #0b2436;"></i> Logout
                                            </asp:LinkButton>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>

Accepted answer

0 additional answers

Your answer

Answer 1

Lan Huang-MSFT 30,191 Microsoft External Staff

Hi @Donald Symmons ,

I tested your code. Is the caret that circle? You try the code below.

<div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="nav navbar-nav ml-auto">
                                <li class="dropdown" id="Li3" runat="server" style="padding: 5px; cursor: pointer;">
                                    <asp:Label class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" ID="user" runat="server" Font-Size="10pt" Text="" ForeColor="#0b2436">user</asp:Label>
                                    <ul class="dropdown" runat="server">
                                    <li class="dropdown-menu dropdown-menu-right" style="border: none; background-color: #fff; font-size: 9pt; border: 0.5px solid #e9ebeb;">
                                       
                                            <asp:LinkButton ID="LinkButton3" runat="server" Font-Size="11pt" ForeColor="red" BackColor="White" OnCommand="Logout_Command" >
                                                <i class="fal fa-sign-out" aria-hidden="true" style="margin: 0 auto; font-size: 10pt; color: #0b2436;"></i> Logout
                                            </asp:LinkButton>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>

User's image

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-03-06T02:04:09.7833333+00:00

Hi @Lan Huang-MSFT No. The circle is a font awesome icon for user. The caret is slightly in-between the user label and the icon that's why you can't see it clearly. I just wanted to have user label that display user's name after login and also have a caret there so that when the caret is clicked a dropdown will appear that will have logout button for user to logout
Lan Huang-MSFT 30,191 Reputation points Microsoft External Staff

2023-03-06T02:04:42.1066667+00:00

Hi @Donald Symmons ,

terribly sorry. I can't see where the caret is, can you point out where you are using the caret?
Donald Symmons 3,066 Reputation points

2023-03-06T02:05:43.0933333+00:00

It's translucent. Looking closely you will see it between the user label and the font icon
Lan Huang-MSFT 30,191 Reputation points Microsoft External Staff

2023-03-06T02:05:53.16+00:00

Hi @Donald Symmons ,

Is this what you mean?
Donald Symmons 3,066 Reputation points

2023-03-07T00:27:45.6666667+00:00

Oh. There's supposed to be a user font icon after user label
Lan Huang-MSFT 30,191 Reputation points Microsoft External Staff

2023-03-07T01:43:05.0933333+00:00

Hi @Donald Symmons ,

You just need to change the position of the caret line.

Donald Symmons 3,066

Basically this is what I want to achieve. You can see in the below image that a caret is just beside the user icon ,to the right.

dropdown test

That's the dropdown showing list items like Profile, Support, Log Out etc..

Here is my rewritten HTML

 <nav id="topnav" class="navbar navbar-expand-lg navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="font-size: 12pt; font-weight: 500;">
                    <div class="container-fluid">
                        <button type="button" id="sidebarCollapse" class="btn btn-info">
                            <i class="fas fa-bars"></i>
                            <span class="sr-only">Toggle Navigation</span>
                        </button>
                        <button class="btn btn-info d-lg-none ml-auto" id="sideCollapse" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <i class="fas fa-bars"></i>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="nav navbar-nav ml-auto">
                                <li class="dropdown" runat="server" style="padding: 5px;">
                                    <asp:Label class="" ID="user" runat="server" Font-Size="10pt" Text="******@hotmail.com" ForeColor="#0b2436"></asp:Label>
                                </li>
                                 <li class="dropdown" runat="server" style="padding: 5px;">
                                    <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#" style="background-color: transparent; border: none; cursor: pointer;">
                                        <i class="fal fa-user-circle" style="margin: 0 auto; font-size: 13pt; color: #0b2436;">
                                            <span class="caret" style="color: #0b2436;"></span>
                                        </i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
                                        <li class="dropdown-item">
                                            <a href="#">
                                                <asp:LinkButton ID="LinkButton2" runat="server" Font-Size="11pt" ForeColor="red" BackColor="White">
                                                  Logout
                                                </asp:LinkButton>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>

Lan Huang-MSFT 30,191 Reputation points Microsoft External Staff

2023-03-08T06:17:03.98+00:00

Hi @Donald Symmons ,

I tested your code and understood what you meant. It seems that you have solved this problem.

Share via

Caret displays inside of asp:Label control instead of beside it

0 additional answers

Your answer