#8002 DNS zone resource records table width exceeds width of screen (FreeIPA 4.6.4, Firefox Quantum 67.0.4)
Opened 4 months ago by jjakob. Modified a month ago

Issue

When editing a zone with long record lengths (e.g. TXT DKIM keys) the table width is off-screen. The next/previous buttons are off-screen to the right. This makes it very tedious and time consuming to move between pages.

Using Inspect element, the table:
<table class="content-table table table-condensed table-striped table-hover table-bordered" name="idnsname">

has a style width:2080px
while the client has a screen width of less than 1600.

The console also shows some errors:

Source map error: request failed with status 404
Resource URL: https://ipa.foo.bar/ipa/ui/js/libs/jquery.js?v=40604
Source Map URL: jquery-2.0.3.min.map
Empty string passed to getElementById().
jquery.js:4:1062
Empty string passed to getElementById().
jquery.js:4:1346
onmozfullscreenchange is deprecated. ui
onmozfullscreenerror is deprecated. ui

Steps to Reproduce

  1. Go to DNS zone, add TXT record with very long value.

Version/Release/Distribution

ipa-server
Arch : x86_64
Version : 4.6.4
Release : 10.el7.centos.3

Client: Ubuntu 16.04, Firefox Quantum 67.0.4 (firefox)


Metadata Update from @pcech:
- Issue tagged with: Eagle

a month ago

The jquery Source Map URL is just a warning from the browser's dev tools, we can "fix" it whether by removing this line: https://pagure.io/freeipa/blob/master/f/install/ui/src/libs/jquery.js#_2 or by adding the source map file to our repo.

getElementById() errors are probably related to navigation, after cleaning the console and refreshing the page they don't appear any more.

I verified that the main issue reported here can still be experienced in master version of freeipa.

The actual value of width is 100% for the table displaying the DNS records, thus the table will use all width available; however, cell's content requires more space.

Adding the following styles to the cells might fix this issue:

white-space: pre-wrap;
word-break: break-all;

Here is a screenshot of how that table would look like after this change:
screenshot.png

Login to comment on this ticket.

Metadata
Attachments 1
Attached a month ago View Comment