I drew a line chart using flot in the studentchart div using:
$.plot(jQuery("#studentavgchart"), DATA, options);
Graph will draw outside the div with class oneTwo. If I can remove the style of the div studentchart it shows javascript error.
I need to draw the graph inside the parent div ie; in oneTwo
<div class="oneTwo">
<div class="widget" >
<div class="header">
<span>
<span class="ico gray info2"></span>Total Class No
</span>
</div>
<div class="content">
<div id="studentchart" style="width:100%;height:300px;"></div>
</div>
</div>
</div>
I see your plot function call is using "studentavgchart" and your div has the id of "studentchart"
I ran into this issue as well and found that my Plot div needed a style or a class that specified the height. Either in pixels or %.
Hope that helps.
Related
I have this
<div class="flex flex-col">
<main class="max-w-screen-lg mx-auto">...</main>
...
</div>
I use mx-auto to center main
I also want main to have some maximal width on large screen that's why I use max-w-screen-lg!
But in result margin left and right takes all space around and shrinks main to its minimal possible width on large screen
I just want main to have max width centered inside container
Some possible solution might be this, but it requires extra div
<div class="flex flex-col">
<div>
<main class="max-w-screen-lg mx-auto">...</main>
</div>
...
</div>
In my three-column Vuetify layout, I have one column that is very tall. I want only this column to have a scroll bar. However, the code below causes the entire page to overflow! Any help?
<template>
<v-container fluid class="secondary fill-height">
<v-row class="fill-height ">
<v-col class="accent rounded overflow-y-auto" cols="2">
<div class="text-center">
Lorem ipsum....super long
</div>
</v-col>
<v-col class="primary rounded" cols="5">Editor</v-col>
<v-col class="success rounded" cols="5">Stage Stuff</v-col>
</v-row>
</v-container>
</template>
Add max-height: calc(100vh - 48px) style to the div that encloses the long stuff.
<template>
<v-container fluid class="secondary fill-height">
<v-row class="fill-height">
<v-col class="accent rounded overflow-y-auto" cols="2">
<!-- Add max-height to this div so its height won't expand past the viewport's height -->
<div class="text-center" style="max-height: calc(100vh - 48px)">
Lorem ipsum....super long
</div>
</v-col>
<v-col class="primary rounded" cols="5">Editor</v-col>
<v-col class="success rounded" cols="5">Stage Stuff</v-col>
</v-row>
</v-container>
</template>
Basically, you just limit the max height of the div when its content gets longer. The 100vh is the full height of the viewport. The 48px is the cumulative vertical padding of <v-container /> and the <v-col />.
See live demo.
Note:
The 48px comes from the cumulative vertical paddings/margins/borders of the whole page. In our case, it is the 12px top and bottom padding of the <v-container/> plus 12px top and bottom padding of the <v-col/>. This is a known trick when we want to achieve a full pager div. You can read more here: https://dev.to/lennythedev/css-gotcha-how-to-fill-page-with-a-div-270j
How can I use the aria-attribute aria-labelledby for combo box (input+autocomplete list) correctly?
According to the W3C, the aria-labelledby property provides the user with a recognizable name of the object.
I've found the following example on W3C:
<div class="combobox-wrapper">
<div>
<input type="text"
aria-labelledby="ex1-label">
</div>
<ul aria-labelledby="ex1-label"></ul>
</div>
But I've noticed that aria-labelledby isn't descriptive. Values in aria-labelledby for different element are used the same.
Maybe I can use aria-labelledby like this:
<div class="combobox-wrapper">
<div>
<input type="text"
aria-labelledby="textBox">
</div>
<ul aria-labelledby="autocomplete-list"></ul>
</div>
The WAI ARIA attribute aria-labelledby is used when you can't use the normal <input> + <label> combination to label a form element, e.g. because you are using a custom form element. In other words, it is used in situations where you can't use the <label>'s for attribute to define a label for the input (e.g.
<input id="communitymode" name="communitymode" type="checkbox"> <label for="communitymode">communiti wiki</label>; note that the for attribute's value refers to the input's id attribute.)
With aria-labelledby, your reference works in the opposite direction as the for attibute: you tell the browser or the screen reader where to find the "label" for the form control it has just encountered.
<div class="combobox-wrapper">
<div>
<span id="combolabel">Select your country:</span>
<input type="text"
aria-labelledby="combolabel">
</div>
<ul aria-labelledby="combolabel"></ul>
</div>
In the above code sample, both the <input> element and the <ul> element are labelled by the <span> element with id "combolabel".
Remember the first rule of ARIA is don't use ARIA when native HTML elements exist. If you are trying to create an accessible autocomplete box try this:
http://wet-boew.github.io/v4.0-ci/demos/datalist/datalist-en.html
It does not use ARIA and follows all applicable W3C rules and guidelines.
I'm new to flexbox and it seems really complex compared to bootstrap. I have a splash screen where I am required to vertically and horizontally center a content:
<div layout="row" layout-align="center center">
<div layout="row" layout-wrap>
<div flex="30">
<img ng-src="images/logo.png" src="//:0" alt="example.com" title="Example" />
</div>
<div flex="45">
<h2 class="title">example.com</h2>
</div>
<div flex="25">
<h1 class="bang">Bang!</h1>
</div>
</div>
</div>
however it doesn't center till I add a height to it:
style="height:500px"
Why does it behave this way? Is my code wrong? This doesn't seem like the right way of doing it.
Also with the items in my second row with the layout-wrap the last div with flex=25 overlaps the second div with flex=45.
Basically what I want to do this vertically and horizontally center a div and be able to split that div into as many columns as I like while maintaining a responsive width that adjusts depending on screen size.
Maybe this can point you in the right direction - CodePen
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="row" layout-xs="column" layout-align="center center">
<div flex="30">
<img ng-src="images/logo.png" src="//:0" alt="example.com" title="Example" />
</div>
<div flex="45">
<h2 class="title">example.com</h2>
</div>
<div flex="25">
<h1 class="bang">Bang!</h1>
</div>
</div>
I came upon strange situation. I have a List and each list item consists of span and image element. They are both inline and as long as span is empty they are next to each other, but when span has text, image acts as if it was display:block and falls underneath the span element which is not my desired effect. (I fill span with text dynamically)
<ul id="playerListInsideRoom">
<li class="playerCircleInsideRoom circleFull" seatnumber="1">
<img src="~/Images/Lobby/successGray.png" alt="image" /><span> </span></li>
<li class="playerCircleInsideRoom circleEmpty" seatnumber="2">
<img src="~/Images/Lobby/successGray.png" alt="image" /><span></span></li>
<li class="playerCircleInsideRoom circleEmpty" seatnumber="3">
<img src="~/Images/Lobby/successGray.png" alt="image" /><span></span></li>
<li class="playerCircleInsideRoom circleEmpty" seatnumber="4">
<img src="~/Images/Lobby/successGray.png" alt="image" /><span></span></li>
</ul>
.playerCircleInsideRoom span{
position:relative;
left:50px;
}
#playerListInsideRoom img {
height:15px;
width:15px;
display:inline-block;
position:relative;
right:40px;
}
Even when I get rid of relative positions the problem is still occuring.
If the width of inline elements is larger than the allowed width of the container (your li element) then the line will break.
You could use whitespace: nowrap on the li to prevent it (though that could possibly break the rest of your layout).