So, I am making a widget component in react, and I need to add an icon that needs to be centered. I have this code:
<div className={classes.textCenter}>
<i className={"fas fa-lungs fa-2x"} />
</div>
But I get this:
See that the enclosing element (the i tag) is centered, but the icon is bigger.
I also have the following jss code:
"& .fab,& .fas,& .far,& .fal,& .material-icons": {
position: "relative",
display: "inline-block",
top: "0",
verticalAlign: "middle",
textAlign: "center"
},
but that doesn't appear to be making any difference.
Thanks in advance.
Please try this for the parent div -:
.textCenter{
display: flex;
justify-content: center;
align-items: center;
}
Also please remove any existing icon classes.
Related
I wanna ask something about pseudo-element using tailwind, so before going through into my main problem I wanna show my code using CSS
.text-location {
display: flex;
gap: 1.625rem;
}
.text-location::after {
content: url('image/arrow-down-icon.svg'); <= example image
display: inline-block;
width: 100%;
height: 100%;
}
and the result is like this:
it's working and nothing something wrong when I used in CSS, but when I'm going through using tailwind the content is not showing anything, any wrong with my code? Or I must do something different what I have been made? I hope anyone can help and tell me where I made the mistake...Thank you before and have a nice day, bellow my code:
<label class="font-poppins text-sm font-light leading-[0.875rem] text-[#969696] flex gap-[1.625rem] after:content-[url('image/arrow-down-icon.svg')] after:inline-block after:h-full after:w-full">Location</label>
And the result:
You can use item-center class here and use text-black to make them look similar. You have to use custom fonts as popins is not supported by default.
You can refer here
Below is my code
https://play.tailwindcss.com/0wks3noHUe
You can define your content in the tailwind.config.js
theme: {
extend: {
content: {
'arrowDownIcon': 'url("../src/arrow-down-icon.svg")',
'arrowUpIcon': 'url("../src/arrow-up-icon.svg")',
},
fontSize: {
...
You can render it using the following className. Make sure to include an inline-block and width.
<label className="after:content-arrowDownIcon after:inline-block after:w-8">Learn More</label>
You can also apply a hover state like this hover:after:content-arrowUpIcon
<label className="hover:after:content-arrowUpIcon after:content-arrowDownIcon after:content-arrowBlack after:inline-block after:w-8">Learn More</label>
I'm trying to put the React-select element to the center of the page. (Please Note, I'm not trying to center the text/menu but I'm trying to center the select box)
Inline Styles didn't work for me, hence I have added a div tag and was able to control the width as shown below :
<div style={{width: '300px'}} >
<Select options={selectOptions} value={selectedOption} onChange={this.handleChange}/>
</div>
But I'm not able to center the select element.
Any help on this ?
Well, that could be solved easily by using a few CSS attributes.
You know, I am sure that display: flex, justify-content: 'center', align-items: center will work as you desire.
<div style={{width: '300px', display: 'flex', justify-content: 'center', align-items: 'center'}} >
<Select options={selectOptions} value={selectedOption} onChange={this.handleChange}/>
</div>
This question has a Stackblitz demo; Given the following Angular Material button
<button md-button>
<span>Foo</span>
<md-icon>keyboard_arrow_down</md-icon>
</button>
How can I increase the gap between Foo and the icon (see below):
I thought this would be easy but Angular Material wraps the contents in <span class="mat-button-wrapper"> so the final markup is more like:
<button>
<span class="mat-button-wrapper">
<span>Foo</span>
<mat-icon>keyboard_arrow_down</mat-icon>
</span>
</button>
So far I've got as far as adding the following CSS to make the wrapper fill the available space but I can't see how to progress:
.mat-button-wrapper {
display: inline-block;
width: 100%;
}
.mat-button-wrapper > span {
margin-right: 2em;
}
Stackblitz :-
https://stackblitz.com/edit/angular-material-6z4j4m
button md-icon {
margin-left: 64px;
}
This is more semantically appropriate.
https://stackblitz.com/edit/angular-material-yvqvhm
I'm trying to modify the css color picker of a module, in order to adapt it to my website (align it to center).
Here's the code of the color picker:
#Component({
selector: 'color-circle',
template: `
<div
class="circle-picker {{ className }}"
[style.width.px]="width"
[style.margin-right.px]="-circleSpacing"
[style.margin-bottom.px]="-circleSpacing"
>
<color-circle-swatch
*ngFor="let color of colors"
[circleSize]="circleSize"
[circleSpacing]="circleSpacing"
[color]="color"
[focus]="isActive(color)"
(onClick)="handleBlockChange($event)"
(onSwatchHover)="onSwatchHover.emit($event)"
></color-circle-swatch>
</div>
`,
styles: [
`
.circle-picker {
display: flex;
flex-wrap: wrap;
}
`,
],
I'm using justify-content: center to the class circle-picker to align it, but nothing happens, so I don't really know if I'm able to do it.
Here's how I use the selector:
<color-circle [colors]="colors" [color]="productForm.get('color')?.value" (onChange)="onColorChanged($event)" width="190px" circleSize="34" circleSpacing="18"></color-circle>
When I inspect the code with the browser, I can make it, but with the CSS file nothing works.
Could anyone help?
This is what I want:
This is what I have:
Author of the color picker:
https://github.com/scttcper/ngx-color
If you want to set style to elements inside your host component. you must use :host
and to change deeper elements you have to use ::ng-deep
Use
:host color-circle ::ng-deep color-circle-swatch{
justify-content: center;
align-items:center
}
May be this two line of code can fix your problem
.color-circle-swatch{
margin: 0 auto;
width:100%;
}
I'm using a dojo ContentPane to render an openlayers map. When the DOM is ready and the map is inserted the sytle of the dijit is overwritten. I've tried specifiying the height and width in a CSS by class and id, and also inline in my html.
My html:
<div id="map-id"
class="centerPanel"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region: 'center', style: 'width: 1468px;'">
</div>
my CSS:
#map-id {
width: 1468px;
height: 471px;
}
.centerPanel {
width: 1468px;
height: 471px;
}
my actual html from firebug:
<div id="map-id" class="centerPanel dijitContentPane dijitBorderContainer-child dijitBorderContainer-dijitContentPane dijitBorderContainerPane dijitAlignCenter olMap" data-dojo-props="region: 'center', style: 'width: 1468px;'" data-dojo-type="dijit.layout.ContentPane" title="" role="group" dir="ltr" style="width: 1455px; left: 252px; top: 48px; right: auto; bottom: auto; height: 456px;" widgetid="map-id">
As you can see my data-dojo-props styling is ignorded and the new height and width are inserted...any ideas?
I have tried this in dojo grid and it also does not work. I suggest that you try doing it on javascript code.
add a style object with width and height attribute in the container object instead.
myGrid = new DataGrid({
store: myObjectStore,
structure : myStructure,
style: {
width: '1000px',
height: '500px',
},
}, "myGrid");
I believe that the declarative way does not work.
The center region of a BorderContainer gets sized to fill up any remaining space available. If you want your center region to be a particular size then you need to style the BorderContainer rather than the widget that occupies the center region.
You might need to add a doLayout:false on your container, if any :)