I have managed to embed a PowerBi Dashboard into a webpage.
Unfortunately, it looks hideous. For example, the padding is ridiculous; The title is stuck in the top-left corner, which I'd like to remove; all the content is loaded into an iFrame, which if I do not set the height and width, makes the dashboard near-invisible and non-responsive (in terms of window scaling); nothing is centred...
I have tried overriding the CSS. For example, I tried to set the display: none !important; property on the header (to remove the title), but it has no effect. I also tried changing the background color of the iFrame from grey to match the color of the webpage, but that too did not work.
Does anyone know how I can style my PowerBI dashboard and embed it without an iFrame (is this even possible?)?
As far as I know, at the moment, it's not possible to embed anything from PowerBI to a web page without an IFrame.
Do you really need a dashboard, maybe a report would do it? At least you'd be able to place the components as you like.
I had the same issue. I managed to use CSS to re-style the iFrame for both reports and dashboards.
I'm using an angular project and added the CSS to my component that is displaying the Iframe.
border-width: 0; //Removes Iframe horrible border
I also adjust the height, width and position.
If you struggle to find what element to change the CSS, use the inspect element in Chrome and test by changing some CSS on each element.
I was able to hide and change the position of the title when I found what div it was in with:
visibility: hidden; //true to show
text-align: centre; //left or right
Related
On this site, https://kkmpr.com/, there is a section that says "Shop" and below it there is a Slider built using slick slider. I know how to change the dot and arrow colors (on the :before), but even in my inspector, I can't get the colors to change. At first, I thought maybe they were being positioned underneath the slider images, but I don't think that is the case either. I can't figure out what is going on. If I disable the slick-theme.scss style sheet, I can see the unstyled "Next" and "Previous" buttons with the numbers for the dots below.
It looks like there is overflow: hidden applied to .slider, and the arrows are absolutely positioned outside of that element.
Adding the following CSS reveals the arrows in the Shop section:
#slider-container .slider {
overflow: initial;
}
Enabling the arrows and dots are properties of the object.
They probably have them disabled in the properties of the actual js object.
Ive been on multiple website where onload where the website is zoomed out to keep resolution and therefore stopping overlaps on the mobile page.
Im not sure i am explaing my question correctly. As i am a new member, i will add links to the differences.
I have tried some css3 media queries and some meta tags i have found online but nothing is working for me at the moment.
Here is the link to my site:
http://conorpendlebury.com/
As you can see from the image below there is overlapping with the navigation bar which pushes the content too far giving a squished appearance.
http://conorpendlebury.com/Images/Screenshot.png
Are you trying to make your #Sidebar to overlap your #MainContent and #Footer when activated while #Bio wont squish?
If so, make your #MainContent and #Footer with position: relative and z-index: -1 and remove whatever is making their marginLeft equals to document.getElementById('Sidebar').style.width while activated.
If you intended to make it squished, you need a function to recalculate and reapply css to #MainContent and #Footer.
To build a offcanvas navigation you set the page to translateX the size of the navigation. So the container keeps the width.
Here is a example.
It's possible to code this without JavaScript.
I've looked all over google and to be honest there aren't that many articles to answer a question as specific as this one , and i've tried going through the interface.
So when you make a new page , you have a body , and by default , that body has some margin's between it and the browser window , now i've managed to take care of the top and bottom one so there's no padding on the browser window ( a.k.a. margin's on the body ) but there's still space between the browser and the body on the left and the right side.
So how can i make my body's width be 100% of the browser's window because there's no width setting for the body , but only the page ( the browser window area).
body {
margin: 0;
padding: 0;
}
Okay here is the best I can do...
Aside from going to Page > Page properties > metadata and adding your own css file. what you can do is go to the rectangle tool and expand it to whatever height you want, however you MUST make sure that you expand the width to the edges of the web canvas past the body border until the tooltip displays 100%. afterwards embed whatever you want in there. but bewarned, the more complex the object the more custom coding you need to add.
Hope this helps
There is a way to make an object 100% the width of a browser. It's not so obvious and it's hidden:
Draw a rectangular box and fill the box with photo (scale to fit), set color to none.
Resize the rectangular box to the same width of the canvas (page size).
The combination of the procedures above activates 100% width on the object.
Be sure you are using "browser fill" and not just "fill".
The fill one will fill in a box in the center....
Browser fill will literally fill the whole page. Got stuck on this for ages!
There is a simple one-click solution for 100% width, which I just came across in this awesome article after having trouble getting my footer to go all the way across on wide screen laptops...
In your top toolbar between the X/Y and W/H inuts, there is a little box with an arrow that points either way. Hover over it and you will see that it says '100%'.
click it and you're done!!!
:-)
http://www.designeasy.co/2014/07/5-very-cool-tips-for-adobe-muse-cc-2014.html
insert the following code into your header tags as follows (Where theme.css is the name of your css.)Now, go to you css and enter the css given to you by user255
Open your page in adobe muse Go to "Page properties" select "Metadata" From Page properties and add the following code to HTML for <head> area:
<style>
body {
overflow-x:hidden;
}
</style>
http://bit.ly/YqiQNQ
I have this food menu that looks great online. The menu is generated by a Wordpress plugin with customizable CSS. The rest of the site looks mint on the iPhone, but when you get to the menu it overlaps awfully and kind of disappears.
Open the link in the menu and make your window size really small - see how it overlaps at the smallest setting?
I was playing with #media on the widths and couldn't figure it out.
Can anyone help me make the text wrap around at the websites smallest width?
Or a plugin that will detect if the user is on mobile and display a different page entirely (just that page).
If you're having an issue with text not wrapping how you'd like it to wrap I'd suggest adding white-space: normal to the text's parent element to ensure that the text will wrap and not inherit a white-space: nowrap declaration intended for another element.
For your specific circumstance, the following CSS will force the menu to wrap appropriately:
.rmc-menu-wrap {
white-space:normal;
}
I have an editable iframe and I want to insert two DIVs at the [b]top [/b]and [b]bottom [/b]part(as header/footer) of iframe body respectively. Now, the question is : how to insert a div [b]at the top of iframe body[/b] and fix it there? (Will insertFirst() work?)
Also, how to fix the footer div always [b]at the bottom of the iframe body[/b]? I tried make its position absolute and gave a margin top/bottom, but the problem comes when the body height of the iframe increases and footer DIV position does not change.
I want the same thing google docs does, i.e. fixing separate part for header/footer (though google docs page is not an iframe).
Any work around?
I assume by "fixed" you don't mean position: fixed but "not editable"?
I don't know of a native way to do that, the only thing I do know is CKEditor's protectedSource configuration setting. It allows to specify regular expressions; content matching those expressions cannot be removed by the user.
If you mean "fixed" as in "position", the position: fixed CSS property should work for you (Doesn't work in IE6 though).