I have the following problem: I have to use an HTML->PDF conversion service to render a piece of HTML. However, this service is a bit limited in it's functionality, so I need a way to "work around" it.
I'm mainly just printing text, so it's not a big deal, but the only problem is that I have to print some "unticked" and some "ticked" check boxes, my converter is failing at this. In particular I've tried:
Using the unicode ☐ ("☐") and ☑ ("☑") characters, but the converter doesn't render them (probably the font it's using doesn't
have them)
Using the WingDing characters þ and ¨ but again, the wingding font is not recognized
The converter doesn't support images, so can't just use an image
I was thinking, at this point, to "simulate" a checkbox by using spans with borders, something like:
<span style="border: 1px solid black; height: 12px; width: 12px;"></span>
However, I can't make it look correct (no fault of the converter this time, even browsers show the above as just one vertival line.
Can anyone help me "draw" checkboxes using just "basic" html elements? What would be the cleanest way?
PS: checkboxes need to be inline with the text.
You're on the right track.
Using HTML and CSS:
/* The standalone checkbox square*/
.checkbox {
width:20px;
height:20px;
border: 1px solid #000;
display: inline-block;
}
/* This is what simulates a checkmark icon */
.checkbox.checked:after {
content: '';
display: block;
width: 4px;
height: 7px;
/* "Center" the checkmark */
position:relative;
top:4px;
left:7px;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
<div class="checkbox"></div> Unchecked<br><br>
<div class="checkbox checked"></div> Checked
The reason YOUR code didn't work was because you were using a span element, which is an inline element. You can use a span for this, but you'll need to add the style of display: block to the element (making it act as a block element instead of an inline element).
The div tag is a block, so no need for setting it's display style. If you would like the div to display inline, set the display: inline-block
Try this :
<div style="border: 1px solid black;
width: 10px;
height: 10px;
display: inline-block;
margin-right: 4px;">
</div>
https://jsfiddle.net/8rt4dqfc/
Related
I'm trying to implement an html control similar to the how search works in google chrome. I'm aware that in chrome it might not be built in html, but I'm trying to achieve the same functionality.
The way the search works is that adjacent to the text entered into the input, there's an extra text field that present the current index of a total number. It's also worth while noticing that the highlighted border is of the entire input (including the entered text and the index and sub total count). Also, when entering a long text, the index and sub total indicator (e.g. 0 of 10) doesn't get overridden, and the text itself scrolls.
Does anyone have any simple approach for implementing this feature set?
A simple aproach would be adding padding to the input, and positioning the text you want to keep over it. Rewriting the value of the input with pogramming.
HTML
<div class="form-text">
<input type=text placeholder="0 of 0" id="youridhere"/>
<label for="youridhere" class="static-value">Get this label to appear</label>
</div>
CSS
.form-text{
position:relative;
}
input{
padding:5px 5px 5px 150px;
}
.static-value{
position:absolute;
left:10px;
font-size:0.85em;
top:9px;
}
Pen of it working
This is the simplest solution, but you can find other better results and best practices using javascript. Wich I think would be something like detecting the pressed key and adding it the to string programatically instead of the standart browser behaviour.
I like this CSS based solution cause you can customize the fixed text, and don't need to change the standart behaviour of input fields.
-------- Edit --------
Actually, the best solution would be with the label element, with the for attribute, link it to the field. So when clicked it leads the user to the field. Edited.
I've made the foundation of it with only CSS, see the demo follows.
jsfiddle
* {
box-sizing: border-box;
}
div {
position: relative;
width: 10em;
}
input {
width: 100%;
padding: 4px;
border: 1px solid;
padding-right: 52px;
}
span {
display: block;
border-left: 1px solid;
width: 50px;
text-align: center;
position: absolute;
right: 0;
top: 2px;
}
<div><input type="text"><span>etc</span></div>
I want to create a line with circles. Can this be done with background-repeat? Or do I need to set a picture as background? The circles should have a 5px radius.
p:after {
content: '';
background: 'rounded div of size 10x10px' repeat-x
width: 50%;
}
This is the only solution without using background-image or border-image encoded in base64 or using external files.
https://jsfiddle.net/3r6xsr0m/
html:
<div class="line"></div>
css:
.line:before {
content: "..................................................................................................";
display: block;
font-size: 60px;
font-family: Georgia;
color: #aaa;
max-width: 100%;
overflow: hidden;
}
Dots may differ depending of browser font rendering algorithm.
You'll have to create a 10px x 10px image of the dot and then use your method of repeating the background using either pseudo or just a new element. I'd go with a new div element if you can to prevent any issues across browsers like IE8. You'll also have to give your element a width if you go pseudo.
I have an input (that holds a number) that I want to put a button next to. This button would, when pressed, increment the value in the box by 1.
I am having a heck of a time lining it up in all browsers though.
I've tried using button, img, and a to accomplish this. img does not line up properly in most of the browsers. Meaning that if I put an input and an img next to each other, the img is a few pixels higher than the input, but that varies by browser. The closest i can get is by making it a button that is styled with css to use my custom image. It works in Chrome, ie7, and ie10. However, in ie8, ie9, and firefox, it is 1 pixel too high, and I can't for the life of me get them to line up.
I read here that floating would make them line up. Sure enough, it did. But now the input and the button are jammed against the edge of the td they're in, and I can't figure out how to move them. Is there perhaps a better method than float? Or just a way to line them up properly?
This is how it is where I am having issues. In Chrome and ie7, ie10 it works fine. It messes up in ie8,9 and firefox.
This is how it looks with floats. It displays right in all the above browsers, but it is now off-center.
Any suggestions?
OK. Here is one way. So I think you might like vertical-align: middle; It only works on inline and inline block elements aligning them to each other. So it's not aligning them inside a box. I made a little sandbox to test your issues HERE. I'm not sure of your constraints, but I use box-sizing: border-box; on most everything these days - So that is something to beware of when looking at the code. I checked it in browser-stack and all seems well for the most part. This is always a difficult task in my experience. I kept to the key points in the CSS below, but there is a bunch of comments and styles and stuff in the codepen. I hope this helps! Good luck!
HTML
<div class="wrapper">
<input class="your-input" type="number" /><button class="your-button">+</button>
</div>
CSS
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
float: left;
height: 4em; /* needs to be defined in this case so that the children know what they should be 100% height of */
/* just for show */
background-color: lightgray;
border: 1px solid red;
padding: .5em;
}
.your-input, .your-button {
display: inline-block;
/* aligned to each other and not the .wrapper */
height: 100%;
/* already was inline by dephault - but just to be clear */
vertical-align: middle;
}
.your-input {
margin: 0;
padding: 0;
width: 20em; /* arbitrary */
text-indent: 1em;
border: 1px solid black;
}
.your-button{
/* whatevers */
background: lightblue;
border: 1px solid black;
border-left: 0;
width: 6em;
border-radius: 0 10px 10px 0;
cursor: pointer;
}
You might want to consider using the bootstrap libraries. See "Prepended and appended inputs" here. They do a great job with browser compatibility. You can further refine the l&f, so that it better matches what you have in your examples.
I came up with a method that fixes my issue, but only for ie8+ which is satisfactory for me.
The structure looks like this:
<input class="add_input" type="text" name="qty" value="0" /><a class="add">
<img src="plus.png"/>
</a>
There cannot be a space or new line between the input and the a or else it will misalign them. The image is simply the "+" by itself, nothing else. Then I use CSS to style the image into the shape I want, with the appropriate :hover and :active selectors.
Here's the CSS:
.add_input{
width:28px;
height:18px;
padding:1px 0;
display:inline-block;
text-align:center;
border:1px solid #0a1c40;
border-right:0;
vertical-align:bottom;
}
.add img{
background:url(add.png);
display:inline-block;
width:18px;
height:20px;
border:1px solid #0b1e45;
border-radius:0px 12px 12px 0px;
vertical-align:bottom;
}
.add img:hover {
background:url(add_hover.png);
}
.add img:active {
background:url(add_active.png);
}
I'm note sure if other vertical-align types would work or not, I just know bottom does.
here's the code (and, yes, i'm using a basic reset.css):
.checkbox { border: 1px solid black; width: 10px; height: 10px; }
<ul>
<li>
<p><div class="checkbox"></div>I will!</p>
</li>
<li>
<p><div class="checkbox"></div>I won't!</p>
</li>
</ul>
you can see what i'm trying to do. essentially create a checkbox. the reason i'm NOT using a checkbox tag is because i have to export this thing to PDF so that it can be printed and hamfisted bogots can drag their X mark through the box. if i use the checkbox tag, it's too small. if i use and image, PDF doesn't line up right.
so. i need the CSS box to line up as expected. what am i missing? i've tried changing the div to display: inline; but it freakin' disappears! inline-block useless.
i tried like mad to search this one out, but to no avail, so if this showed up somewhere else, apologies.
WR!
.checkbox {
border: 1px solid black;
width: .65em;
height: .65em;
display: inline-block;
margin-right: 4px;
}
See it working here: http://jsfiddle.net/ZeaLM/
inline-block is the display you need for this.
Your browser might be persnickety about empty elements. Try adding a into the <div>.
<div> is not allowed inside of <p> elements (which doesn't allow any block-level elements inside of it).
See this example
In this example, I've used display: inline-block; and changed the <p> element into a <div>.
There's many ways to do it, one of which is this
Just to make sure - did you put the .checkbox selector inside a <style> tag in the actual HTML?
<style type="text/css">
.checkbox { border: 1px solid black; width: 10px; height: 10px; }
</style>
1) Get rid of the <p> elements
2) Add float: left to your .checkbox style
3) Add after the div or a padding: right to the div block to make it look better
4) Add li { list-style-type: none; } in your style block
5) Play around with vertical-align in your .checkbox style until you're happy
I have a centered div with a nested h1 inside. Is there any way to underline it with a thicker line than the html default?
This will give you control over the U tag's underline:
<style type="text/css">
u {
text-decoration: none;
border-bottom: 4px solid black;
}
</style>
In this case the underline will be four pixels.
No, there isn’t. The thickness of the underline is browser-dependent and cannot be affected in CSS (or HTML).
There was once a text-underline-width property suggested in the CSS3 Text draft. But there was insufficient interest in it, and it was removed from the draft in 2005. It was probably never implemented.
The usual workaround is to use a bottom border instead of an underline. However, note that it is a different thing. The bottom border is below the line box, whereas an underline is normally on the baseline of text and therefore cuts descenders of letters. Generally, a bottom border is better for legibility than an underline, but it deviates from typographic tradition.
The following example demonstrates the differences.
<span style="text-decoration: underline">jgq</span>
<span style="border-bottom: solid 1px">jgq</span>
<span style="border-bottom: solid 4px">jgq</span>
I am not recommending inline CSS but have used it here for brevity:
<h1 style="border-bottom: 5px solid black">
You may be able to achieve the same visual effect with border-bottom-width;
h2
{
border-bottom-color:black;
border-bottom-style:solid;
border-bottom-width:15px;
}
Since you don't always want border-bottom (eg, item may have padding and it will appear too far away), this method works best:
h1:after {
content: '';
height: 1px;
background: black;
display:block;
}
If you want a thicker underline, add more height
If you want more or less space between the text and the underline, add a margin-top:
h1:after {
content: '';
height: 2px;
background: black;
display:block;
margin-top: 2px;
}