Currently I'm trying to implement some generic tooltips with no use of javascript (based only on css). For that I use a wrapper div with a wrapper css class and the tooltip class that has certain display attributes along with some margin-top and margin-left values to leave space for the hovered element.
It works on Chrome and Firefox, but in Safari the top value seems to be multiplied by the window scrolling putting way below the tooltip.
Does anyone has an idea of the workaround required for Safari?
The css classes:
.generic-tooltiptext {
visibility: hidden;
background-color: #333;
color: #fff;
border: solid thin #000;
text-align: center;
border-radius: 4px;
padding: 0px 5px;
margin-top: 20px;
margin-left: 20px;
position: absolute;
z-index: 1;
}
.generic-tooltip:hover .generic-tooltiptext {
visibility: visible;
transition-delay:0.75s;
}
This interacts with a react component:
interface GenericTooltip{
style?: CSSProperties;
text: string
}
export const GenericTooltip : React.FC<GenericTooltip> = ({style, text, children}) => {
return <div
style={style}
className="generic-tooltip">
<div className="generic-tooltiptext">
{text}
</div>
{children}
</div>
}
Just found out the problem doesn't have to do with margin: if I set margin to 0 the problem keeps appearing.
Changed the code to:
.generic-tooltiptext {
display: none;
/*--------------------*/
.generic-tooltip:hover .generic-tooltiptext {
display: block;
On the other hand, if I use display none / block as mechanism for conditional display, this "top margin" problem get's to be resolved... although the time lapse for the effect is taken out.
So there's some curious behaviour of visibility field within safari.
Related
I created a drop down menu with menubar. However I have custumization problems :
The transparency is well done, but the size of the horizontal items is too hight (and so not vertically centered. The required height is thirty pixels all inclusive ;
(just resolved with height: 30px; in passive mode (neither hover nor seleted). The selection "Button" item in the horizontal menu remains too hight
The vertical menu items are too separated from each over and the width of the vertical menus too narow ;
The movement in the verticals menu items not be materialized (with a blue color) as it is in the horizontal menu;
Impossible to move to a submenu with a mouse. Only with keybord arrows. Why ?
I tried a long time the css with modification of the "theme.css" of the saga-blue theme, but nothing to do nothing works except the css lines included in my code :
Code:
.p-menubar {
background: transparent;
padding: 0;
height: 30px;
}
What are the particular css elements and clauses to modify ?
Eventually, using Chrome's inspector, I ended up discovering the CSS classes involved. By groping on the values I got about what I wanted.
The impacted code:
In the vue.js file:
<div id="menuU" class="user-menu" v-show="isvisible()">
<Menubar:model="items" class="p-menubar"></Menubar>
</div>
the v-show parameter is application specific and not given here.
In css:
.menu-utilisateur {
background-color: lightgrey;
height: 30px;
}
.p-menubar {
background-color: lightgrey;
padding: 0px;
height: 30px;
}
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
padding: 0.5rem 1rem !important;
}
.p-menubar .p-menuitem-link {
padding: 0.5rem 0.5rem !important;
}
Don't forget the !important. It overwrites the default values.
It seems there is some magic around the <button>element that I don't understand.
Consider this markup:
<button class="button">Some Text</button>
<div class="button">Some Text</div>
And this CSS:
.button{
background: darkgrey;
height: 40px;
border: 2px solid grey;
width: 100%;
box-sizing: border-box;
font-size: 14px;
font-family: helvetica;
text-align: center;
margin-bottom: 20px;
/*I'm aware I could use this to center it*/
/*line-height: 40px;*/
}
What makes the text in the button element vertically centered? Webkit seems to predefine a -webkit-box-align with a value of center for the <button> element. If I set that to initial the text is no longer aligned to the center. But that doesn't seem to be the full magic, since on the other hand I had no luck centering the text on the div using the -webkit-box-align property.
Here is a fiddle: http://jsfiddle.net/cburgdorf/G5Dgz/
I know this is a couple of years old, but I'll add my thoughts after some investigation in to issue while writing a reset stylesheet for a project.
NOTE** This is based on looking through the Firefox source because it was the easiest to obtain and read through. However, based on similar behaviour in other browsers the implementation is probably similar.
Firstly, the main issue here is that <button> elements - atleast in Firefox - are built with an internal element between the <button> tag and it's children. In Firefox it's called moz-button-content and isn't something that can be reached with CSS and has been set to display block without inheriting the height of the button, you can see this style declaration in the useragent stylesheet:
From "source/layout/style/res/forms.css"
*|*::-moz-button-content {
display: block;
/* Please keep the Multicol/Flex/Grid/Align sections below in sync with
::-moz-scrolled-content in ua.css and ::-moz-fieldset-content above. */
/* Multicol container */
-moz-column-count: inherit;
-moz-column-width: inherit;
-moz-column-gap: inherit;
-moz-column-rule: inherit;
-moz-column-fill: inherit;
/* Flex container */
flex-direction: inherit;
flex-wrap: inherit;
/* -webkit-box container (aliased from -webkit versions to -moz versions) */
-moz-box-orient: inherit;
-moz-box-direction: inherit;
-moz-box-pack: inherit;
-moz-box-align: inherit;
/* Grid container */
grid-auto-columns: inherit;
grid-auto-rows: inherit;
grid-auto-flow: inherit;
grid-column-gap: inherit;
grid-row-gap: inherit;
grid-template-areas: inherit;
grid-template-columns: inherit;
grid-template-rows: inherit;
/* CSS Align */
align-content: inherit;
align-items: inherit;
justify-content: inherit;
justify-items: inherit;
}
Because you can't affect any of the styles on this element, you are forced to add you styling on the <button> tags. This leads into the second issue - The browser is hard coded to vertically position the content of the button.
From "source/layout/forms/nsHTMLButtonControlFrame.cpp"
// Center child in the block-direction in the button
// (technically, inside of the button's focus-padding area)
nscoord extraSpace =
buttonContentBox.BSize(wm) - contentsDesiredSize.BSize(wm);
childPos.B(wm) = std::max(0, extraSpace / 2);
// Adjust childPos.B() to be in terms of the button's frame-rect:
childPos.B(wm) += clbp.BStart(wm);
nsSize containerSize = (buttonContentBox + clbp.Size(wm)).GetPhysicalSize(wm);
// Place the child
FinishReflowChild(aFirstKid, aPresContext, contentsDesiredSize,
&contentsReflowInput, wm, childPos, containerSize,
ReflowChildFlags::Default);
Given these two issues you can start to see how the button force the content to be centered, consider:
<button> tag
+------------------------+ ^
| button extra space | |
| | |
+------------------------+ |
|| ::moz-button-content || | button height
|| display: block; || |
+------------------------+ |
| | |
| button extra space | |
+------------------------+ v
If you give the button a height - like the 48px from your fiddle, the text will be centered because the moz-button-content element is display block and will only have the height of the content (most likely the line-height of the content by default) and when put next to another element you get this behaviour:
* {
box-sizing: border-box;
margin: 0;
border: 0;
padding: 0;
font-family: san-serif;
background: none;
font-size: 1em;
line-height:1;
vertical-align: baseline;
}
button, a {
height: 3em;
}
button {
background: red;
}
a {
display:inline-block;
background: green;
}
<button>Button content</button>
<a>Link Content</a>
This bug and this bug in the Firefox issue tracker was about a close as I could find to any actually documented bug. But the threads give the impression that despite this not appearing in any actual spec, the browsers have just implemented it this way "because the other browsers are doing it that way"
There is a work-around to the issue if you actually want to change the default behaviour, but it doesn't completely solve the problem and YMMV depending on your implementation.
If you insert a wrapper <span> with display: block as the only child of the button and put all your content inside it you can use it to skip over the moz-button-content element.
You will need to make this <span> element have height: inherit so it correctly fills the height of the button and then add your normal button styling to the <span> instead, you will get basically behaviour you want.
* {
box-sizing: border-box;
margin: 0;
border: 0;
padding: 0;
font-family: san-serif;
background: none;
font-size: 1em;
line-height:1;
vertical-align: baseline;
}
button, a {
height: 3em;
}
button {
background: red;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
outline: 0;
}
button > span {
display: block;
height: inherit;
}
a {
display:inline-block;
background: green;
}
button.styled > span , a.styled{
padding: 10px;
background: yellow;
}
<button><span>Button content</span></button>
<a><span>Link Content<span></a><br/>
<button class="styled"><span>Button content</span></button>
<a class="styled"><span>Link Content<span></a>
It's also worth mentioning the appearance CSS4 rule (Not yet available):
While this is not a viable option (as of the 5th January) yet. There is a proposal to redefine the appearance rule in the CSS4 draft that might actually do the right thing an remove all assumptions made by the browser. I only mention it for completeness because it may become useful in the future.
UPDATE - 30/08/2016
You should actually use a <span> instead of a <div>, as div's aren't valid children for <button> elements. I have updated the answer to reflect this.
You could use padding.
For example
padding: 20px 10px;
I think that the only reason for this behaviour is that Google Chrome or browsers in general will take the default styles from your operating system.
For example, if you compare the button or scrollbar on Google Chrome run in windows 7 and windows 8:
In windows 7, the button will have a horizontal gradient line in the center of your button
In windows 8, the scrollbar are able to fade in and fadeout on click
This is just my opinion but hope that it can give you some ideas :)
You can use display:table-cell;
vertical-align: middle; as an alternate method.
On Mozilla Firefox I got the -moz-appearance property :
-moz-appareance: button;
In the HTML5 draft, there is a Rendering section, but doesn't details the placement :S
Button elements by default centers child elements vertically. It isn't done in a conventional CSS way, and therefor isn't trivial to override.
The best solution I have found is setting the button to flex column.
button {
height: 100px;
display: flex;
flex-direction: column;
}
span {
height: 20px;
width: 100px;
background-color: blue;
display: block;
}
<button>
<span></span>
</button>
Some answers suggested adding an inner wrapper, and setting it's height to inherit. This might not work for elements that have their height calculated dynamically.
In case you need to get rid of this behavior you can just add span as a child of button. Works better than trying to trick all the browsers.
I'm trying to get a second sibling element displaying in front of the first - with some severe restrictions:
I cannot alter the HTML or use javascript or jQuery.
I can only use CSS.
I can't change how classes are assigned (again, I don't have access to change any code apart from the one bespoke CSS file).
The left-hand menu features a number of the above HTML structures, building a clickable menu for the sections on the page. When a page section is completed, the 'completed-section' class is added to the first span (as shown above). This is what is causing me problems:
The CSS styling of the nav-link 'button' should change when it's completed, but since I can't access the parent of a CSS-selected element I need to make these changes directly to the 'menu-number' span element, including a 'nav-link' sized background colour. So I've made the menu-number the same size as the containing 'nav-link' . But when I add a background colour to the 'menu-number' , the text in the second is obscured.
How can I 'move' the second span in front of the first so I can see its text?
I have also tried making both spans position absolute or position relative and used z-index but this pulls the spans out of the flow of the document and means the width of the menu collapses. I can't set the width to a hard-coded value because the menu toggles open and closed, width-wise, (without a class being set) and the toggled width is set by javascript which, again, I can't access.
I have also tried using display: flex on the 'a' element and reversing the 'order' of span elements. No luck.
In semi-desperation I have tried setting the direction property on 'nav-link' to rtl. No luck.
I think I've tried a couple other things too, but at this point I'll wrap this question up.
Any pointers, much appreciated...
.menu-number {
border: none;
border-left: 10px solid transparent;
border-radius: 0px;
padding-top: 13px;
padding-left: 20px;
height: 45px;
position: absolute;
width: 100%;
text-align: left;
z-index: 100;
float: left;
}
.menu-number + span {
/*position: absolute;*/
padding-left: 40px;
z-index: 200;
}
.completed-section {
color: #42bb76 !important;
border-left: 10px solid #42bb76;
background-color: #274d56;
text-decoration: underline;
}
.nav-link > div > a {
display: flex;
*/flex-direction: row-reverse;*/
}
.nav-link > div > a > span:nth-of-type(1) {
order: 2;
}
.nav-link > div > a > span:nth-of-type(2) {
order: 1;
}
.nav-link > div > a > .section-name {
color: white;
padding: 13px 20px 0px 60px;
height: 45px;
float: left;
}
<div class="nav-link">
<div>
<a href="scroll/to/section">
<span class="menu-number completed-section">1.</span>
<span class="section-name">Section name</span>
</a>
</div>
</div>
I've also tried 'flex-direction' but I've now commented that out.
You can achieve this using CSS order property:
Here is the fiddle:
.menu-number {
order: 2;
}
.section-name {
order: 1;
}
.nav-link a{
display: flex;
}
<div class="nav-link">
<div>
<a href="scroll/to/section">
<span class="menu-number completed-section">1.</span>
<span class="section-name">Section name</span>
</a>
</div>
</div>
The actual version of the Ionic progress bar comes without an option to display the percentage text.
I tried to add it manually using the ::after selector but to no avail.
This is my Ionic code:
ion-progress-bar {
height: 18px;
border-radius: 20px;
}
<ion-progress-bar color="success" value="0.9"></ion-progress-bar>
While inspecting the element this is what I get in chrome's elements inspector
.progress, .progress-indeterminate {
background: var(--progress-background);
z-index: 2;
}
.buffer-circles, .indeterminate-bar-primary, .indeterminate-bar-secondary, .progress, .progress-buffer-bar, .progress-buffer-bar:before, .progress-indeterminate {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
width: 100%;
height: 100%;
}
<ion-progress-bar _ngcontent-c0="" color="success" value="0.9" ng-reflect-value="0.9" ng-reflect-color="success" role="progressbar" aria-valuenow="0.9" aria-valuemin="0" aria-valuemax="1" class="ion-color ion-color-success progress-bar-determinate hydrated">
#shadow-root
<!-- ....... -->
<div class="progress" style="transform: scaleX(0.9);"></div>
<div class="progress-buffer-bar" style="transform: scaleX(1);"></div>
</ion-progress-bar>
The only way with which I can add a text from the elements inspector to the progress bar, is to add it inside the div with the progress class:
<div class="progress" style="transform: scaleX(0.9);">90%</div>
But adding this text from my Ionic code isn't possible, so I tried to use the ::after selector but It did not work:
.progress:after{
content: "90%";
}
I don't need that the text changes dynamically since the progress-bar must display a static value that does not change.
Thanks!
I think what I was trying to achieve is impossible since it is a direct manipulation of the shadow dom.
Based on this article, There are some key points concerning shadow dom:
You cannot style any of the internal elements of a web component from outside of the web component using CSS selectors
You can style the internal elements of a web component if CSS4 variables are being used, as you can change the values of the CSS4 variables.
You can style slotted content inside of a web component (i.e. content you have supplied to the web component) from outside of the web component
You can style the host element of the web component (i.e. the element you use to add the web component to a page) from outside of the web component
Since there is no css4 variable or property that allows us to add a text value to the progress-bar, I had no choice but to use a custom html progress bar:
.progress-outer {
width: 96%;
margin: 10px 2%;
padding: 3px;
text-align: center;
background-color: #f4f4f4;
border: 1px solid #dcdcdc;
color: #fff;
border-radius: 20px;
}
.progress-inner {
min-width: 15%;
width: 90%;
white-space: nowrap;
overflow: hidden;
padding: 5px;
border-radius: 20px;
background-color: var(--ion-color-primary);
}
<div class="progress-outer">
<div class="progress-inner">90%</div>
</div>
The appearance of the progress-bar can be then customized by changing the css properties
simply you can put
ion-progress-bar {height:15px;}
in global.scss ..
if you also want to make the border radius then you can add the radius inside as well , as
ion-progress-bar {height:15px;border-radius:15px;}
I was wondering if this is possible:
if I have an input field:
<input type="button" value="some value" class="icon-button" />
and it is styled with gradient background, border, box-shadow, etc.
I want to have the button like an Icon with all its style and the value-text right next to it.
I thought of something like this, but it didn't work:
.icon-button{
display:block;
width: 25px;
height: 25px;
/* gradients, borders, shadows, etc. */
text-indent: 30px;
overflow: visible;
}
Any Idea? I know I could solve it with javascript, but I would like to know if there is a css way to do this.
I don't think you're going to achieve this (at least not very neatly) using an input. If you can amend your markup to use an actual button to submit though, it's pretty trivial:
<button type="submit">Some value</button>
CSS:
button {
line-height: 25px;
border: none;
background: transparent;
cursor: pointer;
}
button::before {
content: '';
display:inline-block;
vertical-align: middle;
width: 25px;
height: 25px;
margin-right: 3px;
/* gradients, borders, shadows, etc. */
background: red;
}
You could use a span rather than generated content if IE7 support is needed. This approach is not possible with an input, as that can't contain any elements, nor can it have generated content.
If you need to use an input, you could achieve the same thing by wrapping it in a span and styling that.