0

I create the HTML for a SELECT list (it's not a dropdown!) and its OPTIONs through Java (8):

static final String font="style=\"font-family: 'Courier New'\"";
out.println("<SELECT name='l' id='selectList' size=19 style='width: 400px'>\n");
out.println("<OPTION value='"+value+"' "+font+" >"+someText+"</OPTION>");

The HTML then looks like this:

<SELECT name='l' id='selectList' size=19 style='width: 400px'>
<OPTION value='0' style="font-family: 'Courier New'" >Some Text</OPTION>

Next to the list there's also an "Append" button that appends more elements through JavaScript:

var selectList = document.getElementById("selectList");
var option = new Option(mytext,myvalue);
selectList.appendChild(option);

Problem: This new option doesn't use the "Courier New" font.

My "styles.css" file already has a custom "h3" and "h4" but I now also want to create a custom "substyle" that I can then set the option in both HTML and Javascript to. Padding, font size,... should all be the default, I only want to set the font-family of these specific options to "Courier New" and do it in a way that if I want to change it again later on, I only have to do it in a single spot (the css). This style should only affect the options I use it on, the others should all use the default style or whatever I set them to.

Question: How do I accomplish this (without adding an extra library)?

I'm aware there are already a bunch of questions asking similar things but they're usually at least 5 years old, some refer to dropdowns and some even say that it's not possible to change what an option looks like, which changed in the last couple of years.

What I've tried:

Java/HTML:

out.println("<OPTION value='"+value+"' "+"class=\"somethingsomething\""+" >"+someText+"</OPTION>");
//<OPTION value='0' class="somethingsomething" >Some Text</OPTION> //Result

CSS:

.somethingsomething { //Also tried "option.somethingsomething"
    font-family: 'Courier New', monospace;
}

This doesn't seem to work (tested with Firefox), the options use the default font.

Neph
  • 1,823
  • 2
  • 31
  • 69
  • 1
    It should work. Did you inspect the rendered html to see if the class is applied to the specific option ? can you maybe copy/paste the rendered html code here ? ( the whole HTML structure of the – Mihai T Jan 12 '21 at 12:38
  • You mean rightclick - "page source"? Yes, you can find the result in "what I've tried". I also just tried adding `option.classList.add("somethingsomething");` before `appendChild` in my JS code but that also doesn't work. – Neph Jan 12 '21 at 12:41
  • 1
    i meant `inspect element` or `ctrl+shift+i` in chrome. `ctrl+shift+c` in firefox. And please copy paste the WHOLE rendered `html` structure of the `` element in the 'inspect element' html structure. What i want to see if the class is actually applied to the option element and if styles are applied to that class at least in css. – Mihai T Jan 12 '21 at 12:45
  • You can try this: https://stackoverflow.com/a/64534115/11171286 – Manas Khandelwal Jan 12 '21 at 12:46
  • @MihaiT There are multiple 100 options, so sorry, I can't copy the whole thing but the `select` and the first `option` look like exactly like what I posted in my question. Clicking on the `select` shows on the right: `Element { width: 400px }`. For the options it's just an empty: `Element {}`. – Neph Jan 12 '21 at 12:53
  • @ManasKhandelwal Please read my question. I don't want to add an additional library and I also don't want to apply the style to the whole `select` but only to the `option` (everything should be set to default, apart from the font!). – Neph Jan 12 '21 at 12:55
  • 1
    If you have so many options then my question should be more specific. Is the class added to the option ? are the styles added ( to that option with class `somethingsomething ` specifically, do they appear in the ' inspect element ' style column ? – Mihai T Jan 12 '21 at 12:56
  • @MihaiT No, if I click on an option the `Element` on the right is empty. I already cleaned the project, going to try clearing the browser cache now, even though I'm not sure how that would affect the fonts. – Neph Jan 12 '21 at 13:00
  • `No, if I click on an option the Element on the right is empty` . You should click on the specific option. the one with `somethingsomething ` class name ( the one you add from javascript ). Or there aren't any options with that class name ? – Mihai T Jan 12 '21 at 13:02
  • That's what I meant, I clicked on specific options. They all say `class="somethingsomething"` but it doesn't show anything in the "inspect" part on the right, there's only an empty `Element`. – Neph Jan 12 '21 at 13:04
  • 1
    Then there might be a problem with the way your css styles are being loaded. Are other styles ( from the same css file as the one that includes the somethingsomething style ) working ? because as you can see here -> https://jsfiddle.net/zn47cj5p/ your code should work. – Mihai T Jan 12 '21 at 13:10
  • Yes, the rest is working fine. Clearing Firefox' cache also didn't work. I wonder if that's a problem with Eclipse again, going to try a reboot. – Neph Jan 12 '21 at 13:13
  • You can check the styles file that is loaded into the browser to see if it includes your changes ( the `.somethingsomething { font-family: 'Courier New', monospace; }` style ) . The file should be in the Sources tab of the dev tools ( inspect element section ) – Mihai T Jan 12 '21 at 13:18
  • I would implement my own custom list using divs and actins just like the select tag.That way you have full controll of the styles - which is not the case in the option tag – YTG Jan 12 '21 at 13:21
  • @MihaiT There's no "Sources" tab in FF and the "Debugger" only lists the JS file. Instead there's a "Style Editor" tab and you can even edit the css in it. Thanks for your help, especially for telling me about these dev tools! After the reboot I cleaned the project again and all of a sudden it's working. Not sure what Eclipse messed up again... Now even a different weird bugged is fixed: Appending something to the "select" increased the size of its window (as if I'd set it to "size=20") but that only happened once, with the very first new element. – Neph Jan 12 '21 at 13:54
  • @ManasKhandelwal Out of interest I simply added `class=\"somethingsomething\"` to the `select` and removed that part in the options' HTML. It actually changed the font of all of the select's options, even the ones I made it append afterwards. So no need to add an extra library and a ton of code. – Neph Jan 12 '21 at 13:57
  • Glad i could help. I can;t say for sure what caused the problem. My guess is that the style updates you made to your css file weren't actually updated. Maybe a caching issue or a build issue. And yes, dev tools are pretty handy when trying to debug anything from html, css, javascript to network calls and local storage items. Many people here suggest adding extra libraries/plugins for the most simple stuff. You just have to filter those suggestions and figure out ( by researching ) which are actually needed. Happy coding ! :D – Mihai T Jan 13 '21 at 08:09

0 Answers0