Recently i encountered a problem with the dropdown menu called "WHO WE SUPPLY". The main_menu disappear just when i move my cursor over them. I have tried the other answers to similar questions like this but they were not of great help in my case.
I just want the dropdown elements to remain at their places when i move my mouse over them so that i can select them.
Can anyone please check the problem?
My website link is http://effortlessled.com/
Try to go to the WHO WE SUPPLY tab and you will see what exactly i am saying.
Many thanx in advance..
..hope to get a reply soon !!
As far as I can see the "color" property of your "Who We Supply" anchor tag is getting overridden by some other class's color property and the firebug is pointing to line #530 of your style.css file.
The color property mentioned there is "#FFFFFF" which is for white color.
So change the color of that particular class.
Basically the link is not hidden just the color property of that link changes on Hover event to White which is same as your background color
Related
Haven't coded in years, and started to play around with Google App Maker last week. As the title suggests, I have a couple questions.
I'm trying to figure out if there's a way to dynamically change the color of a button upon click. Right now I have the button changing enabled status to false on click, and using CSS style to change the color of disabled buttons to gray. Is there a way to do this without disabling the button?
Is there a way to wrap text in a button? Right now I am overlaying a Label on the button with the correctly styled font, but would ideally like to have that text be from the Button, as the space the label takes up is not clickable.
Thanks in advance for any help!
add some lines to your page or global styles this
this should let you wrap text.
.app-Button {
white-space: pre-wrap;
}
Say you want to change your button blue when a Boolean value gets changed to "true" in your data source.
add a class to your styles
.blue{
background: blue;
}
then select your button and in the property editor>Display>styles click the drop down and select binding
set the binding to
=#datasource.item.**YourBooleanItem** === true? ['blue']:[]
Clarification there are two steps
Define a CSS class
Add the Class to the "styles" property of
your widget.
The Answer above uses a "binding" but also means that you've got to have an Item with this binding which you may not want.
I wanted a 'decimal' button to be orange when it was active. So on the Page I created a DecimalActive property. I used the onAttach event to set this property to false.
I created a CSS Class (local to the page) named Orange and Normal
.Orange {background:orange};
.Normal {background:white};
Then the following is my onClick
onClick(widget,event)
{
widget.root.properties.DecimalActive = !widget.root.properties.DecimalActive;
widget.styles = widget.root.properties.DecimalActive ? ['Orange'] : ['White'];
}
The challenge was figuring out exactly what AppMaker wanted in the styles []. I don't think it puts applied styles in this array. At least they didn't show up when I console.log(JSON.stringify(widget.styles);
I have verified that this does work (Dec 2019)
I think this answer is clearer and if someone wants to bind it the color change they still can.
I may not have described the issue accurately with the title, but it's easier to explain here:
I have a button that has an icon image contained within it. I need to get rid of the grey box around that icon and keep the icon itself, along with the button functionality. I assigned the button a second class called "nogray", and in my styling sheet I set opacity to 0.
However, this got rid of the entire button, along with the little orange trash bin icon, which I need to be visible. Essentially, I need the button to function the same way, just with the orange icon and no grey box. In this screenie, you can see the buttons at the top of each bulletin note.
Here is the button code in the bulletin notes view:
<button class ="remove-card nogray" id="#item.BulletinId" type="button"><i
class="fa fa-trash"></i></button>
And here is the css for the button:
i.fa.fa-trash::before {
content: "\f1f8";
}
.remove-card.nogray {
opacity:0;
}
(i.fa.fa-trash::before targets the trash icon, and .remove-card.nogray targets the outer gray area. However, I suspect that the latter is targetting the entire button because setting the opacity to 0 affects both gray area and icon.
How would I tweak the button code so that the opacity is 0 only for the grey, and not the icon? I've tried changing the order of the code element by element, but a lot of it is guesswork because this is a team effort and I did not personally write the button code. I'd also like to apologize in advance if this is an impossible question to answer; if there's some detail you need to know, please tell me and I will edit this to include it.
Thank you very much for any suggestions!
I realized I was targeting the wrong lines of code in my css. There was an ActionLink that a teammate commented out, and I assigned the classes from that to my original button code and was able to target the button that way instead.
Is there a way to find the element that contains the href to the current featherlight content when cycling through a gallery?
Basically, I want to change the .featherlight background color to match that of the source element's background color.
As you can seen in this jsfiddle, if I click on an image, .featherlight's background color matches that of the anchor that opened it. I would like the background color to change as I cycle through the gallery, so that .featherlight matches the anchor thumbnail's background color. Is there a way to get that information?
Thanks,
Scott
UPDATE: For anyone seeking the solution, I edited the jsfiddle above so that the color change now works. Thanks to Marc-André.
Yes, I believe what you are looking for is $currentTarget.
Example of usage in this wiki page
I have a toolbarbutton of type menu-button which is working perfectly in my Firefox extension, however it's not styled quiet as I'd like.
There is a gap with an outline between the buttpon image and the dropdown marker arrow (the red arrow shows the outlined gap I'm referring to - the outline is part of the problem - and you can also see the AdBlock Plus button which does not have this problem).
Also, when you hover over the image/button a shaded grey background appears.
I'd like to remove the gap (AdBlock Plus manages this with their toolbar button but I haven't figured out how) and also remove the shading (I hava hover image defined for the button which should be sufficient to indicate that you are in the click-zone).
Can anyone give me any pointers? It seems to be something to do with the following two classes: toolbarbutton-1 and chromeclass-toolbar-additional
Thanks,
FM
The gap is because the type is "menu-button", and ADP button type is "menu". The gap style is depend on the theme you are using.
The image problem, how do you setup the image? In my case, it work fine to setup with
button.style.listStyleImage = 'url("chrome://referrercontrol/skin/icon24.png");'
This is a CSS-Question.
In this fiddle you can see a button.
It has got two span-elements inside. One with float:left; the other with float:right;.
The style is a normal button-style.
When clicking that button on the iPhone or hover it in a Browser the style gets lost.
This is because I changed the background-color.
Is there a way to change the background-color without losing the whole button-style?
EDIT:
Here are the two images: The first button is a normal button-element. The second button is a button where I changed the background-color ... this is what it looks like when I'm hovering over a button.
I think I understand what you mean. It looks like the rounded corner is gone when hovering, while a border is added. I'm afraid there's not a easy way to get what exactly you want, as the behavior & appearance of Button is controled by system.
Maybe you can try to replace it with a div, which you have full control of the style (chaning the style via JS when hovering).
All's working fine for me. However floating-right elements should always be placed before floating-left elements. Don't know if it will change anything.