The clearfix feature is ineffective when using AngularJS

<ul class="dropdown-menu wm_search_div" ng-show="searchDivShow">
    <li ng-repeat="user in searchUserList">
        <a href="javascript:void(0);" class="wm_clearfix3">
            <img ng-src="{{user.faceIcon}}" class="pull-left wm_search_uface"/>
            <div class="pull-left wm_ml5">
                <div class="wm_search_uname" ng-bind="user.username"></div>
                <span ng-bind="'账号：'+user.account" class="wm_search_uacc"></span>
            </div>
        </a>
    </li>
    <li>
        <a href="javascript:void(0);" class="wm_clearfix3">
             <img ng-src="resources/images/default_faceicon.jpg" class="pull-left wm_search_uface"/>
             <div class="pull-left wm_ml5">
                  <div class="wm_search_uname">fdsfsfds</div>
                  <span class="wm_search_uacc">fsdfds</span>
             </div>
        </a>
    </li>
</ul>

.wm_clearfix3{
    overflow: auto;
    height: 1%;
}

When I added a clearfix CSS class to my HTML label, it worked fine until I introduced AngularJS code. Now, the clearfix class does not seem to work properly anymore. It may be due to the 'ng-repeat' directive. Can anyone provide assistance with this issue?

javascripthtmlcssangularjs

Answer №1

There's no requirement to include ng-class unless you're incorporating logic into the class. Simply using class is sufficient.

Answer №2

Is it necessary to utilize 'ng-class' without an Angular expression? Consider using:

ng-class="{custom_class}"

Alternatively:

