Hovering via CSS in Chrome + GWT - css

I have a weird Chrome problem. I'm using the following code and style to show <div class="hoverslave"> on hovering:
<div class="hoverhome">
<div class="...">...</div>
<div class="hoverslave">...</div>
</div>
.
.hoverhome:hover .hoverslave {
display: inline;
}
.hoverhome .hoverslave {
display: none;
}
.editelement {
/*display: inline-block;*/
margin-left: 10px;
}
It works only in this configuration. If I comment out or even delete the .editelement block (a class "editelement" doesn't even exist in the DOM...) .hoverslave will be shown all the time:
/*.editelement {
*display: inline-block;*
margin-left: 10px;
}*/
Same if I try to add the margin-left: 10px; anywhere else (div, .hoverslave, ...). How can I get a margin of 10 px on the left side of .hoverslave?
Everything also works as expected when I run the application locally, but not when it's deployed on Google App Engine. The W3C CSS Validator doesn't show any errors.

Simply add the margin to the CSS declaration which shows .hoverslave.
Example here.

Okay, I found the bug: I was using GWT's SafeHtmlBuilder in the wrong way. The opening and closing tags were not inside one SafeHtml object.
Wrong:
sb.appendHtmlConstant("<div class=\"hoverhome\">");
sb.appendHtmlConstant("...");
sb.appendHtmlConstant("</div>");
The correct way is explained on the GWT website. My solution now uses Templates:
sb.append(TEMPLATE.hoverhome(title, actions));
I also made the mistake to load the CSS file via a tag in the host HTML page. This method is now deprecated. Using inline elements everything is working. More details on the GWT page.

Related

_ngcontent-c0 being added to a css rule automatically

I was following a drag and drop example in (you can find it here: https://stackblitz.com/edit/draggable-part-6)
After implementing the code I tried to move the "box" into a component.
<div class="box" appDroppable >
MyBox
<div class="box box-helper" *appDraggableHelper>MyBox</div>
</div>
And I noticed it doesn't render correctly. Looking at the chrome dev console I notices that when the element renders outside the box it has the following rule:
When inside the component, it renders the following way:
summary, the "_ngcontent-c0" attribute in not in the html and consequently the rule doesn't apply anymore.
the scss is defined the following way and does not contain any _ngcontent-c0
.box {
background: #BADA55;
border: 1px solid black;
padding: 10px 20px;
display: inline-block;
&.dragging {
background: coral;
}
}
the question is, why is the _ngcontent-c0 being added to the rule dynamically?
That's because Angular hides these classes and limits them to just the component these classes are written for. It's called ViewEcapsulation in Angular.
From Angular's Documentation:
An encapsulation policy for the template and CSS styles. One of:
ViewEncapsulation.Native: Use shadow roots. This works only if
natively available on the platform.
ViewEncapsulation.Emulated: Use
shimmed CSS that emulates the native behavior.
ViewEncapsulation.None: Use global CSS without any encapsulation.
By default, a class that you've defined in the .css file for a component will only be available for use in that component. If you want to use it in some other component, it won't be available. Angular automatically adds these texts to the classes so that they are not accessible outside the component.
thoughtram.io has an amazingly enlightening article on this which you can read here to understand this better.

Primefaces DataTable selectCheckboxMenu filter formatting issue

I copied the Primeface showcase for filters located here to my Local JBoss install:
http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml
But my selectCheckboxMenu for colors ends up looking like this
I'm using Primefaces 5.0.
How can I get it to look like the demo on PF Showcase site?
EDIT
Changed to PF 5.1.RC1 but still no luck
Also tried increasing the width used by the demo for the p:selectCheckboxMenu but with this result
The problem was having the following entry in my custom CSS file which conflicted with the Primefaces.css
label {
float: left;
text-align: left;
margin-right: 0.5em;
display: block
}

CSS/Wordpress: can't change menu font size

I have a Wordpress website and am trying to change the font size of the main menu. From Chrome, When I do an "inspect element" on the page I can see that the menu element is laid out thusly:
.blog-menu a {
font-size: 13px;
}
When I change the font-size to another value from within inspect element, the change is properly displayed on the page. However when I add the code:
.blog-menu a {
font-size: 25px;
}
to my style.css file, the change is not registered. Any thoughts as to what I'm doing wrong? Probably something stupid.
This can often be caused by styles being applied from your cache. To clear your cache and reload the page, pressing CMD/CTRL+Shift+R (Mac OSX and Windows, respectively).
If the new style is still not being applied, it's possible that another style is overriding it. This can be caused by a style being applied after your code, or before your code with the !important tag.
Some questions that may help you figure this out:
What does your environment look like? Is your style.css in a child theme's folder? Is another stylesheet being called after your style.css?
Updated as per comment conversation:
<style type="text/css">
.blog-menu a
{
font-size: 25px !important;
}
</style>
<div class="blog-menu">
<a>This should be 25px</a>
</div>

Customizing WP theme - how to change link for nav button in CSS?

I've been customizing a one-page-design wordpress template (see http://ggc.inductiveplay.com) - it pulls up a floating button on the home page that :should: scroll down to the next section (#menu), but for some reason it keeps pointing to the 3rd section (#location).
I'd like to just override the link in CSS where I'm customizing the button size/appearance and assume I just have bad syntax here:
.a-btn {
padding: 2px 12px !important;
margin-bottom: 5px !important;
opacity: .8;
z-index: 1;
href="#menu";
}
If there's a quick fix for this I'd love to know, otherwise I'd love any insights on where the link is being set/computed on the site.
You can add things before and after a HTML element in css. But you can't change a link using CSS.
The below is bad CSS syntax:
href="#menu";
To add things before something in CSS you can have a HTML element like:
<div class="sample-text"></div>
Then using the following CSS:
.sample-text:before {
content:"blah blah";
}
Instead of "blah blah" you can have something else.
You can't use HTML in the CSS so you can't do what you want, but this is the closest you can get to it.
However you can change links using javascript.
Also you can only use z-index if you specify a position:relative, position:absolute or position:fixed.

CSS background image for asp button control

I've been stuck on this for 3 days now.
I have two pages that basically share some code for a search feature on my website, here's my code
The CSS
#btnSearch {
display: block;
color: #ffffff;
width: 100px;
height: 27px;
border: 0;
padding: 0;
background: transparent url("Images/btnSearch2.png");
}
When I'd gotten the one page working, I copied that code to the page where it doesn't work, but it hasn't made any difference, here's the HTML (don't worry about the inline css, that's just for convenience while I'm working on it...)
EDIT1:
All other classes work correctly as they (along with the css above) come from a stylesheet at <webroot>/App_Themes/Default... The images go in a subdirectory of this location.
I don't see why this code works on 1 page and not the other when all the other CSS classes work on both pages...
Have you tried the absolute image path and see if it works that way?
Maybe it´s a Browser problem: Try to open the file that doesn´t work in another browser.
Maybe you have a tag named the same way #btnSearch in the pages where the styles don´t apply.
Is the path to the background image correct for the page where the code doesn't work? Or even the path to the CSS file?

Resources