starred/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2026-01-11 21:10:29 +01:00
Code Issues 273 Packages Projects Releases 10 Wiki Activity

Add a "clear" button for object list quick search fields #6723

New Issue
Closed
opened 2025-12-29 19:44:29 +01:00 by adam · 6 comments
adam commented 2025-12-29 19:44:29 +01:00
Owner
Copy Link

Originally created by @jeremystretch on GitHub (Jul 27, 2022).

Originally assigned to: @jsenecal on GitHub.

NetBox version

v3.2.7

Feature type

New functionality

Proposed functionality

Add a button next to the quick search field on object lists to clear the search value and reload the entire object list.

Use case

Provides a slightly more convenient user experience when utilizing the quick search feature.

Database changes

No response

External dependencies

No response

Originally created by @jeremystretch on GitHub (Jul 27, 2022). Originally assigned to: @jsenecal on GitHub. ### NetBox version v3.2.7 ### Feature type New functionality ### Proposed functionality Add a button next to the quick search field on object lists to clear the search value and reload the entire object list. ### Use case Provides a slightly more convenient user experience when utilizing the quick search feature. ### Database changes _No response_ ### External dependencies _No response_
adam added the status: acceptedtype: feature labels 2025-12-29 19:44:29 +01:00
adam closed this issue 2025-12-29 19:44:29 +01:00
adam commented 2025-12-29 19:44:30 +01:00
Author
Owner
Copy Link

@jsenecal commented on GitHub (Aug 3, 2022):

Implementation notes:

Adding...

<button type="button" class="btn bg-transparent" style="margin-left: -40px; z-index: 100;">
      <i class="mdi mdi-close"></i>
</button>

... to the input group div along with relevant javascript should do it.

Looks like this:
image

Or this:
image

If we go the bootstrap way (we'd need to fix the CSS too for the colors to match)

I can tackle this if you need an owner :)

@jsenecal commented on GitHub (Aug 3, 2022): Implementation notes: Adding... ```html <button type="button" class="btn bg-transparent" style="margin-left: -40px; z-index: 100;"> <i class="mdi mdi-close"></i> </button> ``` ... to the input group div along with relevant javascript should do it. Looks like this: ![image](https://user-images.githubusercontent.com/1564902/182716187-73ae5c0a-cdb3-4fe3-8bd4-e6d3c7e70694.png) Or this: ![image](https://user-images.githubusercontent.com/1564902/182717514-1f4a5931-dff2-42d4-9599-a410616687f4.png) If we go the bootstrap way (we'd need to fix the CSS too for the colors to match) I can tackle this if you need an owner :)
adam commented 2025-12-29 19:44:30 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Aug 4, 2022):

Thanks @jsenecal!

@jeremystretch commented on GitHub (Aug 4, 2022): Thanks @jsenecal!
adam commented 2025-12-29 19:44:31 +01:00
Author
Owner
Copy Link

@jsenecal commented on GitHub (Aug 5, 2022):

So I was looking for clean ways to achieve this without reinventing the wheel and found out about ::-webkit-search-cancel-button CSS

I managed to get it working without much issues but I wonder if its partial support would be a show stopper for NetBox. What are our officially supported browsers ?

@jsenecal commented on GitHub (Aug 5, 2022): So I was looking for clean ways to achieve this without reinventing the wheel and found out about [::-webkit-search-cancel-button CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-search-cancel-button) I managed to get it working without much issues but I wonder if its partial support would be a show stopper for NetBox. What are our officially supported browsers ?
adam commented 2025-12-29 19:44:31 +01:00
Author
Owner
Copy Link

@kkthxbye-code commented on GitHub (Aug 5, 2022):

Not working in firefox should make it a no-go in my opinion.

@kkthxbye-code commented on GitHub (Aug 5, 2022): Not working in firefox should make it a no-go in my opinion.
adam commented 2025-12-29 19:44:31 +01:00
Author
Owner
Copy Link

@jsenecal commented on GitHub (Aug 9, 2022):

NetBox aligns with Bootstrap's supported Browsers and Devices list.

So I made changes accordingly.

Looks like that:
image

image

With cute fade-in animations when the button appears and hovering.

@jsenecal commented on GitHub (Aug 9, 2022): NetBox aligns with Bootstrap's [supported Browsers and Devices](https://getbootstrap.com/docs/5.1/getting-started/browsers-devices/) list. So I made changes accordingly. Looks like that: ![image](https://user-images.githubusercontent.com/1564902/183758209-0d442d58-89f5-4db4-98cb-191833b2a713.png) ![image](https://user-images.githubusercontent.com/1564902/183758066-bd2d0250-b8a5-41ea-b1db-fb61ccf95c31.png) With cute fade-in animations when the button appears and hovering.
adam commented 2025-12-29 19:44:32 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Aug 11, 2022):

Thanks @jsenecal, this is great!

Peek 2022-08-11 08-54

@jeremystretch commented on GitHub (Aug 11, 2022): Thanks @jsenecal, this is great! ![Peek 2022-08-11 08-54](https://user-images.githubusercontent.com/13487278/184138735-fc7f7756-9aff-47eb-a446-908c06bb2e13.gif)
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
beta
breaking change
complexity: high
complexity: low
complexity: medium
needs milestone
netbox
pending closure
plugin candidate
pull-request
Mirrored from GitHub Pull Request
 severity: high
severity: low
severity: medium
status: accepted
status: backlog
status: blocked
status: duplicate
status: needs owner
status: needs triage
status: revisions needed
status: under review
topic: GraphQL
topic: Internationalization
topic: OpenAPI
topic: UI/UX
topic: cabling
topic: event rules
topic: htmx navigation
topic: industrialization
topic: migrations
topic: plugins
topic: scripts
topic: templating
topic: testing
type: bug
type: deprecation
type: documentation
type: feature
type: housekeeping
type: translation
No Label status: accepted type: feature
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/netbox#6723
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?