Exploring Java Programming with HTMLEditorKit

Here is my source code:

I am trying to change the font color using only CSS.

This is how I am inserting HTML:

<span class="tag1">I love <span class="tag2">apple</span></span><span class="tag2"> pie</span>

When using tag1, I expect "I love apple" to be displayed in red font.

However, only "I love" appears in red font.

How can I correct this issue?

doc.getStyleSheet().addRule(".tag1 {color : red;}");

try {

    kit.insertHTML(doc, doc.getLength(), "<span class=\"tag1\">I love <span class=\"tag2\">apple</span></span><span class=\"tag2\"> pie</span>", 0, 0, null);
} catch (IOException e1) {

    e1.printStackTrace();
} catch (BadLocationException e1) {

    e1.printStackTrace();
}

Answer №1

The reason for this issue is that you have assigned the red color to .tag1 only, while the

<span class="tag2">apple</span>
is a span element within .tag1, so it does not inherit the color css property directly. As @hoosssein mentioned, if there is a default (or any) css color value for the span element, it will not adopt the style of its parent element, which explains the current behavior.

To resolve this, you should include the following code:

doc.getStyleSheet().addRule(".tag1 span {color: red;}");

This way, every span element within the .tag1 class will also be styled with a red color.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switch the view to a grid layout upon clicking

Using bootstrap 5, I've successfully created a list view: <div class="col"> Click to switch to grid/list </div> Below is the content list: <div class="row mt-3 list"> list view ... ..... ....... </div ...

How can I use JQuery to enable or disable checkboxes upon loading?

I am looking to implement a feature where the checkboxes are enabled when the .group is checked and disabled when it is unchecked. Although I can toggle between them, I'm facing difficulty in disabling the unchecked checkbox using the .group. Upon lo ...

Having difficulty decoding audio streams in Flask Socket.IO due to a file received by the Python server

Thank you for taking the time to go through this post. I have been diligently working on a project that involves capturing audio input from the client side and then sending the recorded audio to a Python server for analysis. However, I have hit a roadblock ...

jQuery swap- enhancing the appearance of numerical values

I am looking to customize specific characters within my <code> tag. While searching online, I came across the .replace() function but encountered issues when trying to style numbers. My goal is to change their appearance without altering the text its ...

Display an image when the iframe viewport is reduced in size by utilizing media queries

I am looking to showcase a demo.html page within a 400px square iframe. When the viewport is smaller than 400px, I want demo.html to only display an image. Then, when clicking on that image in demo.html, the same page should switch to fullscreen mode. Sim ...

Issue with PHP and HTML Character Interactions

My variable looks like this: $name=' 18 " LCD TV '; When attempting to use it in an HTML input, the characters after the " do not display. Any suggestions on how to fix this issue? ...

Connecting queries in php

I am looking to connect searches from a checkbox form together. For example, if I select checkboxes a and b, I want the search results to display two different outcomes. <form role="form" action="R.php" method="post"> <div class="form-group"&g ...

Clicking on a checkbox in Selenium WebDriver with Java according to HTML structure

Attempting to select the checkbox using the following code <label class="checkboxPlainLabel" for="Quote_SensitiveDataConfirmation"> ...

PHP appears to be failing to gather input values from form submissions using both the POST and GET methods

I have been working on setting up a login and logout system, but I am encountering an issue with sending a hidden value for logging out. Despite trying different approaches to solve this problem, I either receive error messages (while the code actually wor ...

Limit text to two lines inside a cell in a table

Apologies for not providing any evidence of my own efforts. I'm looking to wrap text in a table cell, but limit it to just 2 lines. Expanding the width is not possible. Any suggestions on how to achieve this? ...

Various CSS libraries offer a range of design options, including DataTables and Bootstrap

Incorporating both Bootstrap and DataTable into my design has caused conflicts with CSS styles. This issue extends beyond just these libraries, making me wonder if there is a way to prioritize my own styles over library styles. Can anyone provide guidanc ...

Display DIV when the page loads, and hide it when any radio button is clicked

If you're looking to create a page with hidden content that is revealed when specific radio buttons are clicked, you've come to the right place. The concept is simple - the page starts off blank, but upon selecting a radio button, one div is show ...

Styling the Container Component in ReactJS

I need to apply some styling to the "Forms_formline__3DRaL" div (shown below). This div is generated by a component, but it seems that the style I want to add is being applied to the input instead of its parent div. How can I use ReactJS to set the style " ...

The straightforward use of XMLHttpRequest to retrieve the response xhttp.responseText is not functioning properly

I am facing an issue where this.responseText is not returning the content of the file. Can someone assist me in solving this problem? Thank you. Console.log also does not return the content of the file. function loadMegaContent() { var xhttp = new XMLHtt ...

Guide to activating animation on one element when hovering over another element?

I am setting up an HTML 5 range element and looking to enhance the user experience. Specifically, I want to implement a feature where when the user hovers over the range, the height and width of the thumb should increase to 12 pixels. CSS .myrange::-webk ...

Conditional statement in Javascript for document.cookie

I am attempting to create a basic if statement that relies on the value of a cookie. The function looks like this: function setHomePage() { if ($.cookie('settingOne') == 'jjj') { $('.secO').css('display', & ...

Is there a way to set a custom background image for a specific Vaadin view?

I am developing a view in Vaadin that looks something like this... public class PosAppPickerView extends VerticalLayout implements View { Everything is functioning smoothly, but I am interested in incorporating an image as the background for the body/mai ...

Inserting HTML content into a DIV with the help of jQuery

Looking for a solution with my index.html file. I want to load other HTML files into a DIV by clicking on buttons. Here's an example of what I'm trying to achieve: I've searched through various examples online, but none seem to work for ...

Is it possible to remove strings within HTML elements?

{% for term in terms %} <div class="term term-count-{{loop.index}}"> <b>{{ term }}</b>: &nbsp;&nbsp; {{ terms[term] }} &nbsp;&nbsp; </div> {% endfor %} 'terms' is a dictionary w ...

Tips for obtaining the precise XPath or locator expression in Selenium using Java

I am in need of an xpath expression. The locators have already been declared using the @FindBy annotation, but I require getting it during the test case execution regardless of which locator is used. Once the element is located, the following xpath expres ...