Details
-
Bug
-
Resolution: Unresolved
-
Minor
-
None
-
None
-
None
Description
From: Black, Carey M. <black.123@osu.edu>
Sent: Thursday, September 05, 2019 1:49 AM
To: Hyzer, Chris <mchyzer@isc.upenn.edu>; grouper-core@internet2.edu
Subject: RE: maybe a CSS "fix" for the UI table breaking out of the div?
Chris,
What? You can't guess what HTML elements I was talking about? ( Really? 😊 Read my mind man! ) Sorry about that.
I did test it. I swear I did. ( But I did not record the details. So I tested it in a non-reproduceable way. ☹ Grumble... bad user... bad.....)
( takes a second to clear his throat …. )
Take two....
Ok for the " Home > Miscellaneous > Loader jobs" screen it likely should "just overhang". But it works to show the idea that happens in the UI from time to time/place to place.
My setup ( in chrome )
The table (#grouperMainContentDivId > div.row-fluid > div > table) just goes off to the right.
Add " table-layout:fixed;" to the element.style for the table.
Add " overflow: scroll;" to the column(s) in the table.
#grouperMainContentDivId > div.row-fluid > div > table > thead > tr > th:nth-child(9)
#grouperMainContentDivId > div.row-fluid > div > table > tbody > tr:nth-child(1) > td:nth-child(9)
....
And the table no longer overhangs the "working area" div ( #grouperMainContentDivId > div.row-fluid > div ).
Yes in this configuration you can also not see the Query value either. So don't "fix" that table that way. 
Maybe some columns could be suppressed so that only Group,Status,Actions,and Query could be an "advanced display" for this table?
But this may be a “better end user example”. (Yes, still contrived… but users do silly things some times.)
This looks "ok" ( ish )
but this over hangs.
#attributeDefNamesToDeleteFormId > table
Add table-layout: fixed
And now the table stays in the div. ( Note: The cell(s) data does not, but the table does. And the width of the first and last columns are not a bit off too. )
Now “fix” these:
#attributeDefNamesToDeleteFormId > table > tbody > tr > td:nth-child(3)
Set " overflow: scroll;"
Oh.. and
#attributeDefNamesToDeleteFormId > table > tbody > tr > td:nth-child(3) > a
Remove white-space: nowrap;
Still not perfect… but contained by the outside div.
With a bit more work the first and last columns should be “more narrow” (width) to allow the “Folder” and “Attribute name” columns to have more % of the width. (But my css foo fails me at that point…)
Ok.. wait a second…. I think I have a better idea….
I think the problem is that the table header has “two rows” and it is confusing the display…
Starting over again from here: https://grouperdemo.internet2.edu/grouper_v2_4/grouperUi/app/UiV2Main.index?operation=UiV2AttributeDef.viewAttributeDef&attributeDefId=75cdfbdea6ec4dc4af84bd7bd847e50d
#attributeDefNamesToDeleteFormId > table > thead > tr:nth-child(1) ß I think is most of the problem.
If you move that so that it is now here #attributeDefNamesToDeleteFormId > table > tr ( just above the thead )
AND
#attributeDefNamesToDeleteFormId > table > tbody > tr:nth-child(2) > td:nth-child(3) > a
Remove white-space: nowrap;
Then that looks much better to me. 😊
And we can take it one or two steps farther too…
body > div.top-container > div.container-fluid
Remove max-width: 1100px;
body > div.top-container > div.container-fluid > div:nth-child(2) > div.span9.main-content.offset3
width= auto;
Hope that helps give you the picture. 😊
And if we circle back to the Loader Jobs screen with this idea…
body > div.top-container > div.container-fluid
Remove max-width: 1100px;
body > div.top-container > div.container-fluid > div:nth-child(2) > div.span9.main-content.offset3
width= auto;
#grouperMainContentDivId > div.row-fluid > div > table
Add table-layout:fixed
Add this as the first element in the table ( these could be better… maybe…)
<colgroup><col width="15%">
<col width="10%">
<col width="10%">
<col width="5%">
<col width="5%">
<col width="10%">
<col width="10%">
<col width="5%">
<col width="">
</colgroup>
And the radical change…
Each row “Query” column:
Move the SQL outside of the input box so the sql can wrap as text should…
#grouperMainContentDivId > div.row-fluid > div > table > tbody > tr:nth-child(1) > td:nth-child(9)
Should contain the raw text of #grouperMainContentDivId > div.row-fluid > div > table > tbody > tr:nth-child(1) > td:nth-child(9) > input[type=text]
And if you want you can style the cell with “background: white” to be more like the input field “look”.
And throw is “font-size: medium” too..
Maybe add “padding: 10px” too. ( not shown in the next image)
OK.. I did not change all of the rows Query cells…. But I think the picture shows enough…
I am not an accessibility expert. But I would be more than disappointed (and surprised ) if any of those css changes are detrimental to accessibility.
But if you want to discuss a few accessibility improvements… Well this is a long enough email for now.
No I need to point at this one…
https://todos.internet2.edu/browse/GRP-1816 ( circa 30/May/18 )
Can you ( with only the keyboard ) navigate to the drop down menu to get to the “Create new folder” option on that menu ?
Start with the url having focus and try to tab or arrow key (or any other keyboard key stroke) your way there.
I don’t think you can do it.
However…
body > div.top-container > div.container-fluid > div:nth-child(2) > div.span3.left-column > div.btn-group.btn-group-create.open > a.btn.btn-bigger.btn-create.dropdown-toggle
Add a href=”#” to that a link and now you can. .. AKA GRP-1816.
And there are other things in the same ‘accessibility’ category too. I can give you more if you want to fix them. 😊
–
Carey Matthew Black.123@osu.edu
----Original Message----
From: Hyzer, Chris <mchyzer@isc.upenn.edu>
Sent: Wednesday, September 4, 2019 10:57 PM
To: Black, Carey M. <black.123@osu.edu>; grouper-core@internet2.edu
Subject: RE: maybe a CSS "fix" for the UI table breaking out of the div?
Matt, Did you try this and it works? Do you have screenshots and let me know which elements you are adding styles to? The layout doesn’t use tables so im not sure what to try... I know it doesn’t look great but its functional and accessible 😊
----Original Message----
From: grouper-dev-request@internet2.edu <grouper-dev-request@internet2.edu> On Behalf Of Black, Carey M.
Sent: Wednesday, September 04, 2019 10:19 PM
Subject: [grouper-dev] maybe a CSS "fix" for the UI table breaking out of the div?
All,
I am NOT a front end web guy. However... maybe this would work?
Add to the outer table in the working area
table-layout:fixed;
Add to table columns:
overflow: scroll;
Only tested in Chrome. YMMV.
It appears to respond fairly to a resized window. (Collapses down to a single column and wraps the column values that need to be wrapped.)
HTH.
–
Carey Matthew Black.123@osu.edu