Comments (9)
@jeffibm this is actually image -> container or image -> container_pods as it's actually the pod name that is truncated so I can't really tell if it's resolved from the screenshot.
Truncation is fine but it should match the width of the column. If a use sees a truncating UI screen, they should be able to expand the column width to remove most if not all of the truncation.
In both screenshots, we're truncating well before the column width. How does it determine the text length before the truncation? We're either putting it in an element that doesn't match the column width or it's truncating based on a specific string length.
we used to truncate the text if its length is more than 40. let me put in some screenshots here with different possibilities.
from manageiq-ui-classic.
we used to truncate the text if its length is more than 40. let me put in some screenshots here with different possibilities.
Ok, I think that fails with different devices such as tablets or wide screen monitors so it's not really good for responsive design.
from manageiq-ui-classic.
If needed, we should get UX review on it for carbon to see if there are responsive features we're not using.
I didn't find any reference for truncation for table cells. the current implementation uses custom css.
The carbon data tables do have the option to expand rows, like an accordion. I was also thinking of making use of it for truncated text.. need to see how it would render truncated and non-truncated text.
from manageiq-ui-classic.
Closing this issue since the Fix was merged.
from manageiq-ui-classic.
Hey @jrafanie , will this presentation be ok?
![image](https://private-user-images.githubusercontent.com/87487049/245024335-cf7621db-8d41-445a-8bcd-2f41d282a4db.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTAzNjM0NzksIm5iZiI6MTcxMDM2MzE3OSwicGF0aCI6Ii84NzQ4NzA0OS8yNDUwMjQzMzUtY2Y3NjIxZGItOGQ0MS00NDVhLThiY2QtMmY0MWQyODJhNGRiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAzMTMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMzEzVDIwNTI1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWRjMzFmOWZkYTFmMTM5MDIwOWE2YjQyODYzMzI2YzZiNjU5YjZhNjEzNmY5MTc4YTUzZDFlY2I4OWNhMDNmMjMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ncB-ENwPjtdZoVse512wA4Nb0ifjwAWLd2LGIUPFsrY)
To view this change, all we need to do is to pass a value truncateText=false
to the StaticGTLView
component (common component), which will remove the truncation of text on its data-table cells.
It was introduced a while ago to handle longer text to avoid horizontal scrolling and limit the table content to the screen width itself (which is not helpful in this page though)
Do we want to make this change based on modelName
, in this case 'containers
'?
like, do not truncate cells for certain pages.
from manageiq-ui-classic.
@jeffibm this is actually image -> container or image -> container_pods as it's actually the pod name that is truncated so I can't really tell if it's resolved from the screenshot.
Truncation is fine but it should match the width of the column. If a use sees a truncating UI screen, they should be able to expand the column width to remove most if not all of the truncation.
In both screenshots, we're truncating well before the column width. How does it determine the text length before the truncation? We're either putting it in an element that doesn't match the column width or it's truncating based on a specific string length.
from manageiq-ui-classic.
If needed, we should get UX review on it for carbon to see if there are responsive features we're not using.
from manageiq-ui-classic.
I modified the MiqDataTable
a bit to look like this.
#8825
![image](https://private-user-images.githubusercontent.com/87487049/245424423-5da6c968-04fa-4438-bd5e-37ce7800f3aa.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTAzNjM0NzksIm5iZiI6MTcxMDM2MzE3OSwicGF0aCI6Ii84NzQ4NzA0OS8yNDU0MjQ0MjMtNWRhNmM5NjgtMDRmYS00NDM4LWJkNWUtMzdjZTc4MDBmM2FhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAzMTMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMzEzVDIwNTI1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk1NDhjZGEwZjk1NmZkMGQxMmI1Mjg1MjQ3MThkNDg0YTVhZDE1ZDBjMzc1NmM0ZTZkOGJlZTk1MzA2YmRhNWUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.15fpSHQclAmN-_WTG-et9P_YR3C5i_DaopFGLZfdflY)
![image](https://private-user-images.githubusercontent.com/87487049/245424632-b95a6993-f32e-46cd-999f-c19914868fb9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTAzNjM0NzksIm5iZiI6MTcxMDM2MzE3OSwicGF0aCI6Ii84NzQ4NzA0OS8yNDU0MjQ2MzItYjk1YTY5OTMtZjMyZS00NmNkLTk5OWYtYzE5OTE0ODY4ZmI5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAzMTMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMzEzVDIwNTI1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTMzZDY2NWQ4ZTdlYmVjZmNjMDgwNzY0NjdmMTc2YTQyMmI0NjQxNzVlMDI1MDg3NWMxNjZhYzUyOGI0OTEwYjImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.NtonjrTzssQPNQjRglaziie6wUi5zADUaJo2nJEK17c)
![image](https://private-user-images.githubusercontent.com/87487049/245424855-4588868a-18ce-4bbf-b222-42a5a576c7e2.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTAzNjM0NzksIm5iZiI6MTcxMDM2MzE3OSwicGF0aCI6Ii84NzQ4NzA0OS8yNDU0MjQ4NTUtNDU4ODg2OGEtMThjZS00YmJmLWIyMjItNDJhNWE1NzZjN2UyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAzMTMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMzEzVDIwNTI1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWE3YmE3NjJlNDExMGZlMmQ5NDI5NDY5YTMyYTQ3MTRmOWNkZTk4M2NlYTk4NGMxNmZhNDBhODhlYzEyMjJmN2QmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.vRA8DnDJPzlvQ_auPgMmH_5JPlbVRmy19fO4XVU6_Xc)
![image](https://private-user-images.githubusercontent.com/87487049/245425600-3ed29792-fff3-4ac0-8b0e-f0172546fd2d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTAzNjM0NzksIm5iZiI6MTcxMDM2MzE3OSwicGF0aCI6Ii84NzQ4NzA0OS8yNDU0MjU2MDAtM2VkMjk3OTItZmZmMy00YWMwLThiMGUtZjAxNzI1NDZmZDJkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAzMTMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMzEzVDIwNTI1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWZlMjRkMjBjZmU4M2VmZmJlMDU3YzNlNzZkOWNkODVjOWZmZWFhYWVkZDk0MmRjNDcwM2YwMjBlMjgyZjIxM2YmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.pBP5rZMTaXdUfAxXaqvbHq5VOACnUP3ixTDYyUjes9U)
from manageiq-ui-classic.
This issue has been automatically marked as stale because it has not been updated for at least 3 months.
If you can still reproduce this issue on the current release or on master
, please reply with all of the information you have about it in order to keep the issue open.
Thank you for all your contributions! More information about the ManageIQ triage process can be found in the triage process documentation.
from manageiq-ui-classic.
Related Issues (20)
- [RFE] When deleting a user who owns a resource (such as a vm), provide an option to automatically transition any ownership to the user's group
- Workflow Instances show up in Ansible Tower / Templates HOT 2
- Display workflow information on MiqTasks for dynamic dialog runs
- [Petrosian] Replace angular code
- [Quinteros] Replace angular code
- [Oparin] Tabs conversion from HAML to React
- [Petrosian] Tabs conversion from HAML to React
- [Quinteros] Tabs conversion from HAML to React
- While the tenant is created, it suppose to be listing in cloud tenant page it may take up to four or five minutes. HOT 1
- [RFE] Add the Ability to use Wildcard Characters when using the Search Function in the UI HOT 6
- [RFE] Change Git Branch Dropdown to Default to the Currently used Branch/Tag When Refreshing a Git-Based Automation Domain HOT 3
- Disabled IP Address Fields for Provision Form with DHCP Address Mode
- [RFE] Let Table in Projects Summary Page link to a Pod's Summary Page HOT 1
- [RFE] Show Annotations in Container Summary Pages HOT 2
- [RFE] Add Labels to Container Projects Summary Page HOT 2
- React Warning: Unrecognized `isDisabled` Prop Passed to DOM Element in Provider Form HOT 8
- CVE-2024-21490 (High) detected in multiple libraries
- Cannot Add Provisioning Scope Tag values to Groups when Editing HOT 7
- Bug with Action Form - Tag Action Type
- Several bugs trying to add or remove assigned filters to user groups HOT 10
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from manageiq-ui-classic.