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

Accepted answer

Lan Huang-MSFT 25,556 Microsoft Vendor

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 2,856 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 25,556 Reputation points Microsoft Vendor

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 2,856 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 25,556 Reputation points Microsoft Vendor

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

Hi @Donald Symmons ,

Is this what you mean?
Donald Symmons 2,856 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 25,556 Reputation points Microsoft Vendor

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

Hi @Donald Symmons ,

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

Donald Symmons 2,856

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="donaldukosymmons@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 25,556 Reputation points Microsoft Vendor

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.

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

0 additional answers