I have been facing an issue where I have X and Y axis label, when ever I zoom in or zoom out a page sometimes the label gets overlapped with the X and Y axis data. Refer the below image for reference .
There is no space between the value and label, kindly help me in increasing the space between the value and label.
<div fxFlex.gt-xs="50%" [fxFlex.gt-md]="regularDistribution" *ngFor = "let val of data" style="text-align:center;font-family: 'Open Sans', sans-serif;padding:10px 10px 10px 10px;">
<div #ContainerRef>
<mat-toolbar class="NavToolClass" style="height:31.5px;border-radius: 2px;">
<span> {{val.value}}</span>
</mat-toolbar>
<pre></pre>
<ngx-charts-line-chart style="padding:10px 10px 10px 10px;" (window:resize)="ResizeChart(ContainerRef1.offsetWidth)"
[results]="val.key"
[gradient]="verticalBarOptions.gradient"
[xAxis]="verticalBarOptions.showXAxis"
[yAxis]="verticalBarOptions.showYAxis"
[legend]="false"
[showXAxisLabel]="verticalBarOptions.showXAxisLabel"
[showYAxisLabel]="verticalBarOptions.showYAxisLabel"
[xAxisLabel]="verticalBarOptions.xAxisLabel"
[yAxisLabel]="verticalBarOptions.yAxisLabel"
[showGridLines]="verticalBarOptions.showGridLines"
[legend]="verticalBarOptions.showLegend"
[yScaleMax]="1200"
[view]="view">
</ngx-charts-line-chart>
<pre></pre>
<pre></pre>
</div>
</div>
verticalBarOptions = {
showXAxis: true,
showYAxis: true,
gradient: false,
showLegend: false,
showGridLines: true,
showXAxisLabel: true,
xAxisLabel: "Date",
showYAxisLabel: true,
yAxisLabel: "Size (GB)",
animations:true,
barPadding:5,
groupPadding:5
};
Related
I want to use CSS grid to manage the layout of multiple forms. The goal is to use a two-column grid with the label elements in the left column and the input elements in the right column. The left column's width needs to be sized to fit the widest label, and the right column should take up the remainder of the space. This is the grid column template I'm using:
grid-template-columns: max-content 1fr;
The issue that I'm facing is that the input element will frequently exceed the width of the right column. Unfortunately, setting max-width to 100% on the input element does not constrain its size to the column's width. If I set the width to 100%, that does constrain the size, but as the responsive form gets wider, a 100% width on the input is too wide from a design perspective.
This is the markup:
<body>
<div class="container">
<label>This is label 1</label>
<input type="text" maxlength="100">
<label>This is label 2</label>
<input type="text" maxlength="100">
<label>This is label 3 which is a bit longer</label>
<input type="text" maxlength="100">
<label>This is label 4</label>
<input type="text" maxlength="100">
</div>
</body>
This is the CSS:
*, *::before, *::after {
box-sizing: border-box;
}
.container {
width: 300px;
/* width: 1300px; */
margin: 2rem auto;
background-color:lightblue;
display: grid;
grid-template-columns: max-content 1fr;
align-items: center;
grid-column-gap: 24px;
grid-row-gap:8px;
}
input {
padding: .5rem .5rem;
max-width:100%;
/* width: 12rem; */
justify-self: end;
}
This is a CodePen.
Q: How do I limit the width of the input to about 200 pixels and keep it flushed right? At the same time, as the form gets narrower, it should never exceed the width of the grid column.
.container input {min-width: 0;}
i am struggling with an issue when using <Dropdown.Toggle>, actually the arrow moves its position slightly up when clicked, i have spend quite a bit time and tweaked few things inorder to make its position fixed but it remains the same , any suggestions/thoughts please.
Update-1 the original issue is resolved when i set the height=0px under the <Dropdown.Toggle> but now the menu that apperas after i click it appears just after the arrow below but i was expecting it to start after some padding/margin, any thoughts please
-Snippet from ReactJS
return (
<nav className="header">
<ul>
<li>
<Dropdown id="dropdownbasic" as={ButtonGroup} style={{ marginTop: "5px", position: "relative", float: "left", top: "13px" }}>
<Button .......> </Button>
<Dropdown.Toggle
className="signinDropdown"
split
variant="success"
aria-expanded="false"
// below i added the height it solved my first issue and the arrow is now still all the time
style={{ "height":"0px", background: "none", borderStyle: "none", outline: "none !important" }}
/>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</li>
</ul>
</nav>
)
-Snippet from CSS file
```
// added the below css but still the menu starts just below the arrow
#dropdownbasic > :second-child{
top:158px;
padding-top: "13px";
}
.signinDropdown:focus,
signinDropdown.focus {
outline: none;
box-shadow: none;
background-color: none;
box-shadow: none !important;
}
I am working on Openlayers 5.13 with jQuery 3.21. I am trying to place a html div element on the viewport of a map in openlayers. This element is supposed to have two check-boxes to filter out some content on the map.
For this purpose I am using an Overlay instance.
There are two problems:
1) When I zoom-in or zoom-out the overlay tends to increase and decrease in size, which is not what I am expecting.
I want that overlay (html div element) to retain its size.
2) I cant quit figure out how to place the overlay in top right corner.
An overlay is instantiated with a position property which I don't know what to set to.
I also don't know that if the overlay is what I should seek to show some static element on the map. (I highly doubt that overlay is right way)
Here is my code :
css-
<style>
.ol-panel {
position: absolute;
background-color: white;
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 100px;
}
</style>
html -
<div id="panel" class="ol-panel">
<div id="content">
<table>
<tr>
<td>
Ports <input type="checkbox">
</td>
</tr>
<tr>
<td>
Vessels <input type="checkbox">
</td>
</tr>
</table>
</div>
</div>
<div id="map"></div>
script -
map = new ol.Map({
logo: 'false',
target: 'map',
layers: [new ol.layer.Tile({
title: 'OSM',
type: 'base',
visible: true,
source: new ol.source.OSM()
})],
view: new ol.View({
center: ol.proj.transform([17.813988, 43.342019], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
panelDiv = document.getElementById("panel");
var panel = new ol.Overlay({
element: panelDiv,
stopEvent: false,
//offset:[0,0],
autoPan: true,
position: ol.proj.transform([82,80 ], 'EPSG:4326', 'EPSG:3857'),
positioning: 'top-right',
autoPanAnimation: {
duration: 250
}
});
map.addOverlay(panel);
This is my current output:
This is what I am expecting, an element that stays fixed at a position:
Reference - [http://openlayers.org/en/latest/apidoc/module-ol_Overlay-Overlay.html]
I got what I was looking for here [http://openlayers.org/en/latest/examples/custom-controls.html?q=custom-controls]
/** Create a checkbox to toggle visibility of straits on map
* You can create different controls for different operations
*/
var strait_cbx = document.createElement('input');
strait_cbx.type = "checkbox";
strait_cbx.id = "strait_cbx";
strait_cbx.checked = true;
/**
* This is a container element which holds input elements which are controls for the map
* You can add as many as you want depending upon use.
* The element is a div which would act like a panel to add controls on map like toggling visibility of the layers
*/
var element = document.createElement('div');
element.className = 'ol-control-panel ol-unselectable ol-control';
element.innerHTML="<b>Straits</b> "
element.appendChild(strait_cbx);
/*A custom control which has container holding input elements etc*/
var controlPanel = new ol.control.Control({
element: element
});
map.addControl(controlPanel);
I am trying to make a responsive header/navigation form that has the following properties:
Has some type of label that is inline and vertically centered with the input box when the viewport is above a certain width.
At small viewport sizes, the label should center itself vertically above the input & button and the input/button combo should be 100% of the screen width.
Have a visually combined input and button, like the ones used in Bootstrap that won't split into separate lines
Either fill the width of the screen or be centered as the whole unit (header+input+button) when they're all on the same line
I have used this JS fiddle as a the starting point for the form to break the labels into a separate line on small widths and have successfully gotten it to work and for the label to center above the input at small viewports as well.
My code so far is
CSS
form > div {
clear: both;
overflow: hidden;
padding: 1px;
margin: 0 0 10px 0;
}
form > div > fieldset > div > div {
margin: 0 0 5px 0;
}
form > div > label,
legend {
width: 25%;
float: left;
padding-right: 10px;
text-align: right;
vertical-align: center;
}
form > div > div,
form > div > fieldset > div {
width: 75%;
float: right;
}
form > div > fieldset label {
font-size: 90%;
}
fieldset {
border: 0;
padding: 0;
}
#media (max-width: 600px) {
form > div {
margin: 0 0 15px 0;
}
form > div > label,
legend {
width: 100%;
float: none;
margin: 0 0 5px 0;
text-align: center;
}
form > div > div,
form > div > fieldset > div {
width: 100%;
float: none;
}
input[type=text],
input[type=numeric],
textarea,
select {
width: 100%;
}
}
HTML
1st Attempt
<header class="page-header row center-block">
<div class="center-xs">
<form class="main-form input-group" action="/caulcuate" method="post">
<label for="number" class="control-label"><h1 class="h1">BIG Label Header</h1></label>
<input type="number" name="number" min="10" max="6856" step="1" id="number" class="main-input"
placeholder="number goes here" required autofocus>
<span class="input-group-btn">
<button id="calculate" class="btn btn-lg btn-primary" type="submit">
100?
</button>
</span>
</form>
</div>
</header>
Attempt 2
<header class="page-header">
<form action="#">
<div>
<label class="desc" id="title1" for="numberhere"><h1>BIG Label Header</h1></label>
<div>
<input type="number" name="numberhere" min="10" max="6856" step="1" id="numberhere" class="main-input"
placeholder="number goes here" required autofocus>
<!--<span class="input-group-btn">-->
<button id="calculate" class="btn btn-lg btn-primary" type="submit">
100?
</button>
<!--</span>-->
</div>
</div>
</form>
</header>
Specific problems I'm having
In Attempt 2, I commented out the <span> that Bootstrap uses to group the button and input field because it will otherwise always put the button on a separate line.
In both attempts, the header label is not vertically centered with respect to the input box. I had it centered in an earlier iteration of Attempt 1, but I can't seem to get it back.
Attempt 1 just isn't centered properly at any size where the header row isn't taking up the full screen width. Attempt 2 does center consistently but the label header is too far from the input box at large screen sizes, so it's only centered in that there is roughly equal whitespace between the page border and the contents of the header.
Ideas for solution
Currently, the HTML in Attempt 1 seems like it is closer to what I want in terms of the label header and the button both being smooshed right up against the input box. Attempt 2, however, actually is responsive at small screen sizes.
It seems that maybe if I nest enough <div>s and am clever with their classes, I'll eventually get something that works about right, but would probably be fragile.
The other solution I thought of is to create two separate <header>s and wrap them in a pair of <div>s and use a #media query to change between which <div> is visible. This seems less fragile than using a ton of nested tags but also requires some code duplication. However, it seems like it might be the simplest option so far.
Somewhat related to switching between which <div> to display depending on the screensize, I suppose there probably is some jQuery way to do this and maybe CSS is currently the wrong tool for the heavy lifting in this case.
P.S. I wish I knew more about vector illustration so I could give an example of exactly what I'd want without all the descriptive text.
I have recently started working on dojo. I am facing problems in the following cases.
How can i provide a unique link (href) in each bar in the bar chart? When a user clicks on a bar or label, he should be taken to a related jsp/html page.Basically, i am looking for a clickable bar or tooltip.
This code didn't works, because it will be rendered as special characters.
chart2.addAxis("y", {
vertical: true,
fixLower: "none",
fixUpper: "none",
natural: true,
majorTick: { length: 3 },
labels: [{value: 1, text: Link text }, ...]
});
<div id="chart2" style="height: 100px;">
<div style="margin: 0px; padding: 0px; ...">
<div style="margin: 0px; padding: 0px; ... ">Link text</div> //label
</div>
...
Please help.
Unfortunately, it's not possible to do what you ask yet with dojox.charting.
FWIW, there's a pretty good example of what you can do with dojox.charting at SitePen.