I'm trying to add a banner to my React App for the profile page, using MUI since there is no specific "Banner" Component, what would be the most appropriate component to use for a banner in Material UI?
The Youtube Account page banner is kind of what I want, I would like the banner to be mobile-friendly.
<div className="Profile">
//banner here
<Stack alignItems="center" pt={8}>
<Avatar
sx={{
width: 200,
height: 200,
}}
src={dummyurl}
></Avatar>
<username>Test Name</username>
</Stack>
</div>
The Following tags could be used :
Img tag (Vanilla HTML)
Paper
Avatar
Thanks
Related
I am using Next JS and Material UI together in my project. for Image optimization, I would like to use the Next JS Image component.
currently, my card media looks like below. I am getting the image URL row.image.url from an API call and assigning it to the image prop of the CardMedia component
<CardMedia
className={classes.cardMedia}
image={row.image.url}/>
But I would like to take the advantage of the Next JS Image component for the optimization and lazy loading but couldn't able to see a way to fit this.
import Image from 'next/image'
Did anyone face this type of requirement?
Appreciate your help
Thanks
Venk
You can do it like this:
<CardMedia className={classes.cardMedia} title="Your title">
<div style={{ position: 'relative', width: '100%', height: '100%' }}>
<Image src={row.image.url} layout="fill" objectFit="cover" />
</div>
</CardMedia>
Check this answer for more info
I am building an Android app with Ionic, it is a forex signal app, in one of the pages, I placed a widget I got from investing.com, the widget is supposed to give me live chart that updates every minute and its being loaded in an iframe, now my problem is that, the live chart is displaying but its but updating, like the chart is not changing, it's just static.
Here is my code
<ion-content>
<iframe frameborder="0" style="overflow:hidden; display:block; position: absolute; height: 100%; width: 100%" src="https://sslcharts.forexprostools.com/index.php?force_lang=1&pair_ID=1×cale=300&candles=50&style=candles"></iframe>
</ion-content>
But if I should load the page in a normal html page, the chart won't be static. How can I solve this problem?
The question has been asked prior but no clear response was obtained
I an using Facebook's plugin which lets one embed and promote any public Facebook Page on a website
I am trying to hide not remove the scroll bar from the side
I still want scroll functionality but I do not want the scrollbar to be visible
What is the best method to achieve this functionality
https://jsfiddle.net/wesuf2tq/1/
<md-card style="width:auto">
<md-card-header style="background-color: dodgerblue; font-size:15px;font-weight:600; color: white; ">
<i class="fa fa-facebook-square" aria-hidden="true" style="font-size:40px; margin:0 auto"></i>
</md-card-header>
<div class="facebookContainer" >
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FKobe%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
height="800" style="width:100%;border:none;overflow:hidden;"
scrolling="no" frameborder="0" allowTransparency="true"
allow="encrypted-media"></iframe>
</div>
</md-card>
There is absolutely no way to achieve this at all - the plugin loads its content into the iframe from a different origin, so the Same Origin Policy prevents you from accessing anything inside it via JavaScript, or to inject any custom styling.
You are limited to the configuration options Facebook offers here - and hiding the scrollbar is not one of them.
The likebox I created for nbglive.com is not resizable, no matter what method I use, and as such, it is causing great trouble as to how I can integrate it with our site without having it overlap the radio player.
Is it possible to get the like box to resize when the page is resized? I'm using twitter-bootstrap.
I am putting FB widgets (likebox and comments) into the Bootstrap's grid like this:
<div class="span4">
<div style="text-align: center;">
<div class="fb-like-box" data-href="{url}" data-width="234" data-show-faces="true" data-stream="false" data-border-color="#007Db7" data-header="false"></div>
</div>
</div>
where url is the variable containing web URL of the FB page.
with CSS:
div.fb-like-box,
div.fb-like-box > span,
div.fb-like-box > span > iframe[style],
div.fb-comments,
div.fb-comments > span,
div.fb-comments > span > iframe[style] {
width: 100% !important;
}
Facebook loads its component asynchronously with styles set according to the width data attribute. I set it to some safe value: looks bad but does not overflow to other elements for different view-ports. My CSS overrides all the FB's width settings that are necessary to resize the widgets (I set 100%, so it adjusts to the containing div). It is not documented and possibly it will stop to work when FB changes their designs, so choose your default width (234px for me) wisely ;)
Example with LikeBox of at the bottom of the right-hand side panel and in the sidebar. Note the responsive behavior when you change the size of the browsers window.
Here is an easy way:
$(".fb-like-box").attr("data-width", $(document).width());
Do your cording according to your CSS as below
<div class="comment-box">
<div class="fb-comments" data-href="site_url" data-width="100%" data-numposts="5" data-colorscheme="light" data-mobile="auto-detected"></div>
</div><!--comment-box-->
cut and copy java-script as fb gives in headder
I am trying to input a form into my html and when I view the page, I don't see the entire form, just the start of the form. The code is below of my html and form script.
<section id="content">
<div class="container_12">
<article class="a3">
<h4>Careers</h4>
<p class="p2">
<a name="form1160016477" id="formAnchor1160016477"></a>
<script type="text/javascript" src="http://fs23.formsite.com/include/form/embedManager.js?1160016477"></script>
<script type="text/javascript">
EmbedManager.embed({
key: "http://fs23.formsite.com/res/showFormEmbed?EParam=m%2FOmK8apOTB8lIDHQTyQ62rYe2Y6sJfY&1160016477",
width: "100%"
});
</script>
<!-- Notes:
To control the width of the form, change width: "100%" to any number or percentage.
To pre-populate fields in the form or to use a custom resize callback, see http://fs23.formsite.com/documentation/embedded-form.html
-->
Here is the website: http://www.creativemindspcs.org/englishapplication.html
The problem is the iframe height, you need to add height:800px; to the iframe style in the html. At the moment it is set at the default which is too small so the iframe window doesn't show everything.
As the iframe is generated dynamically with the JavaScript it should be possible to pass in a height parameter like you do width, if that is the case then this would fix it:
EmbedManager.embed({
key: "http://fs23.formsite.com/res/showFormEmbed? EParam=m%2FOmK8apOTB8lIDHQTyQ62rYe2Y6sJfY&1160016477",
width: "100%",
height: "800px"
});
If te 800px doesn't fix it you could try 100% for height but generally speaking heights and percents don't mix very well.
i have recently had to implement this and the forms now support resizeCallback, so you can set height via javascript
https://fs8.formsite.com/documentation/embedded-form.html