Widget Display Differences between Web AppBuilder and Web Map Portal. Help!

[LarryCosgrove]

Is there a way to make my widget look the same in Web Map Portal as it does in Web AppBuilder?

I am still very new to all this and although there are many things I like about building Widgets, I am still frustrated by what seems to this noobie as strange behaviors.

Is there anything I can or need to do on the Web Map Portal side or within the Widget code itself to make them appear and behave identically? I have attached the a display showing the displayed differences.

When the widget code is moved from the Web AppBuilder to the Portal Web Map, it seems to inherit or is overridden by behaviors on the Web Map side. For instance:

On the Web AppBuilder side, I have added code to automatically resize the Widget based on how much information is displayed. This is so the user does not have to use the scrollbar to see all of the information. However on the Web Map side, the same widget code seems to have placed an extra line between the Bold Label (e.g., Zip Code) and it's Number. This doesn't only look strange to the user, the extra line forces the information lower and activates the Scroll Bar. With the Scroll Bar activated, some text is forced to wraparound such as the Lon-Lat and the School District Name.

Is something on the Portal Web Map side overriding the Widget Code style.css?

Can someone point me to any documentation or provide me an explanation of what might be happening? (Hopefully, both).

Thank you!

[RobertScheitlin__GISP]

Larry,

   The biggest thing you need to understand is that there ARE differences between WAB AGOL, WAB Developer, and WAB Portal. First is that WAB Portal is normally one or two versions behind WAB AGOL.

About release versions—Portal for ArcGIS | ArcGIS Enterprise 

So it is likely that you will see differences between them.

[LarryCosgrove]

Hi Robert,

As always, I appreciate your knowledge about this. Differences in the developments... Could Esri make it any easier for developers?

The examples I included with my questions are actually from modified code from your Identify Widget. I have a suspicion that the Line Spacing or gap between the Feature Class name and its following attributes is being caused by the Information Icon which would normally appear adjacent on the left on each Results row. Within the style.css I have done my best to either comment out or set "Display: none;" on those items I thought might be related. And although I can eliminate the icon, the gap continues to display as seen in the example above; but only on the Portal Web Map side. In my local WAB, everything looks fine.

As you say, it could be just the differences between the versions that are causing this. However, is there something that I may be overlooking that should be done related to the placement or location of the i_info.png icon in either the style.css or Widget.js code that might eliminate this spacing?

Thank you!

larry

[RobertScheitlin__GISP]

Larry,

However, is there something that I may be overlooking that should be done related to the placement or location of the i_info.png icon in either the style.css or Widget.js code that might eliminate this spacing?

   No not that I can tell.

[LarryCosgrove]

Robert,

I suppose what I was asking was, If you wanted to eliminate the i_info.png icon from displaying adjacent to each data row in the results tab, what code would you comment out or change in the Widget.js or style.css files? I feel like I have done that and in the WAB it looks fine. When I move it into the portal Web App, I get the gap. When I put my mouse over that area, the cursor changes into the Directional icon instead of the pointer. It's just a curious problem.

larry 

[RobertScheitlin__GISP]

A css rule of:

.identify-list-item .iconDiv {
  display: none;
}‍‍‍

Would be the easiest.

[LarryCosgrove]

Yes, this is what I would have thought. But I continue to see the same "Line Spacing" or Gap in the Portal Web Map implementation. Still looks perfect in the WAB view. I suppose it could be a difference between the "versions" of Web Map and WAB and how the same style.css code is being interpreted. It seems that whatever code is creating the gap is being ignored in WAB and being interpreted by the Web Map.

The fact that when I move the mouse over the "Gap" the cursor changes to the  Directional cursorand when I move it over a line containing text it turns back into a Pointer must mean something.

Thank you for your comment and your help, Robert.

larry

[LarryCosgrove · Accepted solution]

So as it turned out, one setting in my style.css was being overridden by a value in the server\apps\16\themes\LauchpadTheme\styles\style2\css\launchpad.css.

I made a change to the the style.css height property from 33px to 18px as follows:

.claro .jimu-launchpad-panel .identify-list-item .title {

  color: black;

  height: 18px !important;

}

And now everything is spaced great.