Navigating Liferay Portlet in reverse order

I am facing an issue with right to left alignment in my portlet. It displays correctly when tested on a regular HTML page, but switches to left to right alignment when integrated into a Liferay portlet. Below is the code snippet causing this problem:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.patientInfo
{
    direction:rtl;
    border:2px solid;
    width: 100%;
}
.titile
{
    font-weight:bold;
    padding-right:5px;

}
p
{   
    display:inline; 
}
.patientName
{
    background-color:#0CF;
    direction:rtl;
}
.doctorName
{
    background-color:#0CF;
    direction:rtl;  
}
</style>
</head>
<body>
<div class="patientInfo">
<div class="patientName"><p class="titile">نام بیمار:</p><p> اکبر اسدی</p></div>
<div class="doctorName"><p class="titile">نام دکتر:</p><p>مریم اخیانی</p></div>
</div>
</body>

Could you please assist in identifying and resolving the issue?

Answer №1

Organize the style sheet classes into a separate CSS file and then register it in liferay-portlet.xml, allowing Liferay to load it more efficiently. This method is preferred because Liferay trims the head-tag automatically.

Example of liferay-portlet.xml:

<header-portlet-css>/css/main.css</header-portlet-css>

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

Overriding the w-4xl with sm:text-2xl in Tailwind CSS

Struggling to achieve responsive design on my Pages, especially with changing text size when the screen is small. I've been following all the correct steps and maintaining the right order. However, whenever I set 'sm', it seems to override a ...

I am in the process of creating several checkboxes and am looking to incorporate some added functionality

Currently, I am working on a project that involves creating multiple checkboxes. My goal is to implement a specific functionality where only one checkbox can be checked in each group with the correct or incorrect value. Once all groups have been selected, ...

HTML5, canvas covering every element

Below is the code that I am working with: <html> <head> <title>canvas</title> </head> <body> <canvas width="1745" height="569" style="width: 1730px; height: 1680px; position: absolute; z-index: 1"></canvas> ...

Invalid argument type and beyond acceptable range: file:///c:/Tools/MYScript.hta

My task involves creating a script to query an MSSQL database and display its content. However, I keep encountering the error message stating Argument wrong type and that it is out of acceptable range. Can someone please assist me with this issue? Below i ...

Mobile device causing HTML margins to shrink

I've attempted to utilize a few posts here that discuss resizing for mobile devices, but unfortunately, I'm having trouble getting it to work correctly. The margins are causing all the elements to be squished together when viewing the site on a m ...

Intellij IDEA: Maven clean verify build failure: Unable to run org.jasig.mojo.jspc:jspc-maven-plugin:2.0.2:compile goal, JSP compilation error encountered

These are the plugins in my project POM- <build> <plugins> <plugin> <groupId>org.jasig.mojo.jspc</groupId> <artifactId>jspc-maven-plugin</artifactId> ...

"Utilizing Bootstrap to add borders to div elements is a

https://i.sstatic.net/yPt46.png Hey there! I am working on a project using bootstrap 4. I encountered an issue that I can't seem to solve. I placed an image inside a div, set the div's height and width to 200px with overflow hidden. The image w ...

How can CSS files be shared among multiple projects within Visual Studio 2012?

I am working on a Visual Studio Project Solution that includes 3 separate projects. To streamline the process and avoid duplication, I aim to have a shared CSS file for all 3 projects since they all follow the same CSS rules. Despite trying the Add As Lin ...

Is it possible to retrieve values from my model when working with Django Templates and incorporating them in the JavaScript header?

With Django, I have managed to successfully retrieve and display data from my model in the content section of the template. However, I am facing issues retrieving data from the model in the header section of the template. Below is the code --> view.py ...

Ensure that only one checkbox is checked at a time and that unchecking one does not remove the

I am facing an issue with two checkboxes in my code. When I click on the first checkbox in the featured playlist section, another popular genre checkbox should be unchecked. However, only the value changes and the checked mark remains unchanged. Can anyone ...

Failure to highlight items when using the multiple select function

After adding a select all button to a multiple select, I encountered an issue. Although all the items are being selected, they are not highlighted when clicking on the select all button. Below is the code snippet: <div class="label_hd">Profiles* {{ ...

Characters from Font Awesome are invisible on my screen

I am struggling with the font awesome plugin as I am unable to view the characters. Below is my code snippet: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <l ...

Enhance your viewing experience by magnifying a specific element, all while maintaining full control to navigate

Is it possible to create a zoom effect on a webpage that focuses on one specific element while still allowing for navigation and scrolling? I have searched online for plugins like Fancybox and Zoomooz, but none of them offer the functionality I need. I sp ...

HTML script tag failing to load

As a beginner in using scripts in HTML, I'm currently following a tutorial that suggests loading the script after the body for certain reasons. In my own code, I found that I need to place the script both in the head section and after the body. Remov ...

Using <fieldset> allows you to display <select> elements in a vertical arrangement

As I work with this piece of html, JQuery populates my boxes and I am utilizing fieldsets to focus on only the necessary selection before POSTING it to my servlet. However, there seems to be an issue as the content is being displayed vertically when I ac ...

What is the best way to retrieve a value from a database and display it in a radio

Can you help me figure out how to implement this functionality? I have a database with a "boolean" field that stores 0 or 1 values. On an HTML page, there is a radioButton with options for OK or NO. I need to dynamically load the boolean value from the dat ...

Changing the Displayed Content with a Simple Click of a Link

Layout Overview In the process of developing a tool to streamline work tasks, I want to ensure that I am following best practices. My goal is for the website to initially display only column A, with subsequent columns generated upon clicking links in the ...

Is there a way in Angular Material to consistently display both the step values and a personalized description for each step?

Is there a way to display both numerical step values and corresponding custom text in Angular Material? I prefer having the number at the top and the descriptive text at the bottom. Check out this image for reference: https://i.stack.imgur.com/LGMIO.png ...

What is the best way to implement this component into my vue.js project?

I am having trouble integrating this vue component into my app as it is not loading properly. You can find the source of the component here. The following warnings are showing up: Unresolved function or method isNumeric() at line 35 Unused parameter e at ...

Converting a child.jsp file into a modal or overlay using JavaScript: A step-by-step guide

Is it possible to call a child.jsp as a model using JavaScript? I previously accessed the child jsp using showmodaldialog and window.open() with JavaScript, but it opens in another window. I want the child jsp to appear in a modal or overlay view. Can some ...