I am trying to make a popover, but for icon. The current implementation is with button.
Also, I am trying to make it popover to the right, not the bottom.
Stackblitz
Here is the icon:
<i (click)="infoButton()" class="icon-info"></i>
You can't with this library.
But you can try to add:
[mdePopoverOffsetX]="100" [mdePopoverArrowOffsetX]="0"
But I don't know if there is a good solution with this library
If you are using Angular Material, Check this example to transform your button in icon with mat-icon-button
Related
I have a p-multiselect component from primeNg inside a div,at first the menu, when expanded, was being cut by the accordion. We solved the problem using appendTo="body" in the element. Now the values are shown correctly, the problem is that when i open the console or when i use a mobile device to open the web app the menu from the component moves to the right/left, but if i remove the appendTo this problem disappear. We tryed with z-index properties as alternative to appendTo but didn't work. How can i solve this?
We are using Angular 8.
EDIT: the first image is when the console is close, the second one is when the console is open (if you read above i wrote the exact opposite case, this is because at first we tried to solve this aligning the left margin, in these picture we are not aligning the margin).
Below i added the html code we used.
Try this one, I'm also facing this issue on p-dropdown via Angular10;
When you inspect to html. left position of the panel is a bit shift that cause by resizing of the screen.
The solution
style.scss - is one this a must, or you need ::ng-deep if you paste this class on other .scss file
.force-left {
left: 0 !important;
}
.component.ts
<p-multiselect
...
panelStyleClass="force-left"
...
></p-dropdown>
We found the solution 1 week later i posted this question. We solved this problem defining an attribute inside a div (the outermost) and, in the multiselect, we used appendTo with the attribute we defined in the outer div. This solved the problem.
I am building a Wordpress site for my nonprofit using the theme Avada and trying to implement some basic custom code.
I am using a "Modal Text / HTML Link" with an image to link to a modal (a pop-up: https://avada.theme-fusion.com/design-elements/modal-element/ and documentation: https://theme-fusion.com/documentation/avada/elements/modal-element/). To help make it clear to users that they can click the image to produce the modal, I want the opacity to change to 70% on hover over just that image.
I currently have the below in the "text/HTML" field, but it’s causing the hover opacity effect for all images on the page rather than just this one image. How can I amend this code to only cause the effect for the linked image? I know so little about coding but feel like it probably has something to do with divs??? I also get the sense I'm accidentlly mixing css and html.....I think I need the html for this field OR I can have just the image source code in the html, and then implement css.
{<img src="https://staging2.pvdwaterways.org/wp-content/uploads/2021/07/Lilly-Manycolors.png" />
}
img:hover {
opacity: 0.7;
}
Here's a screenshot of the interface with the code entered
Thank you!
As #daniel Theman told already in the comment, you can set a class to your element in element edit on the first page at the bottom and then you add the code to custom css tab in avada theme options. Give your element a unique name as class like hoverop and add this to you custom css tab in theme options:
.hoverop:hover{
opacity:0.7;
}
I'm having some issues using the Material UI Drawer component. When I try to display it in my webpage it tries to force the focus to the inner div and adds a shadow or border to the component if you're focused anywhere else.
Does anyone know what's causing this shadow to appear and how to disable it? Example screenshot below - you'll see a blue edge at the bottom (this is the same all the way round if I resize the element)
As soon as you click on content inside the Drawer e.g. a List element the shadow goes away. I assume it must be something to do with the component being modal?
<Drawer PaperProps={{ className: classes.floatingMenu }} anchor='top' open onClose={() => {}}>
<div className={classes.dummy}>
</div>
</Drawer>
Note: The floatingMenu class only adds a margin at the top of 55px (i.e. the height of the AppBar - nothing else).
This is somewhat tricky, but possible with just some props and styling. The element that is shading the rest of the UI is the Backdrop component of the Modal component. Drawer uses Modal when it's in temporary mode. The hideBackdrop prop of the Modal controls whether the shade is seen or not, and you can pass this prop to the Drawer directly as well.
However, the Modal component itself would still cover the whole viewport, preventing you from clicking other areas of the UI, before the Drawer is closed. I'm not sure if there's a simpler way, but at least you can do it by just using CSS styling to make the Modal element "through-clickable" by setting its pointer-events to none. To restore the "clickability" of the drawer itself, you should then set its pointer-events back to all.
So, for instance, just using the style prop to make simple inline styling:
<Drawer hideBackdrop style={{ pointerEvents: 'none' }}>
<div style={{ pointerEvents: 'all' }}>
I'm a sidebar!
</div>
</Drawer>
A working example
If you twiddle with Material UI's styling solution, you could also pass the pointer-events style rule to the Drawer's own Paper through the classes prop.
I was able to fix the issue in a little more simplistic manner after reading the doc's a bit more. On the Modal page it states:
Notice that you can disable the outline (often blue or gold) with the
outline: 0 CSS property.
Based on this I didn't touch the component or inner components from my question but instead I simply added one extra CSS class outline: 0 to floatingMenu (which is already passed to the PaperProps):
floatingMenu: {
marginTop: '55px',
outline: 0
}
This resolved the problem and I no longer see the blue shadow border.
So I'm having a really hard time figuring out why I can't collapse my accordion tabs using the Foundation 6.3 responsive tabs (https://foundation.zurb.com/sites/docs/responsive-accordion-tabs.html). I am trying to use their javascript reference to implment: (https://foundation.zurb.com/sites/docs/accordion.html#up).
This only seams to work for the accordion but not responsive accordions tabs.
Code Pen to demonstrate:https://codepen.io/jinch/pen/RQxQNG
//This code only collapses the "Reugular Accordion" and NOT a responsive Accordion?
$('#regulare-accordion').foundation('up', $('#regulare-accordion .accordion-content'));
//This code does not working for the the "Responsive Accordion Tab"?
$('#responsive-tab-accordion').foundation('up', $('#responsive-tab-accordion .accordion-content'));
Does anyone know of a reason or solution if using the responsive tabs? I need to close all on small screens if possible.
So far the responsive tab accordion component does not implement the methods of the used plugins.
You can either collapse them with CSS or clonse the methods of the accordion plugin and execute their code.
See https://github.com/zurb/foundation-sites/pull/10961 which is not yet implemented.
Im using a bootstrap button:
<button type="button" class="btn btn-info navbar-btn navbar-right" id="logg">Sign in</button>
I cant change the color of the button by using background-color in css, the color remains the same.
However, Im able to change the border-color. Why am I not able to change the background color of the button?
I even had some problems with coloring a bootstrap navbar. I couldnt use border-color so I used background-image: linear-gradient(to bottom,someColorHere 0,anotherColorHere 100%);
Is there any other way to change the background color of bootstrap components?
I am currently working on a maven/web application with JSF framework on Netbeans.
As we had discussion, it seems that your optional CSS file is overriding the styles of the current Bootstrap CSS which is not letting you to place the button design.
Please put the optional CSS link before the Bootstarp CSS link in your web page. This will work in your case.