Ehren

15 hours ago, My Sharona said:

Can you fix the autofill on my android? Drives me nuts that every time it inserts, it places a space after the word. 🤖

That potentially sounds like an Android thing, not a CSS thing 🙂

Sure thing. Adding this to your custom.css file should add a space after the mention tag inside posts and the editor:

:is(.ipsComposeArea,.ipsType_richText) [data-mentionid]{
	margin-inline-end: .5em;
}

Hi @abobader,

That's actually working as intended. It behaves the same as other "mention" features such as those found in iMessage and Facebook. The lack of a space is also ideal for situations where you want to place grammar immediately after the username, such as the comma in the top line of this post, or an apostrophe.

I hope that helps to clarify 🙂

A fix for this was put into a pull request a few days ago. It will be patched in a future version 🙂

Thanks for the feedback Mike. I've addressed this by truncating descriptions to two lines. It'll be fixed in a future update 🙂

Hi @Afrodude

Adding the following to your custom.css file will fix the issue on your site. The code will be included in an upcoming Invision update 🙂

@media screen and (max-width: 979px) {
	html[dir="ltr"] .ipsDataItem_icon:not( .ipsResponsive_hidePhone ):not( .ipsResponsive_hideTablet ) + .ipsDataItem_main,
	html[dir="ltr"] .ipsDataItem_icon:not( .ipsResponsive_hidePhone ):not( .ipsResponsive_hideTablet ) + .ipsDataItem_main + .ipsDataItem_stats {
		margin-right: 2.5em;
	}
	html[dir="rtl"] .ipsDataItem_icon:not( .ipsResponsive_hidePhone ):not( .ipsResponsive_hideTablet ) + .ipsDataItem_main,
	html[dir="rtl"] .ipsDataItem_icon:not( .ipsResponsive_hidePhone ):not( .ipsResponsive_hideTablet ) + .ipsDataItem_main + .ipsDataItem_stats {
		margin-left: 2.5em;
	}
	.ipsDataItem_stats {
		white-space: normal;
	}
}

Yes, we’re aware. It has not yet been patched. Thank you 🙂 

If possible, can someone send me a URL to a post which has the empty lines? There may be a css solution which can help temporarily, until the issue is fixed by Samsung or CKEditor 🙂 

To do this correctly, many changes are needed to both HTML and CSS, not to mention 3rd party apps which use the 4.x icons.

FontAwesome does provide a “backwards compatible” file which lets you use both the 4.x and 6.x code simultaneously, however it’s a fair amount of code which would impact loading times even further.

Supporting Font Awesome 6 has been on my radar for a while now and unless my current plan changes, FA6 will be included by default in a future version, likely as part of a major rebuild. I don’t have any further information on that just yet, but your feedback has most definitely been heard 🙂 

1 hour ago, SeNioR- said:

Thanks for the info, however in what "future update" we can expect these improvement? IPS 5.x or maybe a bit earlier?

My current understanding is that some minor improvements will be added to the 4.x series (such as an upcoming Gallery refresh), however the new/modern CSS framework will be part of a much larger "version 5" update at some point in the future. I have no ETA's or anything beyond that at the moment. 🙂

I would certainly assume so 😂

Thanks @SeNioR-

A large UI sweep will be done in the future and will address things like this. I've been keeping note of small bugs like this one and I've been adding them to my todo list, so feel free to continue reporting things if you notice them 🙂

You guys did a great job, much better than I ever would have done! 😂

Thanks @opentype

Despite an easy solution (changing the overflow), it's a bit of a tough bug to fix because buttons are currently designed to have truncated text if they're too wide for their parent.

I'll potentially change this in a future version since it's not really ideal to truncate a button/CTA, but I'll fix this issue in the next update with the following code since it's less likely to break existing button layouts:

.ipsButton:has(.ipsNotificationCount){
    overflow: visible;
}

It's been a bunch of fun working with you on all of our projects together. You've been a huge part of my time with Invision, always full of positivity, and I'm sure you'll impact just as many people at Amazon.

With that said, I'd happily swallow Matts key too. If you ship the key to Australia, it'll be physically impossible for Jordan to use it because it'll only exist in the future.

Thanks for the report! This has been fixed on this site and will be patched in the next update.

In the mean time, you can fix it on your own sites by adding this to your custom.css file:

/* Hide duplicate links in mobile navigation panel */
#elMobileDrawer .ipsDrawer_subMenu a[href=""]{ display: none; }

On 10/20/2022 at 4:50 AM, sadams101 said:

I think you mentioned that you'd do this at least 3 years ago...which is, again, why @Adlago and myself have had to start this process ourselves.

I can happily back up Matt's last post. We've heard your feedback and are aiming to significantly improve both the CSS and JS performance in a future update - but as you can imagine, rewriting 10 years of code is a very long process that needs to be planned carefully.

Hello,

This code, inside your custom.css file, is causing it:

 #elMobileDrawer a.ipsDrawer_close {
  right:0px;
  left:auto;
  top:-4px;
 }

It looks like there are other issues going on since there's a box-shadow around the username, not to mention the bad alignment. I'd probably go through your custom.css file to check if all of the code in there is necessary. Your core > front > global > mobileNavigation template file may also be modified, which means it wouldn't have been upgraded correctly.

For your reference, the user panel is meant to look like this:

I have a feeling this may be caused by line-heights.

Is it fixed if you add this to your custom.css file?

/* Fix jumping scrollbar in embedded content */
.ipsRichEmbed .ipsType_richText{
	line-height: 1.4;
}

Hello,

If possible, can you please post a URL to that topic? We'll need to check the code ourselves, since it's too hard to fix via a screenshot.

It’s not actually a limitation with our software or an issue with your theme, it’s just the way import statements work. You can read more about it here. 🙂 

Your site is currently using this code:

@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap" rel="stylesheet');
body {
    font-family: Creepster, cursive;
}

It needs to be this:

@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');
body {
    font-family: Creepster, cursive;
}

With that said, import statements should only appear at the very top of your css file. Depending on how your theme has been coded, the custom.css file can be appended to other files, which means that your import statement is no longer at the top.

A safer solution would be to use the <link> code. Add this to the <head> area of your theme:

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
<link href="https://fonts.googleapis.com/css2?family=Creepster&display=swap" rel="stylesheet">

Then use this in your css:

body {
    font-family: 'Creepster', cursive;
}

Sure.

3 hours ago, Olmyster said:

This is already the case but you cannot see it because it is another theme that is a copy of the one displayed by default.  As I don't want my members to be able to access it now, it is only visible to the "administrator" group.

We’ll need to view the broken/admin theme to find out why the font isn’t loading. 

Hello,

This code is working fine for me:

@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');
body {
  font-family: Creepster, cursive;
}

If you're trying to use it on a 3rd party theme, post your URL here and I'll take a closer look for you 🙂