I have written some HTML-CSS in a file, It works perfectly in the browser but when I change the extendion to vm ( for apache velocity) . some of the css doesn't work . why is velocity not able to understand the css.
CODE:
<html>
<head>
<title>Letter</title>
<style>
.row {
width: 100%;
display:flex;
height:80px;
}
.column1 {
width:33%;
float: left;
}
.column2 {
width:33%;
float: center;
}
.column3 {
width:33%;
float: right;
}
body {
padding: 20px;
font-size: 12px;
font-family: Arial,Arial Unicode MS,Quivira,sans-serif,Wingdings;
}
#rcorners2 {
border-radius: 25px;
align-items:center;
border: 1px solid grey;
padding: 20px;
width: 1000px;
height: 50px;
display:flex;
}
.vl {
border-left: 1px solid grey;
height: 50px;
}
.gap{width:200px;background:none;height:200px;display:inline-block;}
</style>
</head>
<body>
<div class="row">
<div class="column1">
<img src="https://www.iconfinder.com/data/icons/pictype-free-vector-icons/16/home-512.png" height="50px" width="250" />
</div>
<div class="column2">
<h1 style="text-align: center;"> Letter Head</h1>
</div>
<div class="column3">
<h2 style="color:#AE275F;text-align: right;">SAMPLE</h2>
</div>
</div>
<div>
<div id="rcorners2" > </div>
<div>
<p>Date </p>
<p>MAY 28,2020</p>
</div>
<div class="gap">
</div>
<div class="vl"></div>
</div>
</body>
</html>
The problem was not with my velocity template. I was using Itext5 to convert HTML to PDF and as Itext5 does not support HTML5 , some of the features weren't working.
I am using openHtmlToPdf library for converting HTML to PDF and the css works perfectly now.
I have records of products in my mysql database (I'm talking about a spring MVC java project using hibernate).
I have a html (and css) form of a search screen, here is its code:
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
#media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
</style>
</head>
<div class="topnav">
<a class="active" href="#home">Home</a>
About
Contact
<div class="search-container">
<form action="/search1">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div style="padding-left:16px">
</div>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<h2>Search Results</h2>
<table>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Product Price</th>
</table>
</body>
</html>
I also have a java function that connect to my database and fetches the correct search results (currently it just prints the results to the console) , here is that function:
#RequestMapping("/results")
public String results(UserSearch search){
Configuration cfg = new Configuration();
cfg.configure("hibernate.cfg.xml");
SessionFactory factory = cfg.buildSessionFactory();
Session session = factory.openSession();
ArrayList<ProductsEntity> li = (ArrayList<ProductsEntity>)session.createQuery("from ProductsEntity").list();
for (ProductsEntity c: li) {
if (c.getProductName().toLowerCase().contains(search.getSearch().toLowerCase())){
System.out.println(c.getProductName());
}
}
session.close();
factory.close();
return "results";
}
What I want to do is to insert those results from the java function into the html form (so that the html will contain a table with the search results), does anyone knows are?
Thanks!
I would say, your form in the HTML page must be a tag <form:form>
and assigned a modelattribute. I believe it will be a ProductsEntity.
The binding of the form tag is explained here.
You will have include the taglib library for tag to work.
Include <%# taglib uri="http://www.springframework.org/tags/form" prefix="form"%> between the <!DOCTYPE html> and the <html> tag.
I'm trying to index some strings onto an ElasticSearch server that I have running on a DigitalOcean droplet. The following code compiles just fine. However when I run it, I get different o/p's for the different Curl requests I make. For some curl requests, I get 'Authorization required', and for some, I get the Apache2 Ubuntu Default Page's contents on the terminal. Is this a network issue? Please Help. Thanks.
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.DocumentBuilder;
import org.w3c.dom.Document;
import org.w3c.dom.NodeList;
import org.w3c.dom.Node;
import org.w3c.dom.Element;
import java.io.File;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import java.io.*;
class SampleJSON
{
String row_id;
String date;
String body;
String title;
String score;
public SampleJSON(String row_id, String title, String body, String date, String score)
{
this.row_id = row_id;
this.date = date;
this.body = body;
this.title = title;
this.score = score;
}}
public class ParseXML {
public static void main(String argv[]) {
try {
File Android_API = new File("/home/bhargav/Downloads/Independent Study/Android API/Posts.xml");
DocumentBuilderFactory dbFactory = DocumentBuilderFactory.newInstance();
DocumentBuilder dBuilder = dbFactory.newDocumentBuilder();
Document doc = dBuilder.parse(Android_API);
doc.getDocumentElement().normalize();
System.out.println("Root element :" + doc.getDocumentElement().getNodeName());
NodeList nList = doc.getElementsByTagName("row");
System.out.println("----------------------------");
// nList.getLength()
for (int i = 0; i < nList.getLength(); i++) {
Node nNode = nList.item(i);
//System.out.println("\nCurrent Element :" + nNode.getNodeName());
if (nNode.getNodeType() == Node.ELEMENT_NODE) {
Element eElement = (Element) nNode;
String keyword = "device";
String text = eElement.getAttribute("Title");
String eliminateLineBreaks = eElement.getAttribute("Body");
eliminateLineBreaks.replace("\n", "");
//System.out.println(text);
ParseXML obj = new ParseXML();
if(obj.search(keyword, text))
{
SampleJSON json = new SampleJSON(eElement.getAttribute("Id"), eElement.getAttribute("Title"), eElement.getAttribute("Body"), eElement.getAttribute("CreationDate"), eElement.getAttribute("Score"));
Gson gson = new Gson();
String serverName = "localhost";
String indexName = "android_api";
String typeName = "posts.xml";
//String keyword = "1";
String requestURL = String.format("curl -XPOST --anyauth \"http://%s:9200/%s/%s/%s/\" -d\'{\"Row_id\":\"%s\",\"Title\":\"%s\"}\'",serverName,indexName,typeName,keyword, eElement.getAttribute("Id"), eElement.getAttribute("Title"));
System.out.println(requestURL);
StringBuffer output = new StringBuffer();
Process p;
try {
p = Runtime.getRuntime().exec(requestURL);
p.waitFor();
BufferedReader reader =
new BufferedReader(new InputStreamReader(p.getInputStream()));
String line = "";
while ((line = reader.readLine())!= null) {
output.append(line + "\n");
}
} catch (Exception e) {
e.printStackTrace();
}
System.out.println(output);
}
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
public boolean search(String keyword, String text)
{
int length = keyword.length();
for(int i=0; i<=text.length()-length; i++)
{
if(i!=text.length()-length)
{
String temp = String.valueOf(text.substring(i, i+length));
if(temp.equalsIgnoreCase(keyword))
return true;
else
return false;
}
else if(i==text.length()-length)
{
String temp = String.valueOf(text.substring(i));
if(temp.equalsIgnoreCase(keyword))
return true;
else
return false;
}
else
{System.out.println("Alert"); return false;}
}
return false;
}
}
Output on the terminal:
curl -XPOST --anyauth "http://localhost:9200/android_api/posts.xml/device/" -d'{"Row_id":"7902","Title":"Device recognition on Android SDK"}'
<html>
<head><title>401 Authorization Required</title></head>
<body bgcolor="white">
<center><h1>401 Authorization Required</h1></center>
<hr><center>nginx/1.10.0 (Ubuntu)</center>
</body>
</html>
curl -XPOST --anyauth "http://localhost:9200/android_api/posts.xml/device/" -d'{"Row_id":"10325","Title":"Device recognized as ????? in ubuntu"}'
curl -XPOST --anyauth "http://localhost:9200/android_api/posts.xml/device/" -d'{"Row_id":"13793","Title":"Device stuck on "obtaining IP address", then sets network to "disabled""}'
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
Modified from the Debian original for Ubuntu
Last updated: 2014-03-19
See: https://launchpad.net/bugs/1288690
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Apache2 Ubuntu Default Page: It works</title>
<style type="text/css" media="screen">
* {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
body, html {
padding: 3px 3px 3px 3px;
background-color: #D8DBE2;
font-family: Verdana, sans-serif;
font-size: 11pt;
text-align: center;
}
div.main_page {
position: relative;
display: table;
width: 800px;
margin-bottom: 3px;
margin-left: auto;
margin-right: auto;
padding: 0px 0px 0px 0px;
border-width: 2px;
border-color: #212738;
border-style: solid;
background-color: #FFFFFF;
text-align: center;
}
div.page_header {
height: 99px;
width: 100%;
background-color: #F5F6F7;
}
div.page_header span {
margin: 15px 0px 0px 50px;
font-size: 180%;
font-weight: bold;
}
div.page_header img {
margin: 3px 0px 0px 40px;
border: 0px 0px 0px;
}
div.table_of_contents {
clear: left;
min-width: 200px;
margin: 3px 3px 3px 3px;
background-color: #FFFFFF;
text-align: left;
}
div.table_of_contents_item {
clear: left;
width: 100%;
margin: 4px 0px 0px 0px;
background-color: #FFFFFF;
color: #000000;
text-align: left;
}
div.table_of_contents_item a {
margin: 6px 0px 0px 6px;
}
div.content_section {
margin: 3px 3px 3px 3px;
background-color: #FFFFFF;
text-align: left;
}
div.content_section_text {
padding: 4px 8px 4px 8px;
color: #000000;
font-size: 100%;
}
div.content_section_text pre {
margin: 8px 0px 8px 0px;
padding: 8px 8px 8px 8px;
border-width: 1px;
border-style: dotted;
border-color: #000000;
background-color: #F5F6F7;
font-style: italic;
}
div.content_section_text p {
margin-bottom: 6px;
}
div.content_section_text ul, div.content_section_text li {
padding: 4px 8px 4px 16px;
}
div.section_header {
padding: 3px 6px 3px 6px;
background-color: #8E9CB2;
color: #FFFFFF;
font-weight: bold;
font-size: 112%;
text-align: center;
}
div.section_header_red {
background-color: #CD214F;
}
div.section_header_grey {
background-color: #9F9386;
}
.floating_element {
position: relative;
float: left;
}
div.table_of_contents_item a,
div.content_section_text a {
text-decoration: none;
font-weight: bold;
}
div.table_of_contents_item a:link,
div.table_of_contents_item a:visited,
div.table_of_contents_item a:active {
color: #000000;
}
div.table_of_contents_item a:hover {
background-color: #000000;
color: #FFFFFF;
}
div.content_section_text a:link,
div.content_section_text a:visited,
div.content_section_text a:active {
background-color: #DCDFE6;
color: #000000;
}
div.content_section_text a:hover {
background-color: #000000;
color: #DCDFE6;
}
div.validator {
}
</style>
</head>
<body>
<div class="main_page">
<div class="page_header floating_element">
<img src="/icons/ubuntu-logo.png" alt="Ubuntu Logo" class="floating_element"/>
<span class="floating_element">
Apache2 Ubuntu Default Page
</span>
</div>
<!-- <div class="table_of_contents floating_element">
<div class="section_header section_header_grey">
TABLE OF CONTENTS
</div>
<div class="table_of_contents_item floating_element">
About
</div>
<div class="table_of_contents_item floating_element">
Changes
</div>
<div class="table_of_contents_item floating_element">
Scope
</div>
<div class="table_of_contents_item floating_element">
Config files
</div>
</div>
-->
<div class="content_section floating_element">
<div class="section_header section_header_red">
<div id="about"></div>
It works!
</div>
<div class="content_section_text">
<p>
This is the default welcome page used to test the correct
operation of the Apache2 server after installation on Ubuntu systems.
It is based on the equivalent page on Debian, from which the Ubuntu Apache
packaging is derived.
If you can read this page, it means that the Apache HTTP server installed at
this site is working properly. You should <b>replace this file</b> (located at
<tt>/var/www/html/index.html</tt>) before continuing to operate your HTTP server.
</p>
<p>
If you are a normal user of this web site and don't know what this page is
about, this probably means that the site is currently unavailable due to
maintenance.
If the problem persists, please contact the site's administrator.
</p>
</div>
<div class="section_header">
<div id="changes"></div>
Configuration Overview
</div>
<div class="content_section_text">
<p>
Ubuntu's Apache2 default configuration is different from the
upstream default configuration, and split into several files optimized for
interaction with Ubuntu tools. The configuration system is
<b>fully documented in
/usr/share/doc/apache2/README.Debian.gz</b>. Refer to this for the full
documentation. Documentation for the web server itself can be
found by accessing the manual if the <tt>apache2-doc</tt>
package was installed on this server.
</p>
<p>
The configuration layout for an Apache2 web server installation on Ubuntu systems is as follows:
</p>
<pre>
/etc/apache2/
|-- apache2.conf
| `-- ports.conf
|-- mods-enabled
| |-- *.load
| `-- *.conf
|-- conf-enabled
| `-- *.conf
|-- sites-enabled
| `-- *.conf
</pre>
<ul>
<li>
<tt>apache2.conf</tt> is the main configuration
file. It puts the pieces together by including all remaining configuration
files when starting up the web server.
</li>
<li>
<tt>ports.conf</tt> is always included from the
main configuration file. It is used to determine the listening ports for
incoming connections, and this file can be customized anytime.
</li>
<li>
Configuration files in the <tt>mods-enabled/</tt>,
<tt>conf-enabled/</tt> and <tt>sites-enabled/</tt> directories contain
particular configuration snippets which manage modules, global configuration
fragments, or virtual host configurations, respectively.
</li>
<li>
They are activated by symlinking available
configuration files from their respective
*-available/ counterparts. These should be managed
by using our helpers
<tt>
a2enmod,
a2dismod,
</tt>
<tt>
a2ensite,
a2dissite,
</tt>
and
<tt>
a2enconf,
a2disconf
</tt>. See their respective man pages for detailed information.
</li>
<li>
The binary is called apache2. Due to the use of
environment variables, in the default configuration, apache2 needs to be
started/stopped with <tt>/etc/init.d/apache2</tt> or <tt>apache2ctl</tt>.
<b>Calling <tt>/usr/bin/apache2</tt> directly will not work</b> with the
default configuration.
</li>
</ul>
</div>
<div class="section_header">
<div id="docroot"></div>
Document Roots
</div>
<div class="content_section_text">
<p>
By default, Ubuntu does not allow access through the web browser to
<em>any</em> file apart of those located in <tt>/var/www</tt>,
public_html
directories (when enabled) and <tt>/usr/share</tt> (for web
applications). If your site is using a web document root
located elsewhere (such as in <tt>/srv</tt>) you may need to whitelist your
document root directory in <tt>/etc/apache2/apache2.conf</tt>.
</p>
<p>
The default Ubuntu document root is <tt>/var/www/html</tt>. You
can make your own virtual hosts under /var/www. This is different
to previous releases which provides better security out of the box.
</p>
</div>
<div class="section_header">
<div id="bugs"></div>
Reporting Problems
</div>
<div class="content_section_text">
<p>
Please use the <tt>ubuntu-bug</tt> tool to report bugs in the
Apache2 package with Ubuntu. However, check <a
href="https://bugs.launchpad.net/ubuntu/+source/apache2">existing
bug reports</a> before reporting a new bug.
</p>
<p>
Please report bugs specific to modules (such as PHP and others)
to respective packages, not to the web server itself.
</p>
</div>
</div>
</div>
<div class="validator">
<p>
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" />
</p>
</div>
</body>
</html>
Shouldn't your CURL request look like this, I guess you're missing out a space after -d. Try this:
curl -XPOST --anyauth "http://localhost:9200/android_api/posts.xml/device/" -d '{"Row_id":"7902","Title":"Device recognition on Android SDK"}'
In your code:
String requestURL = String.format("curl -XPOST --anyauth \"http://%s:9200/%s/%s/%s/\" -d \'{\"Row_id\":\"%s\",\"Title\":\"%s\"}\'",serverName,indexName,typeName,keyword, eElement.getAttribute("Id"), eElement.getAttribute("Title"));
..........................................................................................................................................................^
This SO could be helpful!
I am using login form(in vaadin). I used CSS style to get the background color. The problem is that its not showing the effect to 100% of the page.
I did "inspect" on chrome and found that "v-verticallayout v-layout v-vertical v-widget v-has-width" has no height at element.style. If I add height to element.style to 100%( on the inspect tool of chrome), the effect can be seen to full page. How can I fix this in CSS
following is my CSS
.dmr{
#include valo;
background-image: url(sciome-vector-logo.png);
background-position: left top;
background-repeat: no-repeat;
background-size: 120px 80px;
/* Applies to every page */
html {
height:100%;
margin-bottom:1px ;
color:black;
}
body {
overflow-y: scroll;
}
.v-slot {
overflow: hidden;
height:100%;
}
.entire_div {
text-align: center;
height: 100%;
}
.v-verticallayout-entire_content_div {
text-align: center;
height:100%;
width:100%;
}
.div{
height: 100%;
}
.entire_content_div {
margin: auto;
height: 100%;
}
/* Main view properties */
.v-slot-page_content_div {
height: calc( 100% - 55px );
overflow-y: auto;
}
.page_content_div {
text-align: center;
min-height: 80vh;
height: 100%;
}
.v-slot-login {
height: 100%;
}
}
Based on the CSS you've provided, none of those selectors are selecting the element you added height: 100%; to the element.style in the browser. Something like this might select it:
.v-verticallayout {
height: 100%;
}
I also noticed you have a .div selector in your CSS but I'm thinking you meant the selector div, not a class called div.
EDIT:
Changed the selector suggested to be more specific so it doesn't override the other elements with the same classes that OP was running into issues with.
This on solution of many where you'd just trickle down till you get specific enough that it won't affect your other elements.
div.v-verticallayout.v-layout.v-vertical.v-widget.v-has-width {
height: 100%;
}
I am trying to minify an html page via my Java code. I am using https://code.google.com/archive/p/htmlcompressor/ to do the compression.
Here is my method for minification :
public static String minifyHtml(String html) {
HtmlCompressor htmlCompressor = new HtmlCompressor();
htmlCompressor.setRemoveSurroundingSpaces(HtmlCompressor.ALL_TAGS);
htmlCompressor.setPreserveLineBreaks(false);
htmlCompressor.setCompressCss(true);
return htmlCompressor.compress(document.toString());
}
However this doesn't minify the inline css that I have in the html.
For example for the following tag:
<div class="content" style="font-family: Helvetica,sans-serif,Lucida Sans Unicode; font-size: 12pt; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(0,0,0); background-color: transparent; margin-top: 0.0pt; margin-bottom: 0.0pt; text-indent: 0.0in; margin-left: 0.0in; margin-right: 0.0in; text-align: left; border-style: none; border-width: 0.0pt; border-color: rgb(0,0,0); padding: 0.0pt; white-space: pre-wrap;">
Can this be minified using the HtmlCompressor? If not then is there any other library that does it?
Simple Java Replace on the string object
String html_new = html.replace(': ' , ':').replace('; ' , ';');
return html_new;