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.
Related
I have a text on which when you hover (or when you click on it on mobile), a picture appear. I used this stackoverflow answer to make it work.
I'm now trying to make the picture change size automatically, so the picture fit both on mobile and computer.
a.hovertext1:after {
content: 'Text that appears before I hover.';
}
a.hovertext1:hover:after,
a.hovertext1:focus:after {
content: url(https://cdn.discordapp.com/attachments/1074330512925143102/1076897722075971675/5226579-le-drapeau-national-de-la-republique-federative-du-bresil-fond-d-ecran-du-drapeau-bresilien-avec-des-styles-de-degrade-d-ombre-gratuit-vectoriel.jpg);
display: block;
}
<a name="return1" id="return1"></a>
I know I need to add width:100%; somewhere in my code, but I have no idea where. I tried putting it in the a.hovertext1:focus:after{...} block, but it didn't do anything.
Hope someone can help me!
Is there any reason for which you want to use pseudo elements ? There is a different approach using simple display property on hover.
img {
display: none;
width: 100%;
}
a:hover + img {
display: block;
}
a:hover {
display: none;
}
Text that appears before I hover
<img class="img" src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" />
Also I suggest to use buttons instead of links. Buttons are used for actions that affect the website’s front-end; links are used for navigation and actions that don’t affect the website.
I have a p-dialog that shows up when the application loads up in app.component.html file as follows.
<div class="banner">
<p-dialog [(visible)]="displayBanner" [modal]="true" [style]="{width: '70vw'}" [baseZIndex]="10000" [showHeader]="false"
[draggable]="false" [resizable]="false">
<banner (notify)="onNotify($event)"></banner>
</p-dialog>
</div>
This displays the application banner. I had to override the background color to black when this dialog shows up. So added css as below.
.p-dialog-mask.p-component-overlay {
background-color: #000;
}
Once the dialog is closed i get the normal primeng display for each page. Within the page there are couple of delete functionalites which has the confirmation code in the corresponding html as below.
<p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle"></p-confirmDialog>
this confirmation uses the same css .p-dialog-mask.p-component-overlay , so this in turn turns the background to black. So i tried to remove the css with background color as black by using styleClass : background-color: #000; in p-dialog for banner page as below:
<div class="banner">
<p-dialog [(visible)]="displayBanner" [modal]="true" [style]="{width: '70vw'}" styleClass="bgColorChange" [baseZIndex]="10000" [showHeader]="false"
[draggable]="false" [resizable]="false">
<banner (notify)="onNotify($event)"></banner>
</p-dialog>
</div>
and in css as follows:
.bgColorChange {
background-color: #000;
}
But this is not overwriting the css and it appears normal background. How can i apply 2 different styles for p-dialog? Since the balck background is only in the application banner which shows up on application load i thought i would apply to the p-dialog tag but it doesnt take effect. Any inputs highly appreciated.
Try
p-dialog ::ng-deep .bgColorChange {
background-color: #000;
}
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.
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.
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;
}