Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix #494 : block title overflow behaviour #495

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix #494 : block title overflow behaviour #495

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d92f2d6
Update visual-editor.css for fixing issue on text overflow
Pawankalyan2023 Dec 31, 2024
cff3595
Merge branch 'Hexastack:main' into main
Pawankalyan2023 Jan 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions frontend/src/styles/visual-editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,18 +124,22 @@
font-size: 20px;
display: flex;
flex-direction: row;
justify-items: flex-start;
word-break: break-word;
overflow-wrap: break-word;
justify-content: flex-start;
Comment on lines +127 to +129
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello @Pawankalyan2023 , thank you for your contribution.

How about we use css elipses instead

text-overflow: ellipsis;

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might not be a good choice when we need to showcase the title completely to the user for better understanding.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can show the whole text on hover :

.truncated {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis; 
}
<div class="truncated" title="This is a long text that will be truncated, but showed on hover">
  This is a long text that will be truncated, but shown on hover
</div>

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another way of doing it :

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative; /* Necessary for positioning the pseudo-element */
}

.ellipsis:hover::after {
    content: attr(data-full-title); /* Fetch the full text from the `data-full-text` attribute */
    position: absolute;
    top: 100%; /* Show below the element */
    left: 0;
    background-color: #fff; /* Optional: Style for visibility */
    color: #000;
    padding: 5px;
    border: 1px solid #ccc;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    white-space: nowrap;
}

<div class="ellipsis" data-full-title="This is the full text that will be shown on hover.">
    This is the full title that will...
</div>

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @marrouchi I made the changes to the code with ellipses , could you please review this

Screen.Recording.2025-01-06.214723.mp4

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@marrouchi is this okay ?

align-items: center;
gap: 8px;
border-radius: 10px 10px 0 0px;
border-radius: 10px 10px 0 0;
width: auto;
margin-top: -1px;
margin-left: -1px;
padding: 12px 20px;
color: #ffffff;
font-weight: bolder;
white-space: normal;
}


.node-block-field {
background-color: #f9fbfc;
border-radius: 8px;
Expand Down