Adjusting the display location of the icon

I'm working on an AngularJS table and I need to add a text field for filtering/searching. However, the automatically generated icon is not displaying in the right place.

Here is my current view:

<table>
 <theader>
   <tr>
      <th at-attribute="Car_ID">
          Test <br /> 
          <input type="text" id="filter_id" ng-model="filter_id" />
      </th> 
   </tr>
 </theader>
</table>

Is there a way to move the sort arrow next to Test? I think it would look better there. Alternatively, how can I add another <tr> below the first one to display the search texts?

https://i.sstatic.net/YWVYU.png

This snippet shows the rendered HTML code where the automatic <i> element is added by AngularJS:

<th at-attribute="Car_ID" ng-click="predicate = 'Car_ID'; descending = !descending;" width="">
     Test <br> 
     <input type="text" id="filter_id" ng-model="filter_id" class="ng-pristine ng-untouched ng-valid">
     <i style="margin-left: 10px;" ng-class="getSortIcon('Car_ID', predicate, descending)" class="glyphicon glyphicon-chevron-down"></i>
</th>
javascripthtmlcssangularjs

Answer №1

Hide the icon generated by css and create your own custom icon for better control over its placement.

Admit it, tampering with these plugins can get messy. Take charge by eliminating the plugin's options and managing things on your own for more flexibility.

<th at-attribute="Car_ID" ng-click="predicate = 'Car_ID'; descending = !descending;" width="">
  Test <i ng-class="getSortIcon('Car_ID', predicate, descending)" class="glyphicon glyphicon-chevron-down"></i><br>
  <input type="text" id="filter_id" ng-model="filter_id" />
</th>

css:

th i:last-child {
 display:none;
}

edit

You can achieve the same functionality with this code snippet:

<i ng-class="getSortIcon('Car_ID', predicate, descending)" class="glyphicon glyphicon-chevron-down"></i>

Answer №2

include icon within a span tag

<span style="padding-left: 20px;" ng-class="setIcon('Car_ID', predicate, descending)" class="fas fa-chevron-down"></span>

Answer №3

While I don't have much experience with angular, you might want to consider placing the input field above or outside of the table header for a more cohesive look.

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

Time well spent with The Mighty Ajax

Within the success function for my post, I need to include the time posted. The original PHP code snippet that displays the time looks like this: echo "<br/><a href='#' class='subtleLink' style='font-weight:normal;'& ...

phpjavascriptjqueryajax

Tips for implementing an onclick jquery function within an input field

Just starting out with JavaScript and jQuery, I have a jQuery function that looks like this: $('.input-group .date').datepicker({ }); I want to apply it to the following HTML structure: <div class="input-group date" id="dp3"> <inp ...

javascriptjqueryonclick

What is the designated color for highlighting an option in Next.js?

This is my first time working on a Next.js project and I see an unfamiliar option. Which selection should I choose? I plan to use JavaScript for the Next.js project, not TypeScript. Just need to figure out which option is currently selected so I can pro ...

javascriptnpmnext.js

The width of my root container does not display at a full 100% in mobile dimensions

After creating a simple React.js project, I set up the folder structure using `npx create-react-app`. Additionally, I added some styling with `* { margin: 0; padding: 0; box-sizing: border-box }`, and specified background colors for the body and #root elem ...

htmlcssreactjs

What causes the malfunction of the save function in express?

Today marks my first venture into using Express. I attempted to create a straightforward route, but unfortunately, my save function is not cooperating. Despite scouring similar inquiries on stackoverflow, I have been unable to find a solution. Any assistan ...

javascriptnode.jsapiexpressroutes

Tips for transferring information from a child component to its parent using a click event in the parent component

My React application is designed to generate quizzes. The main component, <CreateQuiz/>, contains a child component called <QuestionForm/>. Additionally, within the <CreateQuiz/> component, there is a button labeled "Add Question" which a ...

javascriptreactjscomponents

Executing JavaScript Function on the Server Side

