I am trying to style a tooltip in a jqgrid in a page delivered through AngularJS. Essentially in other places in the app I am using the Bootstrap tooltip styling. I'm struggling to get this to work in the AngularJS part (possibly to do with the initialisation not running in the right place). I thought I might change tack and try to emulate the styling instead.
I have started and got a very rough and ready bit of styling almost 'working' as a PoC (it needs a lot of work buit I want to see if it is possible before doing that work! It is here in the Fiddle
I have 2 questions I wondered if anyone could help me with before I try to tidy it up
1) Is there a way to stop the normal tooltip appearing as well (I thought I was styling the tooltip but I seem to be adding a second one!)
2) Is there a way to make it 'float'. In the fiddle it is not obvious but in the jqgrid where the th element is more structured (bounded) the css tooltip I have created is contained in the th element and mainly hidden (as it is too large for the element).
I'm thinking this is a CSS question more than a jqgrid question so just in case I'll point out I can't really use the span technique posted in a few answers.
Thanks.
The code in the fiddle is
<table>
<th title="This is a tooltip">John</th>
<th title="so is this">Albert</th>
<th title="And This">Spencer</th>
</table>
th[title]:hover:after {
content: attr(title);
background-color: #000;
color: #fff;
width: 120px;
text-align: center;
border-radius: 6px;
padding: 5px 0;
z-index: 1;
left: 50%;
top: 100%;
position: absolute;
margin-left: -60px;
margin-left: -5px;
border-width: 5px;
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
Yes. All you need to do is change from title attribute to data-title so it would be: content: attr(data-title); Then also update the th title attribute accordingly.
I'm designing a web page and I used HTML5 to make an entire div tag a link. Prior to adding the link, the whole div would expand when I hovered over it. Suddenly, it's only working if I hover over the words, not the box I created. The HTML looks like this (minus the actual link):
<a href="link goes here" style="text-decoration: none;">
<div class="home-tab">
home
</div>
</a>
And the CSS to make it hover looks sort of like this:
.home-tab:hover {
width: 150px;
height: 45px;
margin-top: 30px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
(Note: This is not all of the code in the stylesheet. I have some lovely color in there too.)
Is there something I'm missing in my CSS to make the whole thing work on the hover and not just the words? I'm not even sure what questions to ask to figure out what I've done here.
ETA: I have checked this across three different browsers. It has the same problem on IE, Firefox and Chrome.
ETA: CSS without the :hover attribute.
.home-tab{
width: 150px;
height: 35px;
margin-top: 40px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
ETA: Okay, here's something very weird. It seems that any elements on the far right don't have this problem. Seriously, the forums tab and next button on the far right both have :hover elements and they work exactly as I want them to.
Get rid of the <div> entirely and set <a> to display: block.
You're not supposed to put block-level elements inside of an <a> anyway.
Seems to be working fine here: jsFiddle
The only thing I can think of is that the div is not the size you think it is. the size and width elements that you are setting in your css are only active when your mouse is on the div. You need to set them in the normal non hover settings as well if you want the div to be that size. Right now it is defaulting to just large enough to hold the text. You can see this demonstrated by the black border I added in my example.
Here is my suggestion:
.home-tab {
/*All of the sizing code goes here to create box for div*/
}
.home-tab:hover {
/*anything you want changed on hover goes here*/
}
I hope I was understanding your question correctly. If you need more clarification please let me know. Good luck!
I think you want to expand that div when you hover cursor on that div.
i wrote a code below that will solve your hover problem.
Here is a code for you customize this
.home-tab{
width:150px;
height:45px;
margin-top:30px;
color:#008080;
font-family: arial;
background-color: blue;
transition-duration: .8s;
color:white;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
.home-tab:hover{
width:200px;
height:60px;
font-size: 16pt;
transition-duration: .8s;
}
a{ text-decoration:none} /* optional*/
</style>
<a href="#"><div class="home-tab">
home
</div>
</a>
Is there a way to control the position of the underline in text-decoration: underline?
Example link
The example above has an underline by default...is there a way to nudge that underline down by a few pixels so that there is more space between the text and the underline?
2020
Use text-underline-offset!
2012
The only way to do that is to use a border instead of an underline. Underlines are notoriously inflexible.
a {
border-bottom: 1px solid currentColor; /* Or whatever color you want */
text-decoration: none;
}
Here's a demo. If that's not enough space, you can easily add more — if it's too much, that's a little less convenient.
You can use pseudo before and after like this. It works well and is completely customizable.
CSS
p {
line-height: 1.6;
}
.underline {
text-decoration: none;
position: relative;
}
.underline:after {
position: absolute;
height: 1px;
margin: 0 auto;
content: '';
left: 0;
right: 0;
width: 90%;
color: #000;
background-color: red;
left: 0;
bottom: -3px; /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
}
HTML
<p>This is some example text. From this page, you can read more example text, or you can visit the bookshop to read example text later.</p>
Here's a more advanced demo with a screenshot attached I made that animates the underline on
hovering, changes colors, etc...
http://codepen.io/bootstrapped/details/yJqbPa/
There is the proposed text-underline-position property in CSS 3, but it seems that it has not been implemented in any browser yet.
So you would need to use the workaround of suppressing the underline and adding a bottom border, as suggested in other answers.
Note the the underline does not add to the total height of an element but bottom border does. In some situations, you might wish to use outline-bottom – which does not add to the total height – instead (though it is not as widely supported as border-bottom).
2021
There is the text-underline-offset property in CSS Text Decoration Module Level 4 which allows you to move the decoration by a specified distance away from its original position.
As of early 2020, this is only supported in Safari 12.1+ and Firefox 70+.
text-underline-offset property accepts these values:
auto - default, makes the browser choose the appropriate offset.
from-font - if the used font specifies a preferred offset, use that, otherwise it falls back to auto.
<length> - specify distance in the "usual" CSS length units. Use em to allow scaling proportionally with the font-size.
Example below:
p {
text-decoration: underline;
text-decoration-color: red;
margin-bottom: 1.5em;
}
p.test {
position: relative;
}
p.test::after {
position: absolute;
content: '';
display: block;
height: 1px;
width: 100%;
background: blue;
bottom: 0;
}
<p style="text-underline-offset: 0.75em;" class="test">
If you see our red underline <strong>below</strong> the blue line, this property works in your browser.
</p>
<p style="text-underline-offset: auto">
And now let’s try it with `text-underline-offset` set to `auto`.
</p>
<p style="text-underline-offset: from-font">
With `text-underline-offset` set to `from-font`, it probably looks the same as above.
</p>
2021
you can use text-underline-position: under;
<body>
<h1>
<a href="#"
style="text-decoration: underline; text-underline-position: under;" >
My link</a>
</h1>
</body>
for more details check https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position
Use a border-bottom instead of the underline
a{
border-bottom: 1px solid #000;
padding-bottom: 2px;
}
Change padding-bottom to adjust the space
Using border-bottom-width and border-bottom-style will make the border the same color of the text by default:
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
padding-bottom: 1px;
There is one property text-underline-position: under. But only supported in Chrome and IE 10+.
More info: https://css-tricks.com/almanac/properties/t/text-underline-position/
https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position
I would use border instead. Easier to control that.
The aim is to print table with colored td-s.
I need a way correct for all types of browsers.
Is there any way?
For Chrome, Safari and Firefox:
body{
-webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important;
}
Quote from here: CSS #media print issues with background-color;
IF a user has "Print Background
colours and images" turned off in
their print settings, no CSS will
override that, so always account for
that. This is a default setting.
Once that is set so it will print
background colours and images, what
you have there will work.
It is found in different spots. In
IE9beta it's found in Print->Page
Options under Paper options
In FireFox it's in Page Setup ->
[Format & Options] Tab under Options.
For chrome you can use this:
-webkit-print-color-adjust:exact;
Or in print preview, set the checkbox 'More settings->Background Graphics'
For Firefox, I couldn't find anything to enable it using CSS. However, you can enable it as follow (If you don't see the File, press Alt key once).
'File->Page setup' and set the checkbox 'Print Background(color & images)'
a particularly ugly solution is to place position a .gif (or any form of vector graphic so the size can be changed) image in the table cell with height and width 100% then a negative z-index property.
I found #willert's solution a bit consistent and easy. I have developed it further, hope it helps you guys...
table {
margin-top: 20px;
border-collapse: separate;
border-spacing: 0px;
font:13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
}
table td,
table th {
background-color: transparent;
z-index: 1;
border-right: 0;
border-bottom: 0;
width: 150px;
padding-left: 5px;
overflow: hidden;
height: 12px;
}
table th:before,
table td:before {
content: "";
padding: 0;
height: 1px;
line-height: 1px;
width: 1px;
margin: 10px -994px -996px -2px;
display: block;
border: 0;
z-index: -1;
position:relative;
top: -6px;
}
table th:before {
border-top: 999px solid #D6D6D6;
border-left: 999px solid #D6D6D6;
}
table td:before {
border-top: 999px solid #F9F9F9;
border-left: 999px solid #F9F9F9;
}
td div.grid_3{
overflow: hidden;
}
table .row td{
border-bottom: #d6d6d6 1px solid;
width: 110px;
}
I've been playing around to solve this problem, and CSS content generation and modern browsers seem to provide a nice solution to this problem. NOT WIDELY TESTED, FEEDBACK WELCOME!
table {
border-collapse: separate;
border-spacing: 0px;
}
table td,
table th {
background-color: transparent;
overflow: hidden;
z-index: 1;
border-right: 0;
border-bottom: 0;
}
table th:before,
table td:before {
content: "";
padding: 0;
height: 1px;
line-height: 1px;
width: 1px;
margin: -4px -994px -996px -6px;
display: block;
border: 0;
z-index: -1;
position:relative;
top: -500px;
}
table th:before {
border-top: 999px solid #c9c9c9;
border-left: 999px solid #c9c9c9;
}
table td:before {
border-top: 999px solid #eeeeee;
border-left: 999px solid #eeeeee;
}
You will need to handcraft the details to fit your needs.
HTH
Judging from my research on this, you're not likely to find a CSS solution that covers everything. You might be able to apply a jQuery solution to this.
<style>
.cell_pos {
position: relative;
}
.cell_cont {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.img_color {
position: absolute;
top: 0;
left: 0;
z-index: 9;
width: 100%;
}
</style
<table>
<tr class="row1">
<td class="selected">
<div class="cell_pos">
<div id="cell_cont">Hello</div>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function(){
$('#row1 .selected).append('<img class="img_color" src="path/to/img.jpg/>');
)};
</script>
The question was a little vague so you would probably need some work around with the css with overflow and setting cell/column widths. Hope this helps.
There is no solution that isn't horribly ugly, like positioning image or ridiculously large border underneath the table.
It depends what you need those backgrounds for. If it's decorative, then it may be better not to force it.
If it's to highlight some table cells, you can use color border in addition to the background. Borders are printed.
If it's very important that backgrounds are printed, then you may give users a PDF to print.
This works for me and wont affect your other CSS code:
#media print {
div {
background: #333333 !important;
}
}
Just Use !important in your CSS and it will print, in Chrome.
You can do a little coloring the background by putting the contents in as an input-tag of type submit and set value to John Doe. then use class or style to manipulate the coloring. Never the less the browser will change the forecoler to black so only use light backgrounds but it works (a little).
I tried all suggested solutions here (and in many other questions), such as applied background-color: #000 !important; both in stylesheet and inline, or set
#media print {
* {
color-adjust: exact !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
}
, even combined them together, but nothing worked.
After hours of researching without any results, I recognized that the "bug" lost background-color only appears on table (th, td), but other HTML elements (div,...) or other CSS attributes (border-color,...) still work.
Therefore, I came up with a "hack" to wrap-up anything inside <th> or <td> with a <div> (you can adjust padding to make it display same as prior).
Here I used React and makeStyles of #material-ui/core.
JSX:
<Table bordered>
<thead className={classes.thead}>
<tr>
<th><div>Col 1</div></th>
<th><div>Col 2</div></th>
<th><div>Col 3</div></th>
</tr>
</thead>
<tbody>
<tr>
<td className={classes.tdGreen}><div>Row 1 - Col 1</div></td>
<td><div>Row 1 - Col 2</div></td>
<td><div>Row 1 - Col 3</div></td>
</tr>
<tr>
<td><div>Row 2 - Col 1</div></td>
<td className={classes.tdBlue}><div>Row 2 - Col 2</div></td>
<td><div>Row 2 - Col 3</div></td>
</tr>
</tbody>
</Table>
Styles:
const useStyles = makeStyles(() => ({
thead: {
textAlign: 'center',
'& th:not(:last-child)': {
padding: '0',
'& > div': {
padding: '.75rem',
backgroundColor: '#D8D8D8 !important',
}
}
},
tdGreen: {
padding: '0 !important',
'& > div': {
padding: '.75rem',
color: 'white',
backgroundColor: 'green !important',
}
},
tdBlue: {
padding: '0 !important',
'& > div': {
padding: '.75rem',
color: 'white',
backgroundColor: 'blue !important',
}
}
}));
You can take the idea and convert it into pure HTML/CSS solutions.
Hope this can help anyone struggled with this issue!
<td><img src="your_image" /></td>
This silly solution worked for me on Firefox and Chrome (Ubuntu).
Firefox: Open the print dialog box (shortcut: Ctrl+P) and goto Options tab,
and make sure that the option Print Background Colors is ticked.
Chrome: Open the print dialog box (shortcut: Ctrl+P) and expand More settings and tick Background graphics.
As far as I have tested, -webkit-print-color-adjust:exact; doesn't work for Firefox and is honored in Chrome. But in both the browsers the final printing option overrides all that. So you can completely do away without it.
Try printing the following sample HTML page with and without the various settings described here and you will know.
<!DOCTYPE html>
<html>
<head>
<style>
body {
-webkit-print-color-adjust: exact;
}
</style>
</head>
<body>
<table style="border-width:1px;width:50%;">
<tr style="background-color:#999999">
<td>First Row</td>
</tr>
<tr style="background-color:#CCCCCC">
<td>Second Row</td>
</tr>
</table>
</body>
</html>
I needed to use this in the weasyprint library that generates pdf's from python. if all you want to do is print a pdf then use the #print property with !important
e.g
<!DOCTYPE html>
<html>
<head>
<style>
#media print {
.a {
background: orange !important;
}
.b {
background: blue !important;
}
}
</style>
</head>
<body>
<table>
<tr>
<td class="a">This cell has an orange background.</td>
<td class="b">This cell has a green background.</td>
</tr>
</table>
</body>
</html>
You will notice that if you open this in a web browser you wont see the colors, put if you print it as a pdf you will. because those styles are applied on printing
if you wanted to also view the colors in the browser you would add the same styles as normal outside of print
<!DOCTYPE html>
<html>
<head>
<style>
.a {
background: orange;
}
.b {
background: blue;
}
#media print {
.a {
background: orange !important;
}
.b {
background: blue !important;
}
}
</style>
</head>
<body>
<table>
<tr>
<td class="a">This cell has an orange background.</td>
<td class="b">This cell has a green background.</td>
</tr>
</table>
</body>
</html>
for printing PDF's you only need the #print property
Apply a class to the background with setting background image and !important. The method does not require setting background printing.
HTML
<td class="red"></td>
CSS
.red { background-image: url('images/bg-red.jpg') !important; }
What is a good way to give the input field below the three characteristics listed?
Characteristics:
-Always 30 px from the left side of the browser window.
-Always 30 px below the words "Add a comment" if no comments have been added.
-Always 30 px below the preceding comment if one or more comment(s) has (have) been added.
Thanks in advance,
John
HTML / PHP Code:
<div class="addacomment"><label for="title">Add a comment:</label></div>
<div class="commentbox"><input class="commentsubfield" name="title" type="title" id="title" maxlength="1000"></div>
CSS (thusfar I have no declarations for the "commentbox" selector):
.commentsubfield { width: 390px; height: 90px; border: 1px solid #999999; padding: 5px; }
.addacomment
{
position:absolute;
width:250px;
left:30px;
top:180px;
text-align: left;
margin-bottom:3px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000000;
}
First off, you don't need those <div>s. You can just add class="addacomment" to the label.
So you've got this:
<label class="addacomment" for="title">Add a comment:</label>
<?php print $your_comments_if_any; ?>
<input class="commentsubfield" name="title" type="title" id="title" maxlength="1000">
I'm not sure what DOCTYPE you're using, but you get the idea. Now for the CSS:
If you want to position something relative to the page, it's a good idea to keep the margins of the page in mind. Assuming the default, you'll want to set any margins or padding to 0:
html, body {
margin: 0;
padding: 0;
}
Now, the positioning you've done on .addacomment is basically keeping you from getting the result you want. I've stripped out the unnecessary stuff for clarity:
.addacomment {
display: block; /* override the default inline display */
margin-left: 30px; /* The 30px from the left you wanted */
}
Next, .commentsubfield only needs margins added to it:
.commentsubfield {
margin: 30px 0 30px 30px;
[your other styles]
}
That should give you the following result (this is an actual screenshot from Opera 10.10 OSX), although I find separating the label from its field quite weird:
form element positioning example http://img.skitch.com/20100329-pbyj117655wig4pfh8estxw9me.jpg
I would recommend keeping the input and corresponding label together.
Hope I understood your question correctly, and hope this helps.