KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

Ghost element needed 10px to max-width to be consistent

Browse Source 
Also updated expand icon that requires updates to height, width & color
attribute.
This commit is contained in:
Kevin
2022-03-03 23:13:41 +01:00
parent dbc225a41c
commit 9083b0a5d0
1 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/ui/MovieDescription.vue
View File

@@ -42,8 +42,11 @@ export default {
const elementWithoutOverflow = document.createElement("div"); const elementWithoutOverflow = document.createElement("div");
elementWithoutOverflow.setAttribute( elementWithoutOverflow.setAttribute(
"style", "style",
`max-width: ${width}px; display: block; font-size: ${fontSize}; line-height: ${lineHeight};` `max-width: ${Math.ceil(
width + 10
)}px; display: block; font-size: ${fontSize}; line-height: ${lineHeight};`
); );
// Don't know why need to add 10px to width, but works out perfectly
elementWithoutOverflow.classList.add("dummy-non-overflow"); elementWithoutOverflow.classList.add("dummy-non-overflow");
elementWithoutOverflow.innerText = this.description; elementWithoutOverflow.innerText = this.description;
@@ -96,11 +99,9 @@ span.truncated {
svg { svg {
transition: 0.4s ease all; transition: 0.4s ease all;
height: 22px;
@include mobile { width: 22px;
height: 20px; fill: var(--text-color);
width: 20px;
}
&.rotate { &.rotate {
transform: rotateX(180deg); transform: rotateX(180deg);