0

i have the problem that we are using SAP for our ticket system and the design is absolutely killing me. So i used CSS to make changes to it to make it somewhat bearable. My issue is now that they constantly change nonsense things and now they have even removed the title inside the span element.

I have tried to figure it out based on various ids that are included in the span but they are generic and change with every element so i had unfortunately no luck here.

So basically what i am trying to edit is various priorities like: Low Medium High Critical

So far this worked by: 

[title="medium"] {color: #ffc14f !important; font-weight: bold !important;}

However as i said they removed the title part which now makes things really difficult for me.

It looks now similar to this(the title is missing):

<span id="dropdownlistboxfBiBbQKnbu_ORlZZW_39-text-listdefintionwN9QyApR3q_23BFLBSdAqG_11-10"
data-sap-ui="dropdownlistboxfBiBbQKnbu_ORlZZW_39-text-listdefintionwN9QyApR3q_23BFLBSdAqG_11-10"
data-sap-automation-id="fBiBbQKnbu_ORlZZW" 
data-help-id="fBiBbQKnbu_ORlZZW"
class="sapMText sapMTextBreakWord sapMTextMaxWidth sapUiSelectable"
style="text-align:left">
Medium
</span>

Further properties of the element:

innerHTML: "Medium"
innerText: "Medium"
outerText: "Medium"

>lastChild: text
>>data: "Medium"
>>nodeName: "#text"
>>nodeType: 3
>>nodeValue: "Medium"

Unfortunately the ids (which i altered here) change for every element, even when it displays the same. So even though i tried to search for these or partly for them i was unable to get it to work properly.

After all the span content is still "Medium" but i was unable to find a way to explicitly find a working CSS way to identify and then modify it.

Here is what i tried so far but without luck:

[span*=Medium] {color: #ffc14f !important}
[id*=fBiBbQKnbu] {color: #ffc14f !important}
span[innerText="Medium"] {color: #ffc14f !important}
[innerText="Medium"] {color: #ffc14f !important}
[innerHTML="Medium"] {color: #ffc14f !important}

I tried even more variations of the ones given above but so far no luck.

This is driving me crazy, if anyone could help me out here i would really appreciate the help.

Should any further details be needed please let me know.

Dante
  • 23
  • 1
  • 4

1 Answers1

0

CSS has different attribute selectors.

[att] Represents an element with the att attribute, whatever the value of the attribute.

[att=val] Represents an element with the att attribute whose value is exactly "val".

[att~=val] Represents an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly "val". If "val" contains whitespace, it will never represent anything (since the words are separated by spaces). Also if "val" is the empty string, it will never represent anything.

[att^=val] Represents an element with the att attribute whose value begins with the prefix "val". If "val" is the empty string then the selector does not represent anything.

[att$=val] Represents an element with the att attribute whose value ends with the suffix "val". If "val" is the empty string then the selector does not represent anything.

Now you would need to find an attribute in your span which identifies the priority level of your span.

Considering you tried

[id*=fBiBbQKnbu] {color: #ffc14f !important}

maybe try

span[id*=fBiBbQKnbu] {color: #ffc14f !important}

instead.

Community
  • 1
  • 1
Bogy
  • 21
  • 5
  • this does work, however it only edits the element with that specific id and not all of them due to the fact that these ids unfortunately change with every element. So i have one "Medium" with one id but another similar "Medium" element but it gets another id. this unfortunately does not help. – Dante Aug 19 '19 at 08:05