I'm teaching myself OutSystems 11 by building a reactive web app. Transitioning from a PowerApps / Flow / SharePoint workflow. The most programming I've done is an intermediate level of Excel VBA, and I have a very basic understanding of CSS, JavaScript, SQL and database design.


I'm trying to figure out a behaviour I can't pinpoint the source of, within a desktop browser. Within the default Menu block, I've added two submenus, each with a link to a different screen. If I click on a link and immediately move the mouse away, the link's text will have underlined text formatting while the new screen is loading. After the screen renders, the submenu will activate the default "active menu" style underline. Why would the text formatting step happen, and how could I stop this?


In the image below the white arrow illustrates the mouse, and the third screenshot is the formatting I want to disable.


I've checked the submenus implemented in some of the training exercise apps, and they do not have this text formatting behaviour, though I figure this may be because the screens render too fast for the third step to take place.

Hi Matei,

Would it be possible for you to share the module of the app you've developed? If not, could you share what browser you're using, and what it displays on the Developer Console when you right click on the submenu element?

For Chrome, you'd do this by right clicking and pressing "Inspect Element", or similar. And then you'd see something like this:

The middle section contain all the CSS being applied to a specific HTML element, so it would be very useful to diagnose this.

Hello Afonso,


Tain.oml


I'm using Chrome, but Firefox triggers the same behaviour. Looking through the browser dev tools, I'm unfortunately not familiar enough with CSS to find which styling would handle the activated hyperlink.


If the text underline is instead coming from the default way browsers handle hyperlinks, would there be a simple way to overwrite this with additional CSS?

The upload didn't go through, the OML doesn't seem accessible. Could you try again? Regarding the underline, you could try applying text-decoration to none, since underlines are usually applied with this property:

text-decoration: none;


Matei Ciurea wrote:

I'm teaching myself OutSystems 11 by building a reactive web app. Transitioning from a PowerApps / Flow / SharePoint workflow. The most programming I've done is an intermediate level of Excel VBA, and I have a very basic understanding of CSS, JavaScript, SQL and database design.


I'm trying to figure out a behaviour I can't pinpoint the source of, within a desktop browser. Within the default Menu block, I've added two submenus, each with a link to a different screen. If I click on a link and immediately move the mouse away, the link's text will have underlined text formatting while the new screen is loading. After the screen renders, the submenu will activate the default "active menu" style underline. Why would the text formatting step happen, and how could I stop this?


In the image below the white arrow illustrates the mouse, and the third screenshot is the formatting I want to disable.


I've checked the submenus implemented in some of the training exercise apps, and they do not have this text formatting behaviour, though I figure this may be because the screens render too fast for the third step to take place.

 Hi Matei,

You can use the below css

.menu a, .menu a:hover{text-decoration:none}

Hope this helps


Thanks

AD  



 

Attaching the OML again. Last time I dropped the file in the reply window, I've now noticed the "Attach" button below the reply window.


I've added the CSS recommendation to the style sheet editor, but no change unfortunately.

Matei Ciurea wrote:

Attaching the OML again. Last time I dropped the file in the reply window, I've now noticed the "Attach" button below the reply window.


I've added the CSS recommendation to the style sheet editor, but no change unfortunately.

 

 Hi Matei,

use this

.desktop .submenu-header:hover, .submenu.active .submenu-header {

  border-bottom: 0;

}


Thanks

AD

Matei Ciurea wrote:

Attaching the OML again. Last time I dropped the file in the reply window, I've now noticed the "Attach" button below the reply window.


I've added the CSS recommendation to the style sheet editor, but no change unfortunately.

 

 Hi,

Please check the attached OML


Thanks

AD

Your CSS lines that target the submenu actually partially disable the green underline at the bottom of the menu block. But this is useful since I've now deduced something new about how CSS sees these elements.


If you look at my previous collated screenshots, the problem is with the menu link on the right of the third step, where the actual hyperlink text is underlined through text formatting.

Solution

Matei Ciurea wrote:

Your CSS lines that target the submenu actually partially disable the green underline at the bottom of the menu block. But this is useful since I've now deduced something new about how CSS sees these elements.


If you look at my previous collated screenshots, the problem is with the menu link on the right of the third step, where the actual hyperlink text is underlined through text formatting.

 Hi Matei,

Please check the attached OML.I had tested on chrome,edge,Firefox it is not showing underline .

Please check once i had added css at submenuitem as well .

Hope this help

Thanks

AD

 

Solution

The CSS below from your OML is what worked. Appreciate the help AD.


.app-menu-links a:hover, .app-menu-links a.active,.submenu-item a{

text-decoration: none;

}