2

I'm trying to create some in-line hyperlinks in my tables to allow people to edit/delete the selected item (and to provide bread-crumb style navigation links at the top of the screen). To achieve this, I've created a customscripts.js file as follows which contains the following function definition:

FormatElement = function (element, contentItem, className) {
    element.className = className;
    element.textContent = contentItem.value;
}

This function basically allows me to apply a custom class to a given element by calling a piece of code on the render or post-render event as follows (where BackLink is a variable data item whose value is set in the create() method of the screen):

myapp.MyScreen.created = function (screen) {
    // Write code here.
    screen.DeleteLink = "delete"; /* Initializes delete link variable text */
    screen.EditLink = "edit";   /* Initializes edit link variable text */
    screen.BackLink = "Back to Manage Accounts";
};
myapp.MyScreen.BackLink_postRender = function (element, contentItem) {
    // Write code here.
    element = FormatElement(element, contentItem, "ui-breadcrumb")
};myapp.MyScreen.EditLink_render = function (element, contentItem) {
    // Write code here.
    element = FormatElement(element, contentItem, "ui-action-link");
};

In user-customization.css I've added a couple of new styles corresponding to the classes referenced by the FormatElement calls.

.ui-action-link {
    font-weight: normal;
    text-decoration: dashed;
    color: #0c2b90;
}

.ui-breadcrumb {
    font-weight: normal;
    text-decoration: dashed;
    font-size: x-large;
    color: #0c2b90;
}

However, when I run my application, the dashed text-decoration property seems to have been over-ridden with a default value of none.

Can anyone provide any suggestions on why this might be happening?

Ozziemedes
  • 311
  • 1
  • 6
  • Chrome dev tools should help you investigate this more effectively. When you inspect the element in question, you'll see the list of properties in a pane beside the styles pane, generally below the computed box model. Find the property in question, and expand the arrow to see what style rule sits at the top of the list. – kinakuta Aug 15 '14 at 08:14
  • @kinakuta: I used the "Inspect Element" and DOM inspector in IE 11/VS 2013 respectively to do this... just showed "text-decoration: dashed" with strike-through, no superseding style and the style was un-ticked in the DOM inspector. Any ideas? – Ozziemedes Aug 15 '14 at 16:35
  • For the record, I've now tried using the !important keyword to try to force the CSS style to over-ride any specificity constraints I might be hitting. No joy. :( – Ozziemedes Aug 15 '14 at 17:10
  • Other things attempted: Added the following: `border-bottom: 1px dotted #ba0000; display: inline;` This worked fine for a DIV but not helpful with a TD cell. So... now I need to understand if there's any way to underline content in a TD cell that needs to act as a hyperlink. All specific to LightSwitch 2013 of course. :) – Ozziemedes Aug 18 '14 at 00:36
  • The question is not what style is applied, it's what source is applying the inherited style. You should be able to see this as well from IE11 dev tools under the computed styles section for the style in question. Like Chrome dev tools, it will list the source of the applied styles, with the ones that are overridden crossed out, and the source that "won" at the top. – kinakuta Aug 18 '14 at 01:09
  • Computed styles shows a single style (mine) that has been crossed out and unchecked. – Ozziemedes Aug 18 '14 at 06:21
  • for which style property? – kinakuta Aug 18 '14 at 08:46
  • That was for text-decoration, but I've checked text-decoration-line and text-decoration-style as well and they're both getting the same treatment. I'm guessing it's an unsupported browser feature when put in a DIV or a TD. – Ozziemedes Aug 23 '14 at 18:03

1 Answers1

0

Adding the following to user-customization.css has always worked for me:

.msls-tap .msls-text {
    color: #0000EE;
    text-decoration: underline;
}
rothschild86
  • 1,433
  • 16
  • 22