I'm using the Google Pie Chart to visualize some data. My problem is that the size always gets limited to 200px height. I've tried to figure out the different options, but to no avail. Even if my original container (chart_div) is set to a height of 500px, the automatically generated child container is limited to 200px in height:
<div id="chart_div" style="width: 900px; height: 500px; position: relative;">
<div style="position: relative; width: 400px; height: 200px;" dir="ltr">
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
<svg width="400" height="200" style="overflow: hidden;">
...
</div>
<div>
</div>
I've tried adding some options like chartArea:{left:20,top:0,width:"100%",height:"100%"}, but that only pushed the legend out of the div, and didn't effect the sizing of the divs.
Related
Need a solution when child region classic report overflow Parent region horizontal Scroll bar add.
If I understood you correctly, you want to add a horizontal scrollbar into the Classic report region. If that's so, two options I know (adjust values so that they fit your report; these are just examples):
Put this into region header:
<div style="border: 1px solid black; width: 500px; height: 300px; overflow: auto">
Region footer:
</div>
Another option: put this into the HTML header:
<style type="text/css">
<!--
div.scroll
{
height: 300px;
width: 500px;
overflow: auto;
border: 1px solid #666;
background-color: #CCC;
padding: 8px;
}
-->
</style>
Region header:
<div class="scroll">
Region footer:
</div>
So far I have implemented buttons i.e (ion-fab) but the button labels can only be placed on top or bottom of the buttons. I want to place them on the left side of button. Image attached for more clarification.
HTML CODE
<ion-content>
<div id="ListBackdrop" *ngIf="fabButtonOpened==true" ></div>
</ion-content>
<ion-fab right bottom #fab>
<button ion-fab (click)="openFabButton()">
<ion-icon name="add"></ion-icon>
</button>
<ion-fab-list side="top">
<button ion-fab>
<img src="assets/friend_add.png">
</button>
<ion-label class="fablabelfriend">Friend</ion-label>
<button ion-fab>
<img src="assets/family_add.png">
</button>
<ion-label class="fablabelfamily">Family</ion-label>
</ion-fab-list>
</ion-fab>
Css File
.fablabelfamily
{
position: absolute;
width: 100%;
padding-right: 220px;
padding-bottom: 75px;
margin-top: 0px;
margin-bottom: 0px;
font-weight: bold;
}
.fablabelfriend{
position: absolute;
width: 100%;
padding-right: 220px;
padding-bottom: 30px;
margin-top: 10px;
margin-bottom: 0px;
font-weight: bold;
}
#ListBackdrop{
background-color: white !important;
position: fixed !important;
height: 100%;
width: 100%;
z-index: 1;
opacity: 0.8
}
TypeScript File
export class myClass{
fabButtonOpened: Boolean;
constructor(public navCtrl: NavController, private global: globalVariable, private http: Http, public platform: Platform) {
this.fabButtonOpened=false;
//All other functions inside constructor
}
openFabButton(){
if(this.fabButtonOpened==false){
this.fabButtonOpened=true;
}else{
this.fabButtonOpened=false;
}
}
}
Anu's answer worked for me but the labels prevented me from clicking on my buttons.
I made the following edit to fix this. The overlaps the buttons on top since the labels positions are fixed.
<ion-fab-list side="top">
<ion-label class="fablabelfriend">Friend</ion-label>
<ion-label class="fablabelfamily">Family</ion-label>
<button ion-fab>
<img src="assets/friend_add.png">
</button>
<button ion-fab>
<img src="assets/family_add.png">
</button>
</ion-fab-list>
</ion-fab>
Adding more to above fixes. You can make the labels clickable by
button[ion-fab] {
ion-label {
pointer-events: auto;
}
}
I am designing a slideshow and the absolutely positioned ul of images. The absolutely positioned ul is screwing with the natural flow of the rest of the page. I know absolutely positioned elements do this. However, I was under the impression that setting the #sliding section to position: static and having height: auto !important would work. The #stuff section is showing up underneath the #sliding section. Has anybody else had to work with this before?
To be perfectly clear the actual slideshow works perfectly, but the HTML and CSS is what I am trying to solve. Any help is very appreciated.
Here is the HTML
<section id="sliding">
<img id="leftimg" src="prev.png" alt="left">
<ul class="boxslider">
<li><img class="slidingimg" src=".jpg" id="will" alt="1"></li><!-- will -->
<li><img class="slidingimg" src=".jpg" id="poa" alt="2"></li><!-- powerofattorney -->
<li><img class="slidingimg" src=".jpg" id="probate" alt="3"></li><!-- probate -->
<li><img class="slidingimg" src=".jpg" id="forming" alt="4"></li><!-- forming business -->
<li><img class="slidingimg" src=".jpg" id="contracts" alt="5"></li><!-- -->
<li><img class="slidingimg" src=".jpg" id="realestate" alt="6"></li><!-- -->
</ul>
<img id="rightimg" src="next.png" alt="right">
</section>
<section id="stuff">
<h2>Stuff</h2>
<h2>Stuff</h2>
<h2>Stuff</h2>
<h2>Stuff</h2>
</section>
Here is the CSS
#sliding{
position: static;
display: block;
width: 100vw;
height: auto !important;
clear: both;
}
#leftimg, #rightimg{
display: inline-block;
position: absolute;
top: 40%;
width: 50px;
z-index: 1;
}
#leftimg{
left: 1vw;
}
#rightimg{
right: 1vw;
}
.boxslider{
position: absolute;
left: 0px;
display: block;
width: 600vw;
overflow: none;
}
.slidingimg{
display: inline-block;
vertical-align: top;
width: 100vw;
height: auto;
float: left;
}
#stuff{
width: 100vw;
height: 80vh;
border-top: 8px solid green;
clear: both;
}
Here is the jsfiddle.
http://jsfiddle.net/2ruk3Lju/2/
I guess you cannot use position:absolute. Position absolute has to have the height and width explicitly assigned. I decided to try position relative since it can still be moved by jquery to create a sliding effect. This works because position:relative is still within the normal flow of the document and fixes the issue of the content below the #sliding div stacking underneath it.
Ok, I'm trying to tinker with my navigation menu. I want something like this website:
http://aleksfaure.com/
He has a single image (logo) centered with 2 menu links on either side. I've tried a couple of different things, including just using my logo as an image centered at the top, in between the menu. No dice.
Here's the relevant HTML and CSS I have with my current nav menu. I'm still kind of a intermediate beginner at this.
HTML
<nav role="navigation">
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<ul id="nav-right" style="float:right;">
<li>Portfolio</li>
<li>Contact</li> </ul>
</ul></nav>
CSS
#header nav {
position: relative;
width: 700px;
height: 163px;
display: block;
margin: 0 auto;
text-align: center;
}
#header nav ul li {
float: left; list-style: none;
}
ul#nav li a {
display: block;
width: 100px;
height: 100px;
padding: 50px 0 0 0;
margin: 0 10px 0 10px;
font-family: 'MuseoSlab-500', Helvetica, sans-serif;
font-size: 16px;
text-transform: uppercase;
color: #000;
text-shadow: 0 2px 1px #bbbaba;
text-decoration: none;
}
ul#nav li a.mainnav:hover {
color: #13cad1;
text-shadow: 0 2px 1px #fff;
}
You don't need to use two separate lists. Treat the entire menu, including your image, as one list. Consider something like this for your HTML:
<div>
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<li><img src="images/yourLogo.png"></li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
And make sure you have your style set to float: left;
#nav li { float: left; list-style: none;}
Then, just center the entire div on the page, and style your links as you want.
SEPARATE NOTES:
In your code, you are missing the closing tag for your first unordered list.
The navigation element is not very widely supported, so depending on your audience you may want to use a div.
So in my code I have a sticky footer. And the sticky footer has the #wrap container with a min-height of 100%. But with min-height you can't use height:100% on objects inside the wrap div.
So I add height:100% but it messes with the layout by making the footer roll over the content in the wrap div when window height is too small.
Anyone have fixes for this?
<div id="wrap">
<div id="main">
<div id="content">
</div>
</div>
<div class="clearfooter"></div>
</div>
<div id="footer">
</div>
CSS:
*{
padding: 0px;
margin: 0px;
}
html, body {
height: 100%;
}
body{
color: #FFF;
background-image:url('../images/black_denim.png');
}
#wrap {
min-height: 100%;
margin-bottom: -200px;
position: relative;
}
#topBanner{
width: 200px;
margin: 0px auto;
}
.clearfooter {
height: 200px;
clear: both;
}
/* footer */
#footer {
position: relative;
height: 200px;
width: 100%;
min-width: 960px;
}
If all you need is a sticky footer that doesn't cover up any of the body's content then just give the footer a fixed position and give the bottom of the body padding equal to the footers height.
body{
padding-bottom:200px;
}
#footer {
position: fixed;
bottom:0;
height: 200px;
width: 100%;
}
EDIT:
if your concern is that on very small screens the fixed footer covers up most of the screen then there is no workaround for this except for maybe hiding the footer dynamically using css media queries or javascript.
many mobile browsers do not support fixed positions precisely because of the issue of them covering large portions of the screen.