i have a column with mgt-person component on hover i am able to view the person card in the fluent ui detailslist the problem is that the person card is visible only half,
how do we pop it out ?
when i inspect in browser and added css
ex margin-Bottom:100% for the class person-details-container
poped out personcard
it popout like this, but when i add css in the files like this margin-bottom is not working but background color is working
mgt-person {
--person-card-background-color: pink;
--person-card-margin-bottom:100%; --- this doesnt work
}
Related
I am trying to use progress bar but it's not getting displayed , but when i inspect i see the tags present. Following is what i have done till now. attaching the screenshot for your reference. Also i need details like i am using angular material to render all the components like table , checkbox but it still shows in old style.
my app.component.html :
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
checkbox :
I'm building landing pages with the amazing Gatsby framework (version 2.16.1).
Everything would have worked perfectly, except that I can't find a way to make changes to the HTML that's being loaded before any script is loaded (the 'over-the-fold' initial HTML).
For example, if I change the HTML's background color in Gatsby - Users can wait up to 5 seconds since the 'over-the-fold' initial HTML is displayed, until the background color is applied.
I know about gatsby-browser.js and the ability to make global CSS files, but that's no use for me as I use a different color or background-picture for each landing page.
My question is: Can I affect the first loaded HTML (differently for each Gatsby page) in Gatsby or React?
Illustration: I color the background color as yellow, but the flow is like this -
HTML is first displayed (background=while) -->
3-5 seconds later -->
all scripts are loaded, and background changes to yellow
#ksav answered the question in a comment to the question! Thank you!
The answer is using a function called onRenderBody under the gatsby-ssr.js file, as explained in the article that was mentioned: https://www.gatsbyjs.org/docs/custom-html/
exports.onRenderBody = ({setBodyAttributes,pathname,}) => {
// Differentiate between the landing pages here
switch(pathname) {
case 'landing_page_a':
case 'landing_page_b':
}
// Affect the HTML that gets loaded before React here
setBodyAttributes({
style: {
backgroundColor: 'red',
},
});
}
The funny thing is, that I've already bumped into this article before, but didn't think it was relevant because it talked about server-side-rendering, and I know that Gatsby is server-less. After #ksav 's comment, I re-read it, and understood that the server-side-rendering happens during Gatsby's build process, and not during run-time (i.e. when the user enters the landing pages).
Can I affect the first loaded HTML (differently for each Gatsby page) in Gatsby or React?
Yes, you can directly in the JSX React code. Google has documentation how you can optimize CSS delivery so your above-the-fold content is always styled correctly. It comes down to using inline CSS for all your components above the fold. With inline CSS your HTML elements are always styled when they are loaded because the styling is part of the HTML code.
See the React documentation for how to handle inline styles in React.
An example from the Gatsby tutorial:
src/pages/index.js
import React from "react"
export default () => (
{/* inline CSS */}
<div style={{ margin: `3rem auto`, maxWidth: 600 }}>
<h1>Hi! I'm building a fake Gatsby site as part of a tutorial!</h1>
</div>
)
Starting out with AEM by using CRXDE, and making a structure component for a header hero component that will show a title and subtitle.
I wanted to add a cq:dialog by just copying the libs/wcm/foundation/components/title/cq:dialog component, and pasting it inside the hero component. There are two values: jcr:title and jcr:subtitle. When it comes to those values, they do display if I manually add them to my page from the contents directory.
The problem that I am facing is that the dialog is not showing at all when I hover over the hero area of the website from the editor.html view.
Is there something I am doing wrong?
Do not use jcr:subtitle. This property name appears to be outdated/invalid and will most likely throw an exception related to the node type definition. Simply use subtitle and you should be fine.
I have created a component for filter in angular 2 which I have added inside my table header. I want to display when mouse is on span and when out i want to hide
<th>
<span class="headColor" >{{componentContents.dlHead}}</span>
<app-data-filter [dataObject]="responseData" [filterBy]="'storeCatelogue'"
(filteredArray)="filterByArray($event,'storeCatelogue')"></app-data-filter>
</th>
<th >
<span class="headColor">{{componentContents.titleHead}}</span>
<app-data-filter [dataObject]="responseData" [filterBy]="'title'"
(filteredArray)="filterByArray($event,'title')" ></app-data-filter>
</th>
But i want to display this filter component on mouse over and hide on mouse out and this should not display all the app-data-filter component i want to display it for that particular header. filter is different for each header so i should display one at a time. I don't have any idea about host listener that how can i use that here as i'm still learning angular 2 so it would be really helpful if i get some guidance or is there any other way
You can use the css :hover selector..
Since you didn't specify the exact structure of your html its hard for me to say how exactly you should implement it.
Lets say for this matter that you want to show the on table mouse hover, and you table class is 'my-table'.
.my-table:hover{
th{
display:none;
}
}
You can read about the :hover selector here.
Edit:
If your html strauctre is something like:
<span class='my-toggle-span'>Toggle app filter!</span>
<app-filter class='my-app-filter'></app-filter>
Then your css will be
.my-toggle-span:hover +.my-app-filter{
display:none;
}
The plus selector Selects all element that are placed immediately after it.
Edit 2:
As opener requested, A javascript based solution:
I don't recommend this approach and any way, Your toggle logic should be handled in your component and not in your html.
<span class='my-toggle-span' (mouseenter)="toggle=true;"
(mouseleave)="toggle=false;">Toggle app filter!</span>
<app-filter *ngIf="toggle" class='my-app-filter'></app-filter>
I'm inexperienced at coding and trying to build a pretty simple site with some HTML and CSS in Dreamweaver. I'd like my navigation menu to highlight the current page a viewer is looking at, and I've found different ways to do this. However, to make life easier as the site evolves, I've made the navigation menu an uneditable region of a template. I'm therefore finding myself unable to make the coding changes (e.g., giving a unique class to each link or a unique body id to each page) to each page that would seemingly allow me to highlight the current page link. Thanks!
A simple way to do this is with Dreamweaver template attributes which allow you to have editable tag attributes:
https://helpx.adobe.com/dreamweaver/using/defining-editable-tag-attributes-templates.html
While editing your template, if you put your cursor on the nav item class, you could then go to Modify > Templates > Make Attribute Editable.
Then, when editing the page based on the template, you'll be able to add an active class.
You could use jQuery for this to detect a word in url:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function($) {
if(window.location.href.indexOf("contact") >= 0){
$(".contactLink").addClass("active");
}
});
</script>
<style>
.active { color: black; font-weight: bold }
</style>
contact
This could add a class to the menu item that has the word "contactLink" as a class. So long as you have this js on all pages (put it in a file rather than hard coded on all pages) it will work. If you copy the above code into a page called test.html the link is normal. change the name to contact.html and it goes black..
Give each menu item a class, and then duplicate the code above for however many items you have.
There are more dynamic ways of doing it, but if you don't have millions of pages, is a nice easy way.