I have added title field for node. As per vis.js documentation it should display tooltip on hover of node.
I can see vis-tooltip div in inspect element. But its visiblity is hidden. In vis.js documnetation example I saw popup.css file getting applied to vis-tooltip class. But I don't see it in my application
I have following properties for nodes in options. Do I need to add anything ?
nodes: {
title: 'hover',
shape: 'dot',
chosen: true,
color: {
highlight: {
border: '#2B7CE9',
background: '#fff'
},
hover: {
border: '#2B7CE9',
background: '#D2E5FF'
}
},
font: {
size: 9
},
borderWidth: 2
}
sample node data
{id: 9264, type: "db", title: "node-text", resource: "dascsvd", region: "xxxxx"}
For vis-tooltip class css needs to be applied dynamically on hover. Which wasn't happening in my case. That css was coming frpm popup.css file. I copied those css and added to my code.
Now its working fine as expected
::ng-deep div.vis-tooltip {
position: absolute;
visibility: hidden;
padding: 5px;
white-space: nowrap;
color: #000000;
background-color: #f5f4ed;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #808074;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
pointer-events: none;
z-index: 5;
}
Related
Seems like this question has been asked and answered many different ways, but the answers I've seen either don't apply to Emotion or the Emotion-related answered haven't worked for me. I'm on #emtion/core#10.0.28 and #emtion/styled#10.0.27.
Essentially I want to apply styles to a child component when the parent is hovered/active/focused. The parent is a button and the child is an optional icon. The following styles are added to the (parent) button via the styled syntax.
const iconWrapperStyles = (props) => {
return css`
${props.IconWrapper} {
width: ${iconSizeMedium};
height: ${iconSizeMedium};
margin-left: ${spacingSizeSmall};
color: ${textColor};
fill: ${textColor};
background: ${backgroundColor};
border-color: ${borderColor};
}
&:hover:not(:disabled),
&:focus:not(:disabled),
&:active:not(:disabled) ${props.IconWrapper} {
outline: none;
color: ${textColorHover};
fill: ${textColorHover};
background: ${backgroundColorHover};
border-color: ${borderColorHover};
}
`;
};
The first block of styles is successfully applied. Therefore, at first blush, the button and child icon appear properly styled. However, when you hover/focus/make active the button, the icon does not change. I've tried the implementation above, along with ... + ${IconWrapper} and ... & ${IconWrapper}; all three fail for me. Official docs indicate that the & should work.
Regardless of the JS framework, the following should always work.
button {
background: darkblue;
color: white;
border: none;
padding: 5px;
}
button:hover i {
color: red;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<button>
<i class='icon-edit'></i> Click to edit
</button>
In your case, that becomes
${props.IconWrapper} {
width: ${iconSizeMedium};
height: ${iconSizeMedium};
margin-left: ${spacingSizeSmall};
color: ${textColor};
fill: ${textColor};
background: ${backgroundColor};
border-color: ${borderColor};
}
&:hover:not(:disabled) ${props.IconWrapper},
&:focus:not(:disabled) ${props.IconWrapper},
&:active:not(:disabled) ${props.IconWrapper} {
outline: none;
color: ${textColorHover};
fill: ${textColorHover};
background: ${backgroundColorHover};
border-color: ${borderColorHover};
}
I failed because my CSS is weak. Comma-separated CSS decorators do not iterate against the finally-declared element.
From this...
&:hover:not(:disabled),
&:focus:not(:disabled),
&:active:not(:disabled) ${props.IconWrapper} {
outline: none;
color: ${textColorHover};
fill: ${textColorHover};
background: ${backgroundColorHover};
border-color: ${borderColorHover};
}
To this...
&:hover:not(:disabled) ${props.IconWrapper}, // include child el
&:focus:not(:disabled) ${props.IconWrapper}, // include child el
&:active:not(:disabled) ${props.IconWrapper} {
outline: none;
color: ${textColorHover};
fill: ${textColorHover};
background: ${backgroundColorHover};
border-color: ${borderColorHover};
}
I am working on a Select component in React using Material UI. The project uses external SCSS sheet imported in the script file for the component.
I couldn't find another way to restyle the CSS of the component, but using the generic material UI classes. However, in the end it seems I had to use !important all the time in order to overwrite the attributes.
The .js looks like this:
<Select
value={this.state.age}
onChange={this.handleChange}
name="age"
displayEmpty
className='select-row-items'
IconComponent = {ExpandMore}
MenuProps={{
anchorOrigin: {
vertical: "bottom",
horizontal: "left"
},
transformOrigin: {
vertical: "top",
horizontal: "left"
},
getContentAnchorEl: null
}}>
<MenuItem disableGutters={true} value="">123-456-789123456-01</MenuItem>
<MenuItem disableGutters={true} value={10}>123-000-457889562-00</MenuItem>
<MenuItem disableGutters={true} value={20}>122-586-888865987-00</MenuItem>
</Select>
I can only style components directly within className 'select-row-items' which I assigned myself. For MenuItems I had to use generic classes and !important next to every value so it can work.
Any thoughts on how can I improve the CSS?
My CSS looks like this:
.select-row-items {
.MuiSelect-select {
background-color: #D5E4EE; //replace with variables for secondary colors (light blue)
color: #194581; //replace with variables for secondary colors (dark blue)
font-size: 12px;
font-weight: normal;
padding: 4px 12px;
&.MuiSelect-select {
padding-right: 36px;
}
&:focus {
background-color: #D5E4EE; //replace with variables for secondary colors (light blue)
}
&::after {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 25px;
background-color: rgba(0, 0, 0, 0.1);;
}
}
.MuiSelect-icon {
font-size: 16px;
color: #194581; //replace with variables for secondary colors (dark blue)
font-weight: lighter;
right: 4.5px;
top: 50%;
transform: translateY(-50%);
}
&.MuiInput-underline:before,
&.MuiInput-underline:hover:not(.Mui-disabled):before,
&.MuiInput-underline:after {
display: none;
}
}
.MuiList-root {
padding: 0 !important;
background-color: #D5E4EE; //replace with variables for secondary colors (light grey)
}
.MuiPopover-paper {
left: 0!important;
border-radius: 0 !important;
box-shadow: none !important;
}
.MuiMenuItem-root {
font-size: 12px !important;
color: #194581 !important; //replace with variables for secondary colors (dark blue)
font-weight: normal;
padding: 5px 12px !important;
border-bottom: 1px solid #fff !important;
&:first-child {
border-top: 1px solid #fff !important;
}
}
.MuiListItem-button:hover, .MuiListItem-root.Mui-selected:hover {
background-color: #194581 !important; //replace with variables for secondary colors (dark blue)
color: #ffffff !important;
}
.MuiListItem-root.Mui-selected {
background-color: rgba(0, 0, 0, 0.1) !important;
}
Could you render your SCSS/CSS file after the script imported one? That way it would overwrite without having to use the important tag.
I have a CSS-stylesheet that contains several classes to style accordion elements. Due to several restrictions in the editor software I am forced to use, I need to embed other accordions via JavaScript.
This script only allow me to use three CSS classes to style the accordion. I would like to give them a similar style like those created by the editor.
My problem is that I can't figure out how to 'break down' the following multiple classes (those from the editor software) to the three new classes (those for the JS) to get a similar style of the accordions.
Existing CSS classes from the editor:
<cc:*> Accordeon </cc:*>
.sqracc {
box-sizing: border-box;
margin: 0 auto 30px auto;
max-width: 1400px;
}
.sqracc .sqracchead {
box-sizing: border-box;
margin: 0 30px;
padding: 0;
border-bottom: 1px solid <cc:print value="site.properties.design.boxborder">;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
.sqracc .sqracchead:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.sqracc .sqracchead div {
padding: 10px 20px 10px 32px;
border-top: 1px solid <cc:print value="&site.properties.design.boxborder">;
border-left: 1px solid <cc:print value="&site.properties.design.boxborder">;
border-right: 1px solid <cc:print value="&site.properties.design.boxborder">;
cursor: inherit;
float: left;
background: #ffffff url(<cc:print value="&accclosed.svg.filename">) 10px 50% no-repeat;
min-width: 30%;
-webkit-user-select: none;
user-select: none;
}
.sqracc .sqracccontainer {
display: none;
}
.sqracc.sqraccopen .sqracccontainer {
display: block;
}
.sqracc.sqraccopen .sqracchead div {
background-image: url(<cc:print value="&accopen.svg.filename">);
}
#media screen and (max-width: 767px) {
.sqracc .sqracchead {
margin: 0;
padding: 0 30px;
}
}
And this are my new classes:
.bar {
}
.baropen {
}
.content {
}
I tried the following but it didn't work:
.balken {
box-sizing: border-box;
cursor: hand;
cursor: pointer;
padding: 10px 20px 10px 32px;
border-top: 1px solid <cc:print value="&site.properties.design.boxborder">;
border-left: 1px solid <cc:print value="&site.properties.design.boxborder">;
border-right: 1px solid <cc:print value="&site.properties.design.boxborder">;
cursor: inherit;
float: left;
background: #ffffff url(<cc:print value="&accclosed.svg.filename">) 10px 50% no-repeat;
min-width: 30%;
}
.balkenopen {
cursor: hand;
cursor: pointer;
background-image: url(<cc:print value="&accopen.svg.filename">)no-repeat;
}
.inhalt {
padding: 10px;
}
[EDIT]
here is the JS which I embedded in the code of the editor:
<script type="text/javascript" src="<cc:print value="&ddac.url">">">
</script>
<cc:if cond="¶.properties.design.ddaccor.first.default.open">
<cc:set value="0" obj="para.properties.design.ddaccor.first.default.open"></cc:if>
<script type="text/javascript">
<cc:if cond="&topic.properties.design.ddaccor.scrolltop"><cc:set value="true" obj="scrollstatus"><cc:else><cc:set value="false" obj="scrollstatus"></cc:if>
<cc:if cond="&topic.properties.design.ddaccor.default.open gt 0"><cc:set value="&topic.properties.design.ddaccor.default.open-1" obj="topic.properties.design.ddaccor.default.open"></cc:if>
//Initialize first Default Open :
ddaccordion.init({
headerclass: "bar", //Shared CSS class name of headers group
contentclass: "content", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [<cc:print value="&topic.properties.design.ddaccor.default.open">], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
scrolltoheader: <cc:print value="&scrollstatus">, //scroll to header each time after it's been expanded by the user?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["bar", "baropen"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "<cc:print value='&topic.properties.design.ddaccor.slide.speed'>", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
As you can see this script have given classes. And I cant figure out how to edit those classes in order that they create a similar style like the accordion style classes in the editor CSS.
There is only one CSS file for the whole page.
[/EDIT]
I don't know this type of editor but you have two ways to achieve what you want:
Solution#1:
If there is a reference for the editor css
just put it before your customized css reference e.ge
<html>
<head>
<link rel="stylesheet" href="editor.css">
<link rel="stylesheet" href="YourCustomizedStyle.css">
</head>
<body>
</body>
</html>
This will make your style override the editor style
Solution#2:
Use !important on your CSS (I do not prefer this way) like this:
.balken {
box-sizing: border-box !important;
cursor: hand !important;
cursor: pointer !important;
padding: 10px 20px 10px 32px !important;
border-top: 1px solid <cc:print value="&site.properties.design.boxborder"> !important;
border-left: 1px solid <cc:print value="&site.properties.design.boxborder"> !important;
border-right: 1px solid <cc:print value="&site.properties.design.boxborder"> !important;
cursor: inherit !important;
float: left !important;
background: #ffffff url(<cc:print value="&accclosed.svg.filename">) 10px 50% no-repeat !important;
min-width: 30% !important;
}
.balkenopen {
cursor: hand !important;
cursor: pointer !important;
background-image: url(<cc:print value="&accopen.svg.filename">)no-repeat !important;
}
.inhalt {
padding: 10px !important;
}
I know many people asked this question. I also searched it here already. One of easiest solutions is with stylesheet:
QRadioButton {
background-color: rgb(252,254,252);
color: black;
}
QRadioButton::indicator {
width: 11px;
height: 11px;
border-radius: 5px;
}
QRadioButton::indicator::unchecked{
border: 1px solid;
border-color: rgb(132,132,132);
border-radius: 5px;
background-color: white;
width: 11px;
height: 11px;
}
QRadioButton::indicator::checked{
border: 3px solid;
border-color: white;
border-radius: 6px;
background-color: rgb(0,116,188);
width: 7px;
height: 7px;
}
But if I do this way, the result looks like this
(The button has only white-round border and blue-round inside). However, can we make the black border outside of them like standard checked radio button
?
(black-border->white-border->blue round). Can we do it in Qt?
Forget about trying to style checkboxes or radio buttons that way in Qt -- it's a nightmare and you will never really get the results you want. The best way to do this in Qt is to make individual image files for each button state, like in the Style Sheet Examples:
QRadioButton::indicator
{
width: 13px;
height: 13px;
}
QRadioButton::indicator::unchecked
{
image: url(:/images/radiobutton_unchecked.png);
}
QRadioButton::indicator:unchecked:hover
{
image: url(:/images/radiobutton_unchecked_hover.png);
}
QRadioButton::indicator:unchecked:pressed
{
image: url(:/images/radiobutton_unchecked_pressed.png);
}
QRadioButton::indicator::checked
{
image: url(:/images/radiobutton_checked.png);
}
QRadioButton::indicator:checked:hover
{
image: url(:/images/radiobutton_checked_hover.png);
}
QRadioButton::indicator:checked:pressed
{
image: url(:/images/radiobutton_checked_pressed.png);
}
Create a QRadioButton with the following style:
QRadioButton{
background-color: None;
}
QRadioButton::indicator {
width: 14px;
height: 14px;
border-radius: 9px;
border: 2px solid;
}
Create a "QLabel" with the style as follow: (height-10, width-10)
border-radius: 5px;
background: #0068B5;
And place the Qlabel at the center of the QRadioButton (Using QTDesigner)
In PySide/PyQT while toggling hide the Qlabel if unchecked or show Qlabel if checked.
Worked for me !!!
I am using .table-responsive class to make my Bootstrap tables responsive and it's working fine but the user doesn't have any indicator that the table is horizontally scrollable!
How can I make the horizontal scrollbar always displayed, not only after the user actually starts scrolling.
Edit
The solution mentioned here almost works: Always show scrollbars in iPhone/Android:
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
Its problem is showing the scrollbars everywhere, not just to .table-responsive class. How I can restrict it?
Sorry for being 5 years late, but you must add .table-responsive before the pseudo-element, like this:
.table-responsive::-webkit-scrollbar {
-webkit-appearance: none;
}
.table-responsive::-webkit-scrollbar:vertical {
width: 12px;
}
.table-responsive::-webkit-scrollbar:horizontal {
height: 12px;
}
.table-responsive::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
.table-responsive::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
You can enclose your table with:
<div style="overflow-x:scroll;">
If you add overflow-x:scroll to the <768 breakpoint, it will always show the scrollbar below 768px. But as a caveat, it will also show when there is nothing to scroll (i.e. if the table is narrower than 768px)...
#media(max-width:767px){
.table-responsive{overflow-x:scroll;}
}
Another thing you could do is to use a pseudo element.
.<classname>:before {
padding: 2px 5px;
content: "Swipe left to read more";
color: #fff;
background: #333;
}