I'm sure this question has been asked before, however I couldn't find it anywhere.
Doesn't seem that Ant Design explains how to do this in their docs: https://ant.design/components/grid/
This is what I've tried so far, however doesn't seem to work for me!
<Col span={4} style={{ display: 'flex', alignItems: 'center' }} >
<div></div>
</Col>
Related
I'm having issues with the layout in a VictoryChart using horizontal bars. I'm trying to left align the labels on the vertical axis below:
The relevant bits of code I'm using is
<VictoryChart domainPadding={{ x: [20, 20] }}>
<VictoryAxis
dependentAxis={true}
tickValues={[0, 2, 4, 6, 8, 10, 12, 14]}
/>
<VictoryAxis
labelComponent={<VictoryLabel textAnchor="start" />}
style={{
tickLabels: {
fontSize: 10,
textAnchor: "end"
}
}}
/>
<VictoryBar
data={data}
horizontal={true}
domain={{ y: [-10, 15] }}
x="name"
y="value"
/>
</VictoryChart>
And I've created a sandbox here.
I had to add the tickLabels style textAnchor: "end" to get the labels to be visible in the first place but I would very much like them to align to a common left vertical line, not right like they are now. I tried by defining a labelComponent as <VictoryLabel textAnchor="start" /> but this did not have the effect I hoped for. Upon inspecting the generated SVG that seems to control how the text is anchored within it's container element but what I really need to do here is moving the entire container to the left.
I've gone through the API documentation several times but haven't been able to spot anything that looks like it would be useful. VictoryGroup looked promising but the docs specifically tell me not to use it with the axis component.
OK so I was just getting lost in the jungle of props here.
The solution was first to not try to do this using CSS styles, so the tickLabels.textAnchor: "end" style had to go. Secondly, there's more than one label-component and for the labels on the VictoryAxis the relevant property is tickLabelComponent and not labelComponent.
Replacing the second VictoryAxis component with
<VictoryAxis
tickLabelComponent={(
<VictoryLabel
verticalAnchor="middle"
textAnchor="start"
x={0}
/>
)}
style={{
tickLabels: {
fontSize: 10,
}
}}
/>
Fixes my issue.
I'm looking for styled or colored horizontal lines, preferably with success, primary, warning classes.
A similar concept to colored links.
I couldn't find this topic on Bootstrap's website.
I found a few working solutions referring to Bootstrap v4.
In my case:
<div class="divider py-1 bg-success"></div>
It works, but I guess it's not the best practice...
Yes it does. Part of the Reboot, and is present in both Bootstrap-reboot.css & Bootstrap.css. It defines the <hr> as:
hr {
margin: 1rem 0;
color: inherit;
background-color: currentColor;
border: 0;
opacity: 0.25;
}
Also, Bootstrap 5 has moved a lot of its UI control over to utility classes... that gives you a far richer control of your UI. For example, if you wanted a "danger" / red colour <hr> you could use:
<hr class="bg-danger border-2 border-top border-danger">
Have a look at the Utility classes in their docs.
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-1 border-bottom"></div>
This should work
Using hr with the spacers helped me. Example horizontal rule that has a bit of space on top and bottom:
<hr class="mt-1 mb-1"/>
Consider the following simple React / MaterialUI component
<div>
<MenuIcon />
<span style={{ font: '-apple-system-body' }}>Hello World</span>
</div>
Result of this on my iPhone is attached. As I change the Settings > Accessibility > Larger Text option on my iPhone, the Hello World text resizes itself. The icon, however, doesnt. Is there a way to make the icon resize too?
<div>
<span style={{ font: '-apple-system-body' }}>
<MenuIcon style={{ fontSize: 'inherit', transform: 'scale(1.5)' }}/>
</span>
<span style={{ font: '-apple-system-body' }}>Hello World</span>
</div>
I noticed that <MenuIcon> sets font-size:1.5rem by default. Hence, <MenuIcon style={{ fontSize: 'inherit' }}/> undid this, and adding transform: scale(1.5) made up for the smaller svg size. Further, I had to set the container of the icon to the -apple-system-body for the container to respond to changed text-size in the accessibility settings.
I'm trying to override the colors on my material input elements to always be white. This includes the outline of the input/select field, the placeholder, and the text itself even when the field is out of focus.
I did read through the official material overriding styles guide, but I found it a bit broad and was hoping for some more direction to do this.
This is my code:
<mat-card class="coverage-card">
<mat-card-content>
<form>
<mat-form-field appearance="outline" class="address-zip white-text">
<mat-label>Square Footage</mat-label>
<input type="number" matInput>
</mat-form-field>
</form>
</mat-card-content>
</mat-card>
css styles:
.coverage-card{
min-width: 400px;
max-width: 620px;
background-color: #FF6A13;
height: 575px;
border-radius: 20px;
}
.address-zip{
max-width: 190px;
margin-right: 10px;
}
.white-text{
color: white;
}
The out-of-box material color only applies when the field is focused on. I haven't been able to find the style that is being applied to the outline or placeholder when the field isn't in focus.
I tried overriding classes like .mat-form-field-appearance-outline in styles.scss with an !important, just to see if I could find the right class and haven't had any luck yet.
Not in Focus
Focused
Filled In
EDIT:
How do i bring the bottom graph to the right of the top chart and align them as if they look like one chart
http://jsfiddle.net/dP93u/
<div><div id="container1" style="width: 300px; height: 400px;"></div><div id="container" style="width: 300px; height: 400px; margin: 0 auto"></div></div>
New EDIT:
The only way i can change the answer is if someone can develop the same chart in just one container div instead of 2.
I will suggest you to build two barcharts, set their offset such that they get aligned, take care that only one will have the xAxis.
Hope this will be useful for you.
If you would't mind including bootstrap.css library, the solution is pretty simple. Check this fiddle.
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
Do you intend: how can I have value labels between the two bar series?
You can done it via css:
<div style="font-family:verdana">
<p style="text-align:center">Population pyramid for Germany, midyear 2010</p>
<p style="font-size:small;text-align:center">Source: www.census.gov</p>
<div id="container1" style="width: 50%; height: 400px;float:left"></div>
<div id="container" style="width: 50%; height: 400px;float:left;position:relative;left:-55px"></div>
</div>
<div style="clear:both"></div>
and some refinements of HighCharts code. See jfiddle.