The problem is I want to make the gray button hidden and get revealed after hovering on a card with hotel pictures.
Currently, I have this site as an example: https://cofffelo.github.io/HotelShop/#
I tried to hide the buttons at their default state by display:none and make it display:block by executing :hover pseudo-index, but because it was hidden from the start, there was nothing to hover, and because I'm kind of a newbie, I ran out of ideas.
The code I tried to add:
.cardbutton{
display: none;
}
.cardbutton:hover{
transform: translateY(30px);
display: block;
background-color: #333;
}
You can use a transition delay
.cardbutton:after {
opacity: 0;
content: "";
}
.cardbutton:hover:after {
opacity: 1;
transition: opacity 0s linear 1.5s;
content: "content text here";
}
Related
I'm working with QT and I have a menu. I have the follwing css for the menu:
QMenu {
/* background-color: #0F7070;*/
background-color:rgb(44,63,80);
border-top: none;
border-left:none;
border-right:none;
border-bottom:4px solid rgb(44,205,112);;
color:#fff;;
}
QMenu::item {
spacing: 3px; /* spacing between menu bar items */
padding: 10px 85px 10px 20px;
background: transparent;
}
/*Does not work*/
QMenu::item:hover {
background-color: rgb(52,73,94);
border-top: none;
border-left:none;
border-bottom:none;
border-left:3px solid rgb(44,205,112);;
}
How can I set the :hover to the item? Thank you.
I had same issue few years ago with a QT project.
Even if it may look like conterintuitive i solved changing:
item:hover
to
item:selected
I was advised so on QT forum, in that contest :selected acted as :hover, i didn't get deeper in the question, maybe won't work, but it worth a try.
I intend to set the background color of the QWidget
QWidget {
background-color: white;
}
But later, when the menu QAction is selected, the font is white, and the background is also white.The menu button font and background can be reset in the following ways
QMenu::item:hover {}
to
QMenu::item:selected {}
This way works, thanks
I have a tab component with two tabs. The buttons are clickable, and clicking on where the buttons should be is correctly displaying the tab contents, but the buttons are invisible.
<ion-header>
<ion-navbar>
<ion-title>{{coupon.title}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div class="coupon-image-container">
<img src={{coupon.mainImage}}/>
<button ion-button class="left">Redeem</button>
</div>
<ion-tabs class="coupon-tabs">
<ion-tab tabIcon="map" [root]="mapTab" tabTitle="Map"></ion-tab>
<ion-tab tabIcon="information" [root]="infoTab" tabTitle="Info"></ion-tab>
</ion-tabs>
</ion-content>
I don't think any other code is necessary but I'll provide more if needed. Like I said the contents of the mapTab and infoTab components are showing up fine, and clicking on where the tab buttons should be is switching between them, but the buttons are just blank white.
Edit: Just in case someone was going to ask, it still does the same thing if I remove everything else in the component except for the tab component like so:
<ion-tabs class="coupon-tabs">
<ion-tab tabIcon="map" [root]="mapTab" tabTitle="Map"></ion-tab>
<ion-tab tabIcon="information" [root]="infoTab" tabTitle="Info"></ion-tab>
</ion-tabs>
So it definitely has nothing to do with the other content.
Edit: I made a gif showing the problem: http://g.recordit.co/WDkjkSz6re.gif
Edit: Here's the styles on ion-tab
element.style {
}
main.css:25224
.coupon-tabs ion-tab {
color: black;
top: 56px;
}
main.css:5136
ion-tab.show-tab {
display: block;
}
main.css:5145
ion-app, ion-nav, ion-tab, ion-tabs, .app-root, .ion-page {
contain: strict;
}
main.css:5132
ion-tab {
display: none;
}
main.css:5128
ion-nav, ion-tab, ion-tabs {
overflow: hidden;
}
main.css:5116
ion-app, ion-nav, ion-tab, ion-tabs, .app-root {
left: 0;
top: 0;
position: absolute;
z-index: 0;
display: block;
width: 100%;
height: 100%;
}
main.css:4986
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
Inherited from ion-tabs.coupon-tabs.tabs.tabs-md.tabs-md-primary
main.css:25219
.coupon-tabs {
position: relative;
color: black;
}
main.css:4986
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
Look for class .tabbar and check its opacity. Change it if needed.
do this instead:
<ion-tab icon="ion-map" title="Map"></ion-tab>
<ion-tab icon="ion-ios-information" title="Info"></ion-tab>
after you do this you might have noticed that text do not appear, though the text did appear but it was way below the icon and was hidden by overflow. You might need to move the text a bit higher with position: relative; top: -XXpx or make parent overflow: visible.
If you aren't building the project with typescript I guess the issue was tabTitle and tabIcon was not translated properly to the example above or If you we're building this project with typescript then it fails to translate the attributes to its proper way.
hope that helps
I saw some other issues in google related to this
Mine was because i initialised the tabs properties in the top of the class instead of the constructor
This one below doesn't work.
export class TabsPage {
tab1 = Page1;
tab2 = Page2;
constructor() {}
}
This one worked fine.
export class TabsPage {
tab1: any;
tab2: any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.tab1 = Page1;
this.tab2 = Page2;
}
}
Also, for some reason tabs were not showing up on the screen, although they were present in the DOM, maybe because i had nested tabs in my app. So had to add this in the tabs-page.scss
.tabbar {
opacity: 1;
}
I have a QStyledItemDelegate with custom painting. Each item comprises some text and a progress bar. The progress bar is circular (radial) so it is custom-drawn too:
Also my application uses QSS for some custom styling.
This item delegate was used in a QListView.
I want be able to set different ProgressBar chunk colors for 100% and non-100% with QSS.
Question
Is there any way to know color for progress bar chunk for current QSS?
Investigation and code I've tried:
QSS:
QProgressBar { border: 1px solid #909090; ; }
QProgressBar[value="100"]::chunk {
width: 10px;
margin: 0.5px;
background-color: rgb(50,145,212);
}
QProgressBar::chunk {
width: 10px;
margin: 0.5px;
background-color: rgb(81,211,49);
}
C++:
QStyleOptionProgressBarV2 pbStyleOption;
{
boost::scoped_ptr<QProgressBar> pb(new QProgressBar());
pb->setStyle(QApplication::style());
pb->setStyleSheet(static_cast<QApplication*>(QApplication::instance())->styleSheet());
pb->setValue(progressPercentage);
pb->setMaximum(100);
pbStyleOption.initFrom(pb);
qDebug() << pbStyleOption.palette.brush(QPalette::Highlight);
}
I'm using QPalette::Highlight because I looked into Qt's source for styles and it uses this ColorRole for PE_IndicatorProgressChunk.
P.S.
QSS above works only for a slightly modified QProgressBar. The only modification is a reimplemented setValue(). Here is its code:
void StyledProgressBar::setValue(int val)
{
QProgressBar::setValue(val);
style()->unpolish(this);
style()->polish(this);
update();
}
Ok, so I've searched around a bit and cannot find an answer to my question. At least not one that matches my problem exactly; so here's to hoping you guys don't have better luck, and that one of you knows the answer to my problem.
Before anyone asks... Yes, I am a developer with Microsoft, Yes, IE is our product, Yes, ALMOST everyone on my development team would rather use Firefox or Chrome as opposed to IE, and no... we have no control over how it operates, because that is the responsibility of the Internet Explorer team. In addition, we are not the evil empire everyone makes us out to be.
That being said, I'll give you what code I can in hopes to paint the best picture possible.
The select dropdown is a customized version, where I've hidden it's default arrow via a div tag and included my own dropdown arrow in the background of it's surrounding div with a class rightarrow. These elements are dynamically bound together via jQuery, here is the jQuery code...
function loadMarketSelector(options) {
// If the market selector already exists, just make sure it's visible.
if ($('#marketSelectorContainer').show().length) {
return;
}
var settings = { defaultCsvMarket: "", marketLabel: "", addUrl: "", loadingId: "", panelId: "", csvMarketOptions: [] };
if (options) {
$.extend(settings, options);
}
var $select = $('<select>', { id: 'csvMarketSelector', name: 'csvMarketSelector' }).addClass('items');
var defaultCsvMarketLowercase = settings.defaultCsvMarket.toLowerCase();
// Populate the market list
$(settings.csvMarketOptions).each(function (index, element) {
var $option = $('<option>', { title: element.label, text: element.label, dir: element.dir });
$option.data('marketId', element.market);
// If the user hasn't selected a market yet, use the best guess for their current language
if (element.market.toLowerCase() == defaultCsvMarketLowercase) {
$option.attr('selected', true);
$option.attr('class', 'selected');
} else {
$option.attr('class', 'other');
}
$select.append($option);
});
var $marketSelectorContainer = $('<div class="marketCont" id="marketSelectorContainer">').append($('<div class="marketvalue">').append($('<span>', { text: settings.marketLabel })).append($('<div class="marketlist">').append($('<div class="rightarrow hidden">').append($select))));
$('#payment-options-iframehost').before($marketSelectorContainer);
// When the user clicks on a market, refresh the page with the locale set to that market and with the redemption interface already open
$('.marketlist select').bind({
change: function () {
// Reload the page with the language set to the selected market and with the "redeem card" menu already open
var langParam = "lang=" + $(this).find('option:selected').data('marketId');
window.location.hash = 'redeem';
if (!window.location.search) {
window.location.search = langParam;
}
else if (window.location.search.search(/lang=/)) {
window.location.search = window.location.search.replace(/lang=(.+)&?/, langParam);
}
else {
window.location.search += '&' + langParam;
}
},
click: function(e){
$(this).parents('.rightarrow').toggleClass('downarrow');
//Once the select box is clicked collect the options right and left offsets.
var leftPos = $(this).offset().left;
var rightPos = leftPos + $(this).width();
//After the select box is clicked, if the mouse moves outside of the left and right positions;
//deactivate the dropdown box and return the sprite to it's original position.
$(document).mousemove(function(e){
if (e.pageX < leftPos-10 || e.pageX > rightPos+10) {
$('.marketlist select').trigger('blur');
}
})
},
blur: function () {
if ($(this).parent().hasClass('downarrow')) {
$(this).parent().removeClass('downarrow');
}
}
});
var mkt = $('.marketlist select option.selected').data('marketId'),
iframeId = settings.panelId + " iframe";
if (typeof mkt !== "undefined") {
// If the market passed to the page (via the lang param or the browser language) is CSV supported, load the PCS iframe
bam.ui.loadIframe(iframeId, appendParameters(settings.redeemCardUrl, { lmkt: mkt, mkt: mkt }), settings.loadingId, true, function () { $('.rightarrow').show();});
}
else {
// If the market is not supported, hide the description text but don't load PCS (since it won't work). The selector will be blank by default.
$(iframeId).hide();
}
}
Here is the css that applies to each of the elements...
.payment-options-page .marketCont {
height: 40px;
margin-left: 50px;
margin-bottom: 2px;
}
.payment-options-page .marketvalue .marketlist {
overflow: hidden;
margin-top:4px;
text-align: left;
width: 231px;
border: 1px solid #7c7c7c;
display: block;
vertical-align: middle;
height: 19px;
padding-left: 10px;
line-height: 19px;
cursor: pointer;
background: #fff;
}
.payment-options-page .marketvalue .marketlist .rightarrow select
{
height: 19px;
background: transparent;
border: 0;
border-radius: 0;
width: 253px;
position: relative;
cursor: pointer;
padding-left: 20px;
left: -20px;
z-index: 100001;
}
.payment-options-page .marketlist .rightarrow
{
background: url('/Content/all/imgs/transactions_down_right_arrow.png') no-repeat;
background-position: -318px -220px;
height: 19px;
width: 180px;
float: left;
cursor: pointer;
padding-left: 10px;
}
.payment-options-page .marketvalue .downarrow {
background: url('/Content/all/imgs/transactions_down_right_arrow.png') no-repeat;
background-position: -319px -277px;
height: 19px;
float: left;
cursor: pointer;
margin-right: 9px;
}
.payment-options-page .marketvalue .marketlist .rightarrow,
.payment-options-page .marketvalue .hover .downarrow
{
position:relative;
overflow:hidden;
}
The semantic select box works fine in all browsers if I click directly on the select box. The problem is when I click on the custom arrow in IE it acts as if it's dropping the list down (ie: The arrow changes from a right arrow to a down arrow and the select box highlights)(See the IE image) but the dropdown box acts as if it is hiding behind other elements.
The other form elements are in an iframe, where the country drop-down list is not.
Clicking on the arrow works in firefox...
Works in Chrome...
Clicking on the arrow in IE does not
but clicking on the select box itself does work...
I am having the same issue in a couple of projects right now and couldn't find an answer, so I've resolved to simply let the IE browsers use their default dropdown arrow. If you already have an IE only stylesheet (if not read this article on best practices for conditional styles - http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) then you can just target the arrow there, and tell it not to display:
.payment-options-page .marketlist .rightarrow {display: none;}
The result might not look perfect, but it functions properly at least. From what I can tell the other browsers ignore the overlapping element, and for whatever reason IE registers this element and won't allow the click to work, and can't be fixed by offsetting the 'z-index' of either of the elements.
EDIT
A little more searching and I found a reason why. IE does not support pointer-events: none - which is the css property you need to apply to your arrow to let the browser know it should be ignored. See this answer for more info: https://stackoverflow.com/a/17441921/2539808
I'm still on the hunt for a solution to this problem, and I'll definitely let you know if I find one that can function while still looking the way we want it to :)
How do you transition using CSS the properties of elements with display none?
My current solution is to set display to block with JavaScript, wait 10 milliseconds for repaint, then apply the class that changes the properties I want to animate.
Note: I'm using jQuery for code brevity.
CSS - animating opacity as an example. Don't care about $.show().
.element
{
display:none;
opacity:0;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
transition:all 0.5s;
}
.element.shown
{
opacity:1;
}
JavaScript
function show()
{
var $element=$('.element');
$element.css({display:'block'});
//Add class a few moments later than chaning display to block, otherwise animations CSS Transitions won't fire
setTimeout(function(){
$element.addClass('shown');
},10);
}
function hide()
{
var $element=$('.element');
$element.removeClass('shown');
//Remove element from display after transition ends
$element.on('webkitTransitionEnd otransitionend oTransitionEnd MSTransitionEnd transitionend',function()
{
$element.css({display:'none'});
});
}
I feel there should be a better way though, a CSS-only way. Is there?
I just found workaround. All you need is use animation and start it little bit after you apply display:block. Like this:
#keyframes submenu_animation {
from {
opacity: 0;
}
1% {
opacity: 0;
}
99% {
opacity: 1;
}
to {
opacity: 1;
}
}
li ul {
opacity: 0;
display: none;
animation-name: submenu_animation;
animation-duration: 300ms;
animation-direction: reverse;
li ul.open {
display: block;
}
li:hover ul {
animation-direction: normal;
opacity: 1;
}
Javascript is pretty the same, It will apply class "open" once you hover on required element. When you hover-out it will remove "open" class little bit later, when animation is finished.