I am running into an issue when I try to align my checkmarks in the cells of my AG Grid. By default they are all left aligned but i would like them to be center aligned. I dont have a problem setting the alignment for text but for those material icons i have no luck.
Part of the problem seems to be also that span that holds the image might have the alignment set to center but that does not effect the column itself
Here is what the code for the cell looks like
<span class="ag-cell-value" role="presentation" id="cell-112"><span>
<span class="table-row-icon" style="align-items: center;">
<i class="material-icons md-18" style="color: #ff6358;
align-items:center;text-align:center;">done</i>
</span></span></span>
The problem actually was that I need it to make display Flex. Applying the below style created the desired result.
{display: flex; justify-content center}
Related
I'm using Materialize for a project and I want a tooltip to appear when I hover the mouse on a div. That's working as it should, however, I want to position it in the center of the div and that doesn't seem to be possible. I know I can position it top, right, bottom and left. I've tried to find some kind of CSS class that I can copy and edit but with no luck.
I think that a good solution is to simply wrap your tooltip in a <div> and then use the Flexbox solution in order to center it.
So, if this is your tooltip and it's enclosed in a div tag:
<div class="container">
<a class="btn tooltipped" data-position="bottom" data-tooltip="I am a tooltip">Hover me!</a>>
</div>
You can try something in the CSS like :
.container {
display: flex;
justify-content: center;
}
I have a side menu using Materialize CSS. It has three menu items in it, each with an icon. My problem is the icon sits too high - the base of the icon is in line with the base of the text. I want it to be so the icon is in the middle of the text vertically. Here is how my lis look:
<li class="logout-btn"><i class="material-icons">power_settings_new</i> Logout</li>
And here is what it looks like in the sidebar nav:
If anyone knows a fix that would be great!
Try with vertical align
i.material-icons {
vertical-align: middle;
}
If this doesn't work, try to wrap into a span the text
<i class="material-icons">power_settings_new</i> <span>Logout</span>
And then in the CSS
i.material-icons , i.material-icons + span {
vertical-align: middle;
}
change from:
<i class="material-icons">
to:
<i class="material-icons left">
more info can be found here: https://materializecss.com/buttons.html
When placing a Bootstrap 3 button with class btn-link in a block of text, the vertical alignment seems to be out by a few pixels:
<div>Foo<button class="btn btn-link">Button</button>Bar</div>
Fiddle
How can I fix this? Removing the padding from the button improves the issue somewhat, but I'm still seeing a discrepancy of a few pixels.
The best way to fix this would be to wrap the text nodes with <span> elements and then modify the vertical-align property:
Updated Example
div span {
vertical-align: middle;
}
<div>
<span>Foo</span>
<button class="btn btn-link">Button</button>
<span>Bar</span>
</div>
If you don't want to (or can't) wrap all non-button items within <span>'s, a simpler approach may be to change the btn-link's vertical-alignment from middle to baseline.
.btn-link { vertical-align: baseline; }
Quoting from CSS-Tricks.com: "What is Vertical Align?"
The default value of vertical-align (if you declare nothing), is baseline. Images will line up with the text at the baseline of the text. Note that descenders on letters dip below the baseline. Images don't line up with the lowest point of the descenders, that isn't the baseline.
Here is my jsFiddle with full code example.
I am trying to achieve the following to no avail:
I want the glyphicon-globe to appear centered and above the "Community" label (<h1>), and I want all three elements (the glyphicon, the <h1> heading and <h3> subheading) to be horizontally-centered in the middle of the screen
I want the "Community" label to appear with the correct font (see what happens when you remove the glyphicon...)
I have a feeling that the glyphicon is causing both problems:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1><span class="glyphicon glyphicon-globe"/>Community</h1>
<h3>A free online community to all new fizz-comers.</h3>
</div>
</div>
</div>
Perhaps this is malformed somehow or causing weird CSS rules to fire. Any ideas?
span tags shouldn't be self-closing. Here's a better explanation.
This updated example should style the heading and icon the way you want. By center aligning the text in the H1, the span inside it will also center (if set to display: block). The H1 will take the full width of the container element - setting it to display:inline-block is to make this example look better.
<h1 style="text-align: center; display: inline-block;"><span class="glyphicon glyphicon-globe" style="display: block"></span>Community</h1>
I am trying to create a combobox style widget (jquery-ui compatible) andcurrently I am trying to get the static layout of the box sorted. The problem is when I have long text in the value area of the select it doesn't clip in Firefox (it actually wraps). I don't want this and tried various combinations overflow:hidden white-space:nowrap etc but in Firefox it still wraps. The sample code is below.
<a href="#" class="ui-widget ui-widget-content ui-custom-button ui-state-default ui-corner-all ui-helper-reset" style="padding-left:5px;text-decoration: none; width: 139px; ">
<span style="float:right;margin-top:1px;border-left:1px solid #D3D3D3;" class="ui-custom-button-icon ui-icon ui-icon-triangle-1-s" ></span>
<span style="line-height:1.5em;font-size:10px;margin-top:1px;overflow:hidden;height:16px;">If the text is very long then somethin</span>
</a>
Can anyone offer any help on this?
Try giving the element a display:block, or change the SPAN to a block-level element like DIV.
The problem is spans are inline elements, and you can't set width or height on inline elements.
And as overflow controls are based on block dimensions It won't work.
However, as of Firefox 3.0, there is support for
display: inline-block
Which allows you to control the element as if it were a block, but to the containing scope it still behaves like an inline element.