Jump to content
Sign in to follow this  
IElite

text-decoration is not working ?

Recommended Posts

I have two style classes I am using

.XListBoxItemStyle{
 color: #000000;
 background-color: #FFFFFF;
 text-decoration: none;
}

.XListBoxItemStyleC{
 color: #000000;
 background-color: #FFFFFF;
 text-decoration: line-through;
}

the color and background work great for both classes, but text-decoration is not working

even tried using 

!important

what am i missing?

Share this post


Link to post
Share on other sites

Try changing

text-decoration: none; to display: inline-block;

and then switch the order

first

.XListBoxItemStyleC{
 color: #000000;
 background-color: #FFFFFF;
 text-decoration: line-through;
}

then below it

.XListBoxItemStyle{
 color: #000000;
 background-color: #FFFFFF;
 display: inline-block;
}

 

see: https://stackoverflow.com/questions/29374006/line-through-not-working-as-should

Share this post


Link to post
Share on other sites

@lynkfs

that does not seem to work either, at least not where I tried it

the context is....i have a custom listboxitems and I am trying to set a style for selected and unselected items. 

below is the appropriate code where i set the styles based on whether it is selected or not and whether or not the item is completed or not

procedure TXListBoxItemData.RemoveSelectedStyle;
begin
  if Completed = True then
   TXListBoxItem(ItemObject).Label.StyleClass:= 'XListBoxItemStyleC'
  else
   TXListBoxItem(ItemObject).Label.StyleClass:= 'XListBoxItemStyle';
  TXListBoxItem(ItemObject).MtnImg.Url:= 'res\mtn32.png';
  TXListBoxItem(ItemObject).RankImg.Url:=  'res\' + intToStr(Rank) + '.png';
end;

procedure TXListBoxItemData.SetSelectedStyle;
begin
  if Completed = True then
   TXListBoxItem(ItemObject).Label.StyleClass:= 'XListBoxItemSelectedStyleC'
  else
  TXListBoxItem(ItemObject).Label.StyleClass:= 'XListBoxItemSelectedStyle';
  TXListBoxItem(ItemObject).MtnImg.Url:= 'res\mtn32b.png';
  TXListBoxItem(ItemObject).RankImg.Url:=  'res\' + intToStr(Rank) + '.png';
end;
.XListBoxItemSelectedStyleC{
 background-color: #000000;
 color: #FFFFFF;
 text-decoration: line-through;
}

.XListBoxItemSelectedStyle{
 background-color: #000000;
 color: #FFFFFF;
text-decoration: none;
}


.XListBoxItemStyleC{
 color: #000000;
 background-color: #FFFFFF;
text-decoration: line-through;
}

.XListBoxItemStyle{
 color: #000000;
 background-color: #FFFFFF;
text-decoration: none;
}

 

Share this post


Link to post
Share on other sites

see if you can see which classes are actually active (DevTools). In the tryout below I manually edited the div of the first line with a line-through decoration 

Which works. Your css has to target the appropriate class

image.png  

Share this post


Link to post
Share on other sites

I do not see any style set to text-decoration: line-through

I do see my custom CSS class "XlistBoxItemSelectedStyleC"  - which means, it is selected and has been completed (therefore should have a strike-through the font)

 

mtqeep.png

Share this post


Link to post
Share on other sites

I have even tried getting asway from the the CSS file and explicity setting the property in the ShowItem event handler

and it still doesnt work
 

procedure TfrmMountains.HandleShowItem(Sender: TW3ListBox; Item: TW3ListBoxItemData);
begin
 if Item.ItemObject is TXListBoxItem then
  begin
    if TXListBoxItemData(Item).Completed then
      TXListBoxItem(Item.ItemObject).Label.Handle.style.setProperty('text-decoration', 'line-through')
    else
      TXListBoxItem(Item.ItemObject).Label.Handle.style.setProperty('text-decoration', 'none');
  

   TXListBoxItem(Item.ItemObject).Label.Caption:= Item.Caption;
   TXListBoxItem(Item.ItemObject).MtnImg.Url:=  'res\mtn32.png';
   TXListBoxItem(Item.ItemObject).RankImg.Url:=  'res\' + intToStr(TXListBoxItemData(Item).Rank) + '.png';
  end;
end;

 

Share this post


Link to post
Share on other sites

I finally created a test demo project...... with a label and a button

procedure TForm1.W3Button1Click(Sender: TObject);
begin
 W3Label1.Handle.style.setProperty('text-decoration', 'line-through');
end;

Still doesn't work

When viewwd in DevTools, it shows ...

<div id="Component6" tabindex="0" class="TW3Label" data-okey="OBJ7" style="z-index: 1; visibility: visible; display: inline-block; overflow: hidden; left: 96px; top: 80px; position: absolute; width: 128px; height: 32px; text-decoration: line-through;">

 

Tested in all three browsers

note: underline also doesn't work

 

I did the same tests with a memo control and it worked!  Seems to be an issue just with Label

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×