Recently, I created a JavaScript function that looks like this: function ShowMsg(msg) { $.blockUI({ message: '<div dir=rtl align=center><h1><p>' + msg + '</p></h1></div>', css: { ...

javascriptasp.netserverside-javascript

ensure that only one option can be selected with the checkbox

Can someone help me with applying this code on VueJS? I tried replacing onclick with @click but it's not working for me. I'm new to VueJS, so any guidance would be appreciated! function onlyOne(checkbox) { var checkboxes = document.getElement ...

javascriptvue.jsvuejs2

Discovering the form through a click event using jQuery

$(function() { $('.offer-wrapper').click(function (e) { if ($(e.target).hasClass('form')) { return // perform an action if a form is present } }); }); <script src="https://cdnjs.cloudflare.com/ajax/lib ...

javascriptjqueryhtml

Unlocking the power of dynamic stacking and unstacking in bar charts using chart.js

Looking to customize a barchart to toggle between stacked bars and bars behind each other? Keep in mind that the x-axes should be stacked behind each other. useEffect(() => { if (!myChart) return; if (barStack) { ...

javascriptreactjschart.js

Using PHP script to retrieve MySQL table values and dynamically update a live graph in a Javascript function

I've been researching similar issues for quite some time now, but to no avail. Currently, I'm utilizing Highcharts to update a graph every 3 seconds with the latest entry from a specific MySQL table. I am referring to the example Javascript code ...

javascriptphpmysqlhighchartslivegraph

Collaborating on React components across multiple projects while maintaining the central source code in one repository

I need a solution to effectively share React components, their Flow types, and SCSS between two projects while maintaining the source code in one project. The second project should only have read-only access to these components from the other project. Unf ...

javascriptreactjsnpm

What is the best way to adjust the width of a navbar using JavaScript?

I am experimenting with a responsive design and facing an issue - the width of my #menu in CSS is initially set to 0, but I need to change this value based on user input using JavaScript. Now, I want to dynamically adjust the width of the menu for differe ...

javascripthtmlcss

Ensure that the form is validated when the radio buttons belonging to an unfamiliar group are

Looking to implement form validation that only triggers when all group radio buttons are checked. The challenge is making this dynamic as the number of radio button groups may vary. Is there a way to determine the number of groups in a form? This functio ...

javascriptjquery

Animate the CSS position from its current location to the bottom, set at 0%

I am trying to create a CSS animation to slide up an image that is sticking out of the bottom of the screen. The challenge is that the dimensions of the image are variable, so I don't know how much of it is initially visible outside the screen. What ...

htmlcssanimation

Angular crashes and burns after attempting to clone from GitHub

Upon completing the cloning of an Angular Project from GitHub using git clone ---link, I encountered some errors when I ran "npm install". https://i.sstatic.net/cCGmY.png ...

angularjs

The division is now appearing below the preceding division instead of following it

I am currently encountering an issue that I believe has a simple solution, but I am unable to find it. I have two divs in my code. The first div contains a blurred background image and content, which is working perfectly fine. However, the second div is n ...

htmlcssflexbox

Navigating through hashed URLs with a Flexslider component

I have a website under construction that utilizes a flexslider, and I am looking to incorporate URL hash navigation. My goal is to extract the slide index based on the URL hash. I have examined the code for manual navigation where the index of the clicked ...

javascriptjqueryhashflexslider

Why is it necessary in JavaScript to reset the function's prototype after resetting the function prototype constructor as well?

Code is often written in the following manner: function G() {}; var item = {...} G.prototype = item; G.prototype.constructor = G // What is the purpose of this line? Why do we need to include G.prototype = item before resetting the prototype? What exact ...

javascriptconstructorprototype

Experiencing challenges with socket io connectivity between my backend and Quasar application. Encountering a 403 Forbidden error while trying to establish a connection with

I recently updated my Quasar app and ran into issues with the websocket connection after switching from development to production mode. The app is hosted on an Express server via pm2 on my Ubuntu server, which also connects to a database. Here are some sn ...

javascriptnode.jsexpresssocket.ioquasar