I've added a custom weather web part to my SharePoint page, but I want a hover message that displays additional info.
The pieces I've got worked out look great in Chrome, but not so great in IE 11. I need this to look the same in both - any tips?
.tooltip {
display:inline;
position: relative;
font-family:Arial,Helvetica,sans-serif;
font-size:9pt;
}
.tooltip:hover:after {
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
top: 6px;
color: #fff;
content: attr(title);
left: 5px;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
/*width: auto;*/
}
.tooltip:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 0 6px 6px 6px;
top: 40px;
content: "";
left: 25px;
position: absolute;
z-index: 99;
}
Here's my JSFiddle: http://jsfiddle.net/hcoa82wb/
The problem was the .tooltip tag using the display: inline When this is changed to display: inline-block both IE and Chrome began to show the messed up version of the tool-tip. From there it was just a matter of changing the top properties to display how you would want it. Here is your JS Fiddle updated. I left comments in the CSS code.
On the same note I would recommend using a different Class name other than .tooltip I would hate for you to run into issues in the future if someone adds a WebPart or a 3rd party SharePoint plug-in that uses the same class name. I've had issues with that in the past.
Related
I'm using Contact Form 7 on a website of a client, and I styled the dropdown menu to this:
.wpcf7-form select {
-webkit-appearance: textfield;
color: #72858a;
font-size: 0.7777777778rem;
background-color: #e9edf0;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
}
Unfortunately the arrows are missing now. Is there anyway to add an down arrow at the right side of the dropdown menu in the same color as the text? I tried different css classes found on this website, but nothing seems to work.
Image of how it displays now:
And how it should be:
The arrow could also be another arrow.
Any help would be appreciated much!
Regards,
Vasco
Here's an option for you... now... I used the span.wpcf7-form-control-wrap that was specifically around the select I was styling. You could also (instead) wrap the selects in a custom div.
This produced this result for me
I also made the triangle using clip-path, so you can change the colors or anything else.
/* Using the menu-813 which for me was the span around the select.*/
span.wpcf7-form-control-wrap.menu-813 {
position: relative;
height: 60px;
background: #e9edf0;
display: inline-block;
}
span.wpcf7-form-control-wrap.menu-813:after {
content: '';
position:absolute;
width: 15px;
height: 15px;
background: #000;
right:8px;
top: 20px;
z-index: 0;
clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.wpcf7-form select {
-webkit-appearance: none;
appearance: none;
color: #72858a;
font-size: 0.7777777778rem;
background-color: transparent;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
width: 300px;
z-index: 1;
position: relative;
padding-left: 2ch;
}
My CSS style not working properly for IE 11 and Safari browsers. I searched every possible place to find an answer but failed. a lot of people talking about cross-browser CSS problem but no one did a working example and show how it's done properly. so if you guys know please help me to overcome this issue.
this is a part of my CSS I found not working for IE and safari
<style> .lap_drop_dwn:before {
content:"";
position: absolute;
right: 31px;
top: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0px 10px 10px 10px;
border-color: transparent transparent rgb(0,0,0,0.5) transparent;
}
.drop_dwn_items {
display: block;
width: 100%;
height: 50px;
background-color: rgb(0,0,0,0.5);
text-decoration: none;
line-height: 50px;
font-size: 22px;
color: #fff;
padding: 0 20px;
text-align: center;
}
</style>
this is a part I found, but my CSS file is quite large so there could be many so hard to find manually. it would be better if there is some script which automatically fixes those errors according to particular browser needs.
I am trying to obtain a pure CSS select input with an arrow. All is well except Firefox is causing some weird issue and pushing the arrow past the width of the box.
You can see it here: http://cssdeck.com/labs/xvvfgv3k (Please view in a FF browser)
Is this some sort of bug? When viewing the css in Firebug to try and fix the problem, it fixes itself and displays how it should. Really weird. Any help is greatly appreciated. Thanks!
Try making your select element relative and adjusting the right property on your :before and :after pseudo elements.
Try this
.wrap {
width: 200px;
margin: 10% auto;
font-size: 14px;
}
select {
width: 100%;
padding:10px;
margin: 0;
border: 1px solid #bec1c3;
border-radius:0;
background: #fff;
color:#888;
line-height: 1;
outline:none;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
position: relative;
}
span.select {
position:relative;
padding: 9px 0;
}
span.select:after {
content:'';
width: 0px;
height: 0px;
border-style: solid;
border-width: 6px 4px 0 4px;
border-color: #bec1c3 transparent transparent transparent;
position: absolute;
right: 16px;
top: 14px;
pointer-events: none;
z-index: 100;
}
span.select:before {
content: '';
display: block;
right: 6px;
top: 0;
width: 34px;
height: 34px;
background: #F7F7F7;
position: absolute;
pointer-events: none;
z-index: 99;
}
Saucelabs shows the following browsers also show the bug you refer to :
1. Firefox 25 on windows7
2. Firefox 20 on windows7
3. Firefox 10 on windows7
4. Firefox 25 on Linux
Does this link help?
Firefox button and text input bug
I have tag me box to add the tag.
http://jsfiddle.net/hailwood/u8zj5/
I was trying to change it's looks using css.
I wanted to create tags and box to look like in this code:
http://jsfiddle.net/hAz5A/20/
I added the css in first but does not make change. Can any css guys help me out?
Just add the css from the second fiddle into the first fiddle
Note: if you want to remove the 'x' - delete tag (for some reason) then add display: none to your tagit-close class
FIDDLE
FIDDLE without delete button
ul.tagit.ui-widget li.tagit-choice {
display: block;
float: left;
position: relative;
line-height: inherit;
border-radius: 6px;
background-color: #EFEFEF;
border: 1px solid #DDD;
padding: 5px 15px 5px 5px;
margin-right: 10px;
color: #08c;
text-decoration: none;
}
ul.tagit.ui-widget li.tagit-choice a.tagit-close {
cursor: pointer;
position: absolute;
right: 5px;
top: 50%;
margin-top: -8px;
}
I have a case where my design requires me to declare this class:
.panel {
position: fixed;
top: 100vh;
height: 90vh;
margin: 0px;
padding: 0px;
width: 100%;
transition-property: top;
transition-duration: 1s;
}
.panel:before {
background-color: inherit;
top: -1.5em;
width: 10em;
text-align: center;
font-weight: bold;
content: attr(id);
position: absolute;
border-bottom: none;
border: .5em solid black;
border-top-color: inherit;
border-left-color: inherit;
border-right-color: inherit;
border-bottom: none;
border-radius: 25%;
border-bottom-right-radius: 0%;
border-bottom-left-radius: 0%;
}
In short, panels are tabs that fly in when targeted via an foo style link.
In their default state panels sit just under the bottom of the screen,
This creates a row of hidden panel objects whose before's appear as tabs across the bottom of the screen.
HTML for these panels is <section id="about" class="panel color">...</section> (where the color classes are effectively presentational for the moment, but will be upgraded to reflect specific tab purposes.
So, the challenge I'm trying to solve is that status bars will block the panel tabs which feels wrong, and I believe the solution is to bump them up a little bit (3 or 4 VH) when any link is hovered. This preserves status bar integrity, link integrity and the look of the site; treating the status bar as if it were a window resize.
I had believed that a:hover ~ * .panel { top: 97vh; } was the correct solution to do this, but it doesn't seem to be firing.