I'm developing a web application using the Vaadin framework.
I have a Button styled as BaseTheme.BUTTON_LINK and have an icon showing.
The button is assigned a CSS class which has a hover state, when the button is hovered the icon is replaced. Simple enough.
However, I find that once the button is clicked, the hover stops working until you click elsewhere. The button seem to be focused after clicking and then the hover effect doesn't work.
Does anyone know a way to work abound this, either using Vaadin or CSS?
EDIT: HTML and CSS added
HTML:
<div style="height: 26px; width: 292px; overflow: hidden; float: left; padding-left: 6px; padding-top: 0px;">
<div style="float: left; margin-left: 0px;">
<div class="v-button v-button-link link v-button-m2m-refreshbutton m2m-refreshbutton" tabindex="0" role="button">
<span class="v-button-wrap">
<img class="v-icon" alt="" src="/M2M/VAADIN/themes/m2m/../m2m/img/refresh_.png">
<span class="v-button-caption"></span>
</span>
</div>
</div>
</div>
CSS:
.m2m-refreshbutton:hover {
background: url("../m2m/img/refresh_hover.png") no-repeat center;
}
I encountered the same problem when I used Vaadin to create Liferay portlet. I was able to fix it by changing the CSS Vaadin uses (by using the CSS Inject Add-on, but it is also possible to just provide a custom Vaadin theme). The piece of CSS that worked for me is:
.v-button:active .v-button-wrap, .v-button.v-pressed .v-button-wrap, .v-button:focus .v-button-wrap {
background: #d4d4d4 url(/html/themes/classic/images/portlet/header_bg.png) repeat-x 0 0 !important}
In general it is a better idea to do this with background-images in CSS only.
You should also use an <a></a> tag for this because older Internet Explorers for example don't apply link states to HTML elements other than <a></a>.
Basically getting different images for the different states of a link can be done like this:
HTML:
<a class="someClass" href="location"></a>
CSS:
.someClass {
background-image: url(path_from_css_file/link.png);
background-repeat: no-repeat;
background-position: top left;
}
.someClass:hover {
background-image: url(path_from_css_file/link_hover.png);
}
.someClass:focus {
background-image: url(path_from_css_file/link_focus.png);
}
.someClass:active {
background-image: url(path_from_css_file/link_active.png);
}
.someClass:visited {
background-image: url(path_from_css_file/link_visited.png);
}
Using javascript it is possible.
first get the button
buttonElement = document.getElementById("yourID");
Add Event listener to the button and call a function.
ButtonElement.addEventListener('click', nofocus);
create the function
function nofocus () {
this.blur();
}
whenever you click the button. focus state will gone.
Related
I have created a agm-info-window that has an image and a small text (tittle):
<agm-marker [latitude]="lat3" [longitude]="lng3" [iconUrl]="icon">
<agm-info-window [disableAutoPan]="true" [isOpen]="true">
<div routerLink="/sight/2">
<img src="assets/mesta/tvrdjava.jpg" alt="Image" width="80" height="80"> <br>
<span class="window-title"> Bubanj </span>
</div>
</agm-info-window>
</agm-marker>
This is the result:
I want to change the info window css. - The background color, remove the close button (x) and put the text in the center. Like so:
I get the correct effect when I set the CSS in Chrome's inspector. I set:
/* Remove the X, close button */
.gm-ui-hover-effect {
display: none;
}
.gm-style-iw {
padding: 0;
background-color: #AAAAAA;
text-align: center;
color: white;
}
/* remove overflow scroll */
.gm-style-iw-d {
overflow: none;
}
But when I put this same css in the components css, it doesn't change at all, nothing changes.
I don't have a lot of changes, so I would prefer not to use snazzy info window. I just want these small changes to the window. Is it possible ? Why is the css not working ?
Use this CSS in styles.css as component css is having low priorities
Try to add css in he same page under the div. Maybe there are cinflict b/w that's why it doesn't change anything.
In my web page I have a button. When I display the page in Chrome, everything works fine, but when I look at it in IE, the button text doesn't fit in the button (see image). Do you have a hint, what possibly causes this problem and how to fix it? I'm also using bootstrap v4.0.0.
Here is the code:
.button {
background-color: #002c4c;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
align: center;
width: 100%;
}
.row {
margin-right: 0;
}
.row-8 .col-lg-2 {
max-width: 225px;
}
<div class="row row-8">
<div class="col-lg-2">
<form action="/MyProject/print?language=de" method="post" name="printForm" onsubmit="return validateForm()" target="_blank">
<input type="submit" class="button" name="btn_print" value="PDF generieren">
</form>
</div>
</div>
I was not able to reproduce this error with the code snippet thing even when I put my whole web page & css inside it. I guess it has something to do with the bootstrap columns. I use lg-2 here with a max width of 225px.
After I used the work-around (button instead of input) suggested in the answer I get the above. The button in IE is a bit smaller though it doesn't use up the max-width I defined. If anyone issues the same problem and has found a reason for that, I'd be glad to hear about it. For now, I'll live with the work-around.
I'll already had the issue myselfe that a text overflows a button in IE11.
For me it was a rendering bug connected to fonts.
IE11 seems to render the button on pageload, before webfonts are loaded, when the webfont is loaded the button is not redrawed so it does not adapt to the new width.
The only solution I was able to find is forcing the browser to redraw when webfonts are loaded. Therfore I used an JS called "FontFaceObserver" (https://github.com/bramstein/fontfaceobserver)
JS:
new FontFaceObserver('Roboto', {
style: 'normal',
weight: 400,
}).load(function(){
$('body').addClass('state-font-loaded');
}, 10000);
CSS:
.state-font-loaded {
visibility: visible; //forcing browser to redraw
}
An other try would be to change the input into button like
<button type="submit" class="button" name="btn_print">PDF generieren</button> this could solve sizing issues if they are connected to the input element. (Please also inpect this element to see if there is any fixed or precentage width set)
I want to use a standard set of buttons on a website regardless of what is written in them (i.e. submit, pay, go, spell correct) but for some reason I can not get the sprite image to show up. My codes is as follows:
HTML:
<div id="iconic">
Place Sprite button here <span><a class="button" href="#">Test</a></span>
</div>
CSS:
span.iconic a:link
span.iconic a:visited
{
display: block;
background-image:url('images/an_nav_btn.jpg');
width: 150px;
height: 45px;
}
span.iconic a:hover
{
background-position: 0 -50px;
}
span.iconica a:active
{
background-position: 0 -100px;
}
Any suggestions on how to get this to display with the text on top (in this case it will have the button with the word "test" on it.
Thanks in advance.
According to your posted css you are attempting to manipulate a link inside a span with the class of "iconic"... and that doesn't work with what you have in the html:
to get you on the right track, try
replacing all the span.iconic's
with #iconic span's
#iconic span a translates to "all <a>'s inside a <span> inside any element with the id of 'iconic' "
In CSS:
. is used for to prefix class names
# is used to prefix IDs.
Your element is a DIV, and you're specifying a SPAN in your CSS. You've got both of these mixed up.
The CSS declaration for <div id="iconic">
would be:
#iconic {
...
}
You may want to consider looking at Font Awesome, that handles a lot of this for you.
Here is the basic code for the function I want to do:
<style>
.cmaxx_rollover {
height: 279px;
width: 347px;
display: block;
background: url('http://imperialsystems.biz/imp/files/products/prod_cmaxx.png') bottom;
text-indent: -99999px;}
.cmaxx_rollover:hover {
background-position: 0 0;}
</style>
<a class="cmaxx_rollover" href="http://imperialsystems.biz/imp/products/cmaxx-dust-fume-cartridge-collector/"></a>
So now the question, I have a page of about a dozen products that I need this hover to work on. Is there a better way to do it than to create a new class for each product? Or should I just create the CSS and class for each product?
If you only change the shadow behind the grey rectangle, you could set it as background for all the products and insert product images with transparent background as img like this:
<div class="products">
<img src="cmaxx.png" alt="CMAXX">
<img src="productx.png" alt="Product X">
</div>
With simple style:
.products a {
background: url(gray.png) bottom;
width: 279px;
width: 347px;
display: block;
}
.products a:hover, .products a:focus {
background-position: 0 0;
}
And even better you could throw away the image and use CSS gradients and shadows.
If there will be different backgrounds you will have to use separate classes (possibly with partially shared css). You can also make the images to one to save http requests using css sprites technique.
From what it sounds like, you just need to give the same class name to each item and then implement the hover behavior once. That's all it really takes. So give
class="cmaxx_rollover"
to each product and keep your CSS as is and it'll work on all of them.
I have followed instructions verbatim using border:none and background:transparent, but a border still shows in the my text areas. I am using a background image to customize the look, but can not seem to remove the border.
website in question
http://www.officeyoganyc.com/
markup
<div class="fieldHolder">
<div class="attributeinput1"><input type=text name=email value="email" size="16">
<script language="Javascript" type="text/javascript">addFieldToCheck("email","Email");</script></div>
</div>
css
.fieldHolder
{
width: 137x;
height: 24px;
background: url(http://www.officeyoganyc.com/themes/zen/zen/images/textarea.png) no-repeat;
margin-left: 209px;
margin-top: 162px;
}
.attributeinput1
{
border: none;
color: #000000;
background: none repeat scroll 0 0 transparent;
color: #000000;
height: 22px;
margin-left: 5px;
margin-top: 5px;
width: 170px;
}
This selector:
.attributeinput1 {
Only styles the <div>. You want the <input /> inside the <div>:
.attributeinput1 input {
By the way, the input tag is self-closing:
<input ... />
Your site might look funky in IE if you omit the />, as it might be treated as the beginning of a block element.
Also, one more thing (just a nuance in HTML), the language= attribute in the <script> tag is depreciated (i.e. unsupported and old). You can safely omit:
language="Javascript"
in your <script> tags.
If you use Google Chrome or Firefox, there is a really useful tool you can use. In Firefox, it's called Firebug. In Google Chrome, it's called something like Inspector.
They both allow you to "inspect" the webpage's layout and see what CSS properties affect what elements.
Here's what I mean. Look at the right-hand-side:
I used this to confirm that your CSS wasn't being applied properly. To activate it, right click on any part of a webpage and click "Inspect".
Hope this helps!
You have too many attributes for your background and border definitions.
This should work.
.attributeinput1 input {
border:0;
background:none;
}
If not then try
.attributeinput1 input {
border:0!important;
background:none!important;
}