.custom_class{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Answer №3

Are you finding the solution provided in the JSFiddle link below useful?

https://jsfiddle.net/6vm4csjb/

ul {
  list-style: none;
}

[class*="wm_clearfix"] {
  display: inline-block;
  width: 100%;
}

[class*="wm_clearfix"]:before, [class*="wm_clearfix"]:after {
  display: table;
  content: " ";
}

img {
  display: inline-block;
  width: 20px;
  height: 20px;
}

.pull-left {
  float: left;
}

<ul class="dropdown-menu wm_search_div" ng-show="searchDivShow">
  <li ng-repeat="user in searchUserList">
    <a href="javascript:void(0);" class="wm_clearfix3">
      <img ng-src="{{user.faceIcon}}" class="pull-left wm_search_uface"/>
      <div class="pull-left wm_ml5">
        <div class="wm_search_uname" ng-bind="user.username"></div>
        <span ng-bind="'账号：'+user.account" class="wm_search_uacc"></span>
      </div>
    </a>
  </li>
  <li>
    <a href="javascript:void(0);" class="wm_clearfix3">
      <img ng-src="resources/images/default_faceicon.jpg" class="pull-left wm_search_uface"/>
      <div class="pull-left wm_ml5">
        <div class="wm_search_uname">fdsfsfds</div>
        <span class="wm_search_uacc">fsdfds</span>
      </div>
    </a>
  </li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing Ajax requests to interact with a RESTful API

After developing a back end REST API using Slim Framework and closely following the REST format, I ran into an issue when working on the Front End. It seems that AJAX functions well with parameters but not paths. I am considering outsourcing or creating a ...

javascriptphpjqueryajaxrest

Preventing SQL Injection by properly formatting SQL queries

In my Node.js application, I need to construct an SQL query that looks like the one shown below. SELECT * FROM my_table WHERE my_column IN ['name1','name2'] The user inputs an array, such as ['name1', 'name2'], whic ...

javascriptsqlnode.jspostgresqlsql-injection

Having trouble getting the Grid class to work in Tailwind with NextJs, any suggestions on why it might not be

Having some trouble with the grid classes in Tailwind not functioning as expected in my code, even though other classes like mt-10 and flex are working perfectly. I've tried applying flex to the parent container and removing it, but the closest I&apo ...

javascriptreactjsnext.jstailwind-css

Two commands, a set of matching controllers, and an identical templateUrl

As a beginner in AngularJS, I am facing a challenge where I need to use one template for two directives. The issue is that the behavior of the first directive overrides the second one, even though I have specified different controllers for each. This seems ...

angularjs

How can you verify user identity in Firebase when making a call to a cloud function on a

I have integrated Firebase into my React Native app, and I have only enabled anonymous login feature. Currently, I am attempting to invoke a Cloud Function from the app without utilizing the firebase SDK. Instead, I intend to make the call using axios. De ...

javascriptfirebasereact-nativegoogle-cloud-functions

What is the best way to save geolocation coordinates in a Javascript array?

I am attempting to utilize HTML5 geolocation to determine a user's location and then store the latitude and longitude coordinates in an array for future use with Google Maps and SQL statements. However, when I attempt to add these coordinates to the a ...

javascriptarrayshtmlgeolocation

Need to monitor a Firebase table for any updates

How can I ensure my Angular 2 app listens to changes in a Firebase table? I am using Angular2, Firebase, and TypeScript, but the listener is not firing when the database table is updated. I want the listener to always trigger whenever there are updates or ...

javascriptangulartypescriptfirebasefirebase-realtime-database

What is the best way to compare two times in the hh:mm AM/PM format?

I need to handle times in the format of hh:mm AM/PM generated by a specific plugin, and perform comparisons on them using jQuery/javascript. When a user manually inputs a time, I require the text in the textbox to automatically adjust to hh:mm AM/PM with ...

javascriptjquery

What could be the reason for the GET request not functioning properly in Node.js?

const express = require('express'); const mongoose = require ("mongoose"); const app = express(); const Student = require('../models/students'); require('dotenv').config(); const PORT = process.env.PORT || 3000; const co ...

javascriptnode.jsangularmean

A method to verify the presence of a specific element within a list using JavaScript

I'm trying to validate if the list retrieved from the application contains the expected element. Can you please review my code and let me know where I might be making a mistake? this.verifyOptionsInDropdown = async function(){ var optionList = a ...

javascriptnode.jsangularjsseleniumprotractor

React: Using useState and useEffect to dynamically gather a real-time collection of 10 items

When I type a keystroke, I want to retrieve 10 usernames. Currently, I only get a username back if it exactly matches a username in the jsonplaceholder list. For example, if I type "Karia", nothing shows up until I type "Karianne". What I'm looking f ...

javascriptreactjstypescriptreact-hooksuse-effect

Search timeout restriction

I have a function that makes a request to the server to retrieve data. Here is the code for it: export default class StatusChecker { constructor() { if (gon.search && gon.search.searched) { this.final_load(); } else { this.make_req ...

javascriptjquerytypescript

Is it possible to change the style of an element when I hover over one of its children?

Encountered an issue while working with HTML and CSS: //HTML <div> <div class="sibling-hover">hover over me</div> </div> <div class="parent"> <div>should disappear</div> </div> ...

javascripthtmlcss

JavaScript example: Defining a variable using bitwise OR operator for encoding purposes

Today I came across some JavaScript code that involves bitwise operations, but my knowledge on the topic is limited. Despite searching online for explanations, I'm still unable to grasp the concept. Can someone provide insight into the following code ...

javascriptbit-manipulationbitwise-operatorsbitwise-or

Creating an Online Store with Python and Django for Server-side Development

Looking to create a dynamic E-commerce platform with Bootstrap, HTML, CSS, and JavaScript for the frontend, along with Python, Django, and MongoDB for the backend. Can someone provide me with step-by-step guidance on crafting code files for each language a ...

pythonhtmldjangobootstrap-4

What is the best way to integrate Angular 4 into an AngularJS application using SystemJS?

I am looking to upgrade my AngularJS application to Angular 4. Currently, I am going through the official documentation for upgrading from AngularJS which can be found at https://angular.io/guide/upgrade. The guide mentions: In order to start converting ...

angularjsangularsystemjs

"Learn how to properly load the style.css file from the root directory into your WordPress page.php and single.php files

Having an issue with my WordPress theme. The style.css stylesheet does not seem to be loading in the page.php contents. I noticed that when I add <div class=w3-red"> <button class="w3-btn w3-red"> and other related codes while editing a post in ...

phpcsswordpressthemeswordpress-theming

Utilizing JavaScript event handlers on dynamically appended elements after the document has finished loading

One issue I am facing is with a javasript function that needs to change the value of an element appended after the document has loaded. The problem arises when trying to intercept actions on a newly appended DIV, such as: <div class="new-div"></d ...

javascripthtmldomdelegatesscroll

The body onload function fails to run upon the page loading

I'm having trouble with my body onload function not executing. When I load the page, I want to display all records that are selected in the drop_1 dropdown and equal to ALL. I have a script that sends values q and p to getuser.php. The values sent are ...

javascriptajax

Setting up Node.js

I'm currently in the process of configuring my Node.js to execute my HTML code. I have Bootstrap and Express Js set up as well. However, when I launch Node.js, it doesn't seem to be loading the CSS properly. Can someone provide insight into what ...

htmlnode.jstwitter-bootstrapexpress