I am trying to display checkbox using XML worker but unable to do so. I have also tried through CSS but still not able to display the same when converting HTML to PDF. I am using "itextpdf-5.4.2.jar" and "xmlworker-5.4.1.jar". Request you to please help me with an alternative solution other than YaHP Converter because i already completed 90% of my coding. Thanks in advance !!!!
Following is the sample HTML code which i have tried:
<HTML>
<HEAD>
<script>
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
margin-bottom: 10px;
}
label:before {
content:"";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
border-radius: 3px;
}
input[type=checkbox] {
content:"\2713";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
color: #f3f3f3;
text-align: center;
line-height: 15px;
}
input[type=checkbox]:checked + label:before {
content:"\2713";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
color: #f3f3f3;
text-align: center;
line-height: 15px;
}
</script>
</HEAD>
<BODY>
<div class="checkbox">
<input id="check1" type="checkbox" name="check" value="check1" CHECKED/>
<label for="check1">Checkbox No. 1</label>
<br/>
<input id="check2" type="checkbox" name="check" value="check2"/>
<label for="check2">Checkbox No. 2</label>
<br/>
<input id="check3" type="checkbox" name="check" value="check3" checked/>
<label for="check3">Checkbox No. 3</label>
</div>
</BODY>
</HTML>
Following is the output in PDF:
Checkbox No. 1
Checkbox No. 2
Checkbox No. 3
Check this question in stackoverflow.HTML to PDF using iText : How can produce a checkbox
using the Unicode '☐' character you can create.
Related
I was studing this webpage https://dailylogochallenge.com/
And I was trying to recreate the form input buttons. What fixes it on that page is using
*, *:before, *:after{
box-sizing: inherit;
}
I tried on my page but I couldn't come up with the solution.
HTML:
<form action="">
<input type="text" name="firstname" value="First Name">
<input type="text" name="email" value="Email">
<input type="submit" value="Get Started today">
</form>
CSS
*{
margin: 0;
padding: 0;
}
form{
margin-top: 30px;
}
form input{
border: none;
outline: none;
border-bottom: 10px solid black;
padding: 5px;
margin: 0 20px 0 0;
font-size: 1.05rem;
font-weight: 700;
height: 60px;
}
input[type="submit"]{
border: none;
outline: none;
color: white;
background-color: black;
height: 60px;
padding: 0 20px;
box-shadow: 5px 10px 30px 3px rgba(0, 0, 0, 0.25);
}
*:before, *:after{
box-sizing: inherit;
}
I'm currently working on a footer. There are 3 input-elements as you can see in the picture. Now, if you click on a input, the border-top becomes white. And now I want to achieve: if a input-field is filled with text and I click on another element, a green border-top has to appear. Which pseudo class do I have to use?
HTML:
<div id="footer">
<ul>
<li> <input type="text" name="name" placeholder="Name"> </li>
<li> <input type="text" name="email" placeholder="Email"> </li>
<li> <input class="last" type="text" name="message" placeholder="Message"> </li>
</ul>
</div>
CSS:
#footer {
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
text-align: center;
padding: 20px 0px;
}
input {
padding: 10px 5%;
background: rgba(0, 0, 0, 0.4);
outline: none;
width: 60%;
margin-bottom: 30px;
font-family: Roboto-Thin;
color: white;
border: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.0);
border-top: 2px solid rgba(255, 255, 255, 0.0);
font-size: 18px;
transition: 0.2s;
}
.last {
margin-bottom: 0px;
}
input:focus {
border-top: 2px solid white;
}
[1]: https://i.stack.imgur.com/4ZE0K.png
Since you're using placeholders, you can use :not(:placeholder-shown):not(:focus)
#footer {
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
text-align: center;
padding: 20px 0px;
}
input {
padding: 10px 5%;
background: rgba(0, 0, 0, 0.4);
outline: none;
width: 60%;
margin-bottom: 30px;
font-family: Roboto-Thin;
color: white;
border: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.0);
border-top: 2px solid rgba(255, 255, 255, 0.0);
font-size: 18px;
transition: 0.2s;
}
.last {
margin-bottom: 0px;
}
input:focus {
border-top: 2px solid white;
}
input:not(:placeholder-shown):not(:focus) {
border-top: 1px solid green;
}
<div id="footer">
<ul>
<li> <input type="text" name="name" placeholder="Name"> </li>
<li> <input type="text" name="email" placeholder="Email"> </li>
<li> <input class="last" type="text" name="message" placeholder="Message"> </li>
</ul>
</div>
I tried to use fieldset and was expecting a output like following.
But I just got a horizontal line on top.
Then I looked into the source and found 2 fieldset selectors and same for legend.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
fieldset {
padding: .35em .625em .75em;
margin: 0 2px;
border: 1px solid silver;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 20px;
font-size: 21px;
line-height: inherit;
color: #333;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
legend {
padding: 0;
border: 0;
}
If I comment first fieldset and first legend tag in the inspector. I get the output as expected. Is there another way than commenting these selectors in bootstrap source which I did and it works.
<fieldset>
<legend> Name </legend>
<input type="text">
</fieldset>
Thanks.
The line you see, seems to be the default Bootstrap styling of a fieldset and legend.
As can be seen here:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css');
<fieldset>
<legend> Name </legend>
<input type="text" />
</fieldset>
But you can override that. Just make sure that the overwriting rules are after the Bootstrap stylesheet.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css');
fieldset {
border: 1px solid gray;
margin: 10px;
padding: 10px;
}
legend {
border: 0;
margin: auto;
width: auto;
}
<fieldset>
<legend> Name </legend>
<input type="text" />
</fieldset>
It also needs some more tweaking to give the exact result you want...
Edit
With some tweaking:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css');
fieldset {
border: 1px solid gray;
margin: 1em;
padding: 1em;
background: white;
display: inline-block;
min-width: 350px;
-webkit-box-shadow: 0px 0px 5px 2px rgba(50, 50, 50, .75);
-moz-box-shadow: 0px 0px 5px 2px rgba(50, 50, 50, .75);
box-shadow: 0px 0px 5px 2px rgba(50, 50, 50, .75);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
legend {
border: 0;
margin: 0;
padding: .5em;
width: auto;
background: white;
font-size: 1em;
}
label {
display: block;
font-weight: 100;
}
input{ margin: 0; }
<fieldset>
<legend>What is your favorite color</legend>
<label><input type="radio" name="color" /> Red</label>
<label><input type="radio" name="color" /> Green</label>
<label><input type="radio" name="color" /> Blue</label>
</fieldset>
I am trying to get radio button like this..
But I am getting like this
If No option is selected, I need to customize the radio button and it should show white color inside it. If radio button is selected, it should show green color inside the box. How to achieve this?
Here what I tried.
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
/* Radio Button CSS*/
label {
display: inline;
}
.radio-1 {
width: 193px;
}
.button-holder {
float: left;
margin-left: 6px;
margin-top: 16px;
}
.regular-radio {
display: none;
}
.regular-radio + label {
background-color: #fafafa;
border: 2px solid #cacece;
border-radius: 50px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -15px 10px -12px rgba(0, 0, 0, 0.05) inset;
display: inline-block;
padding: 11px;
position: relative;
}
.regular-radio:checked + label:after {
background: none repeat scroll 0 0 #94E325;
border-radius: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
content: " ";
font-size: 36px;
height: 8px;
left: 7px;
position: absolute;
top: 7px;
width: 8px;
}
.regular-radio:checked + label {
background-color: #e9ecee;
border: 2px solid #adb8c0;
color: #99a1a7;
padding: 11px;
}
.regular-radio + label:active, .regular-radio:checked + label:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1) inset;
}
</style>
</head>
<body>
<div class="button-holder">
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-1-set"><label for="radio-1-set"></label><br>
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-2-set"><label for="radio-2-set"></label><br>
</div>
</body>
</html>
Just add the :before pseudo element to take care of the color before the radio button is checked. You could add this to your CSS:
.regular-radio + label:before {
background: none repeat scroll 0 0 #FDFDFD;
border-radius: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
content: " ";
font-size: 36px;
height: 8px;
left: 7px;
position: absolute;
top: 7px;
width: 8px;
}
Working demo. You can ofcourse change the background of this label to match exactly the example you show. Hope it helps.
You can achieve desired layout in two ways
Via removing standard appearance using CSS appearance and applying custom appearance. Unfortunately this was doesn't work in IE. Demo:
input[type="radio"] {
/* remove standard background appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* create custom radiobutton appearance */
display: inline-block;
width: 25px;
height: 25px;
padding: 6px;
/* background-color only for content */
background-clip: content-box;
border: 2px solid #bbb;
background-color: #e7e6e7;
border-radius: 50%;
}
/* appearance for checked radiobutton */
input[type="radio"]:checked {
background-color: #93e026;
}
/* optional styles, I'm using this for centering radiobuttons */
.flex {
display: flex;
align-items: center;
}
<div class="flex">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">RadioButton1</label>
</div>
<div class="flex">
<input type="radio" name="radio" id="radio2" />
<label for="radio2">RadioButton2</label>
</div>
<div class="flex">
<input type="radio" name="radio" id="radio3" />
<label for="radio3">RadioButton3</label>
</div>
Via hiding radiobutton and setting custom radiobutton appearance to label's pseudoselector. By the way no need for absolute positioning here. Demo:
*,
*:before,
*:after {
box-sizing: border-box;
}
input[type="radio"] {
display: none;
}
input[type="radio"] + label:before {
content: "";
/* create custom radiobutton appearance */
display: inline-block;
width: 25px;
height: 25px;
padding: 6px;
margin-right: 3px;
/* background-color only for content */
background-clip: content-box;
border: 2px solid #bbb;
background-color: #e7e6e7;
border-radius: 50%;
}
/* appearance for checked radiobutton */
input[type="radio"]:checked + label:before {
background-color: #93e026;
}
/* optional styles, I'm using this for centering radiobuttons */
label {
display: flex;
align-items: center;
}
<input type="radio" name="radio" id="radio1" />
<label for="radio1">RadioButton1</label>
<input type="radio" name="radio" id="radio2" />
<label for="radio2">RadioButton2</label>
<input type="radio" name="radio" id="radio3" />
<label for="radio3">RadioButton3</label>
input[type=radio].css-checkbox {
position: absolute;
z-index: -1000;
left: -1000px;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
input[type=radio].css-checkbox + label.css-label {
padding-left: 30px;
height: 25px;
display: inline-block;
line-height: 25px;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 25px;
vertical-align: middle;
cursor: pointer;
}
input[type=radio].css-checkbox:checked + label.css-label {
background-position: 0 -25px;
}
label.css-label {
background-image: url(http://csscheckbox.com/checkboxes/u/csscheckbox_98809849d4d88f570f5ad4ce6c2be5b1.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
check out this fiddle.
You should format your radio button both uncheck and checked.
You can find your anwser follow block code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
/* Radio Button CSS*/
label {
display: inline;
}
.radio-1 {
width: 193px;
}
.button-holder {
float: left;
margin-left: 6px;
margin-top: 16px;
}
.regular-radio {
display: none;
}
.regular-radio + label {
background-color: #fafafa;
border: 2px solid #cacece;
border-radius: 50px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -15px 10px -12px rgba(0, 0, 0, 0.05) inset;
display: inline-block;
padding: 11px;
position: relative;
}
.regular-radio:checked + label:after {
background: none repeat scroll 0 0 #94E325;
border-radius: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
content: " ";
font-size: 36px;
height: 8px;
left: 7px;
position: absolute;
top: 7px;
width: 8px;
}
.regular-radio:checked + label {
background-color: #e9ecee;
border: 2px solid #adb8c0;
color: #99a1a7;
padding: 11px;
}
.regular-radio + label:active, .regular-radio:checked + label:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1) inset;
}
/*----------------hungtq added--------------*/
.regular-radio + label:before {
background: none repeat scroll 0 0 #e9ecee;
border-radius: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
content: " ";
font-size: 36px;
height: 8px;
left: 7px;
position: absolute;
top: 7px;
width: 8px;
}
</style>
</head>
<body>
<div class="button-holder">
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-1-set"><label for="radio-1-set"></label><br>
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-2-set"><label for="radio-2-set"></label><br>
</div>
</body>
</html>
Result:
I want to add a little triangle to the right to overlap with the beginning of the input field but I haven't been able to. Here's my code:
HTML:
<div id="wrapper">
<form>
<label>First Name</label><input type="text" name="firstname" id="first" placeholder="Jorge" />
<label>Last Name</label><input type="text" name="lastname" id="last" placeholder="González" />
<label>Email</label> <input type="email" name="username" id="un" placeholder="jgon#gmail.com"/>
<label>Password</label> <input type="password" name="password" id="pass" placeholder="********" />
<input type="submit" value="Sign up" id="submit" />
</form>
</div>
CSS:
html{background-color:#000;}
label{
font-weight: bold;
background: -webkit-linear-gradient(#3073BF 0%, #204C7F 100%);
padding: .7em .85em .8em 0em;
display: block;
width: 100px;
float: left;
border-radius: .3em 0px 0px .3em;
margin: 5px 0;
color: #102640;
text-shadow: 0px 1px 1px #fff;/*rgba(0, 0, 0, 0.3);*/
height: 17px;
}
#wrapper{
width: 800px;
margin: 3em auto;
background: white;
padding: 2em 4em;
border-radius: .5em;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
}
form{
width: 330px;
margin: 0 auto;
text-align: right;
}
input{
padding: .5em;
border-radius: 0px 4px 4px 0px;
border: 1px solid #bcbcbc;
margin: .3em 0;
font-size: 1.1em;
}
#submit{
text-align: center;
clear: both;
float: none;
position: relative;
right:10px;
margin: 1em;
padding: 1em 3em;
background: -webkit-linear-gradient(#fff1ba 0%, #ffc400 100%);
border: 1px solid #ffb135;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
font-weight: bolder;
color: #a74f00;
font-size: 1em;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7);
cursor: pointer;
border-radius: .3em;
width:300px;
}
#submit:hover{
background: -webkit-linear-gradient(#ffc400 0%, #fff1ba 100%);
}
and the link to the fiddle: http://jsfiddle.net/Luis_Armando/HeDVy/
To create a triangle you can use following css. Add to your code as required.
.triangle{
width: 0px;
height: 0px;
border-style: solid;
border-width: 30px 0 30px 20px;
border-color: transparent transparent transparent #007bff;
}
Change border-width parameters to change size of triangle.