Fixes #10184: Fix vertical alignment when displaying object attribute…

…s with buttons
netbox-community · Sep 1, 2022 · ce4d00d · ce4d00d
1 parent bb269af
commit ce4d00d
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 9 deletions.
diff --git a/docs/release-notes/version-3.3.md b/docs/release-notes/version-3.3.md
@@ -22,6 +22,7 @@
 * [#10177](https://github.com/netbox-community/netbox/issues/10177) - Correct display of custom fields when editing VM interfaces
 * [#10178](https://github.com/netbox-community/netbox/issues/10178) - Display manufacturer name alongside device type under device view
 * [#10181](https://github.com/netbox-community/netbox/issues/10181) - Restore MultiPartParser (regression from #10031)
+* [#10184](https://github.com/netbox-community/netbox/issues/10184) - Fix vertical alignment when displaying object attributes with buttons
 * [#10208](https://github.com/netbox-community/netbox/issues/10208) - Fix permissions evaluation for interface actions dropdown menu
 * [#10217](https://github.com/netbox-community/netbox/issues/10217) - Handle exception when trace splits to multiple rear ports
 * [#10220](https://github.com/netbox-community/netbox/issues/10220) - Validate IP version when assigning primary IPs to a virtual machine

diff --git a/netbox/templates/dcim/device.html b/netbox/templates/dcim/device.html
@@ -46,10 +46,10 @@ <h5 class="card-header">
                         </tr>
                         <tr>
                             <th scope="row">Rack</th>
-                            <td>
+                            <td class="position-relative">
                                 {% if object.rack %}
                                     {{ object.rack|linkify }}
-                                    <div class="float-end noprint">
+                                    <div class="position-absolute top-50 end-0 translate-middle-y noprint">
                                       <a href="{{ object.rack.get_absolute_url }}?device={{ object.pk }}" class="btn btn-primary btn-sm" title="Highlight device">
                                         <i class="mdi mdi-view-day-outline"></i>
                                       </a>

diff --git a/netbox/templates/dcim/location.html b/netbox/templates/dcim/location.html
@@ -58,9 +58,9 @@ <h5 class="card-header">
           </tr>
           <tr>
             <th scope="row">Racks</th>
-            <td>
+            <td class="position-relative">
               {% if rack_count %}
-                <div class="float-end noprint">
+                <div class="position-absolute top-50 end-0 translate-middle-y noprint">
                   <a href="{% url 'dcim:rack_elevation_list' %}?location_id={{ object.pk }}" class="btn btn-sm btn-primary" title="View elevations">
                     <i class="mdi mdi-server"></i>
                   </a>

diff --git a/netbox/templates/dcim/site.html b/netbox/templates/dcim/site.html
@@ -85,11 +85,11 @@ <h5 class="card-header">Site</h5>
           </tr>
           <tr>
             <th scope="row">Physical Address</th>
-            <td>
+            <td class="position-relative">
               {% if object.physical_address %}
-                <div class="float-end noprint">
+                <div class="position-absolute top-50 end-0 translate-middle-y noprint">
                   <a href="{{ config.MAPS_URL }}{{ object.physical_address|urlencode }}" target="_blank" class="btn btn-primary btn-sm">
-                    <i class="mdi mdi-map-marker"></i> Map It
+                    <i class="mdi mdi-map-marker"></i> Map
                   </a>
                 </div>
                 <span>{{ object.physical_address|linebreaksbr }}</span>
@@ -104,9 +104,9 @@ <h5 class="card-header">Site</h5>
           </tr>
           <tr>
             <th scope="row">GPS Coordinates</th>
-            <td>
+            <td class="position-relative">
               {% if object.latitude and object.longitude %}
-                <div class="float-end noprint">
+                <div class="position-absolute top-50 end-0 translate-middle-y noprint">
                   <a href="{{ config.MAPS_URL }}{{ object.latitude }},{{ object.longitude }}" target="_blank" class="btn btn-primary btn-sm">
                     <i class="mdi mdi-map-marker"></i> Map It
                   </a>