I face an issue when I apply font family for my Text component as the image below
As you can see, my text cannot align center itself (red area is my default Text component, without any margin or padding).
I think this issue comes from my font (TradeGothicLTStd-BdCn2) because when I change the font, I don't see this issue anymore.
Here is my style for this component
dropdownCurrentText: {
fontFamily: Fonts.type.TradeGothicLTStdBold,
fontSize: 14,
justifyContent: 'center',
textAlign: 'center',
color: Colors.black,
letterSpacing: 0.2
},
Does any suggestion to resolve this within keeping above font? any response would be appreciated.
P.S It's not happening on Android platform, only iOS
Finally, I find out the solution for my issue, thank for another answer.
That is using Font Tool for XCode, you guys can read this article for more detail https://medium.com/#martin_adamko/consistent-font-line-height-rendering-42068cc2957d
If you don't want to have to play with margin/padding values, you can define the text box as an inline-block element, give it a relative position and adjust the top/bottom value(s) accordingly to center it as you wish:
div {
align-items: center;
border: 1px solid gray;
display: flex;
height: 40px;
width: 200px;
}
span {
background: red;
display: inline-block;
position: relative;
top: 2px;
left: 10px;
}
<div>
<span>SELECT</span>
</div>
You can try adding this property to particular element : vertical-align: middle
Related
I can't find a way to do this
There seems to be padding placed above and below the element, although I have set it zero
https://plnkr.co/edit/WvEqNCxEcLY5yS1IT738?p=preview
<div>
<button>hello</button>
</div>
<table><tr><td>
<button>hiya</button>
</td></tr></table>
td,
div{
padding: 0;
height: 10em;
border: solid;
}
button {
height: 100%;
width:100%;
border:solid 10px #f00;
}
I don't want to use absolute position as the contents vary, and JS would be an overhead I couldn't live with!
Is there a known bug here? Would anyone have a link to it so I can watch it not get fixed for years and drives me to a stress related end
Thanks in advance
ios pic
chrome on win 10 (desired result)
Thebutton, input, textarea, img, video, audio etc. are REPLACED ELEMENTS. The positioning rules for them are other than for standard elements. You can try to enclose replaced elements into a span or div.
Add <div/> inside <td/> and put <button/> into <div/> it will work properly. Add styles to new <div/> element and use:
button
{
height: 100%;
width:100%;
padding:0;
margin:0;
}
<table><tr><td><div class="replaced-element-container"><button>hiya</button></div></td></tr></table>
Well, this is embarrassing but it meets W3C requirements.
For one table cell in the row:
td, div
{
padding: 0;
height: 10em;
border: solid;
display:block;
}
button
{
height: 100%;
width:100%;
border:solid 10px #f00;
}
But it doesn't resolve problem that button is replaced element. It is still in container made from <td/> element.
This is the datepicker that I want to set my custom horizontal size:
https://material.angularjs.org/1.0.5/demo/datepicker
This works for me in Angular Material 6
.mat-datepicker-content .mat-calendar
{
zoom: 0.85;
}
Not sure if this is what you mean but to set the horizontal size of the input of the date picker you can override css class as follow
.md-datepicker-input-container {
width: 300px;
}
I was able to solve this by setting the display to block on the mat-form-field. I have other form controls which I'm trying to have matching width's so this solution worked for me. Might work for someone else.
In HTML:
<mat-form-field class="display-block">
<...date picker and other form elements...>
</mat-form-field>
In css:
.mat-form-field.display-block {
display: block;
}
update below CSS class for the page or globally, this will help to reduce the icon line-height and height so we can reduce the height of the datetime picker.
.mat-icon-button {
padding: 0;
min-width: 0;
width: 40px;
height: 16px;
flex-shrink: 0;
line-height: 12px;
border-radius: 50%;
}
Is there a simple css styling entry to, say, halve the size of the core-icon-button?
I am replacing font-awesome icons with these and currently the icon size is much larger than the text, so I'm looking for a way to scale it down.
<div horizontal layout>
<core-icon-button icon="add-circle"></core-icon-button>
<div horizontal layout center>Expand Entries</div>
</div>
Ideally I'd like to shrink the icon inside the icon button and reduce the padding as well.
This is how it looks when I use your code.
Whith this style in the element containing the <core-icon-button>
core-icon-button /deep/ core-icon[role=img] {
height: 12px;
width: 12px;
padding: 1px;
margin: 1px;
}
core-icon-button {
padding: 0 1px 1px 1px;
margin: 1px;
}
the icon becomes very small.
I had to add the [role=img] because otherwise the selectivity was to low to take effect.
Simply put the question is - is there a way to align link text within an action link vertically?
I need to make a button-looking Html.ActionLink control.
There is a reasonably good example at Html.ActionLink as a button or an image, not a link
I have implemented this approach, however, I need not just an "image" button,
but an image button with a text shown on it, and this text depends on view model's state, so that I cannot simply put it on an image.
Here is what I have (Razor):
#Html.ActionLink(#commitee.Name, "CommiteePage", "SecureFolder",
new { commiteeName = commitee.Name, page = 1 },
new { #class = "commiteeButton" })
and CSS:
a.commiteeButton {
background: transparent url("../Images/BlueButton.png") no-repeat top left;
display: block;
width: 304px;
height: 50px;
color: white;
text-decoration: none;
font: normal 14px Arial;
text-align: center;
margin-bottom: 10px;
}
The result is OK, but: the text of a link is located on the top of an image, and not in its middle (vertically).
I do not know how to center link text vertically, so that it can be located right in the center of an image.
Of course, there can be another approach (see below) but maybe it is still possible with approach mentioned above?
<a class="nonunderlinedlink" href="#Url.Action("CommiteePage", "SecureFolder", new { commiteeName=commitee.Name, page = 1 }, null)">
<div class="commiteeButton">
<p class="pstyle">#commitee.Name</p>
</div>
</a>
Try the following changes in your css
a.commiteeButton {
background: transparent url("../Images/BlueButton.png") no-repeat top left;
display: block;
width: 304px;
height: 50px;
color: white;
text-decoration: none;
font: normal 14px Arial;
text-align: center;
margin-bottom: 10px;
display: table-cell;
vertical-align: middle;
}
Rex (see comments to my question above) suggested putting padding-top to CSS, that has resolved issue without causing collateral layout problems.
Thank you all for your quick reply!
I know it's a bit late but you could also use line-height: 50px; to center your text vertically
While using the tablesorter css default theme, if I avoid to set the table width I get a nice table with all columns perfectly adjusted to the longest field.
BUT, If I add filter widget, all columns appear much wider than before, with a lot of empty space. Sometimes text columns are wraped, while others look nearly empty.
Can this behavior be avoided? Thanks!
The filter inputs inherent size depends on the browser, the version and your OS. So simply adding an input into a table cell will stretch it to that size. But you can set a max-width or width using css.
I've updated the demo you shared, with this css to show how the theme set style can be overridden:
.tablesorter, .tablesorter .tablesorter-filter {
width: auto;
}
If you want the columns narrower, just set the input width as a pixel size (demo):
.tablesorter {
width: auto;
}
.tablesorter .tablesorter-filter {
width: 50px;
}
Update: if you need different width inputs, try this css (demo):
.tablesorter .tablesorter-filter-row td:nth-child(4n+1) .tablesorter-filter {
width: 80px;
}
.tablesorter .tablesorter-filter-row td:nth-child(4n+2) .tablesorter-filter {
width: 40px;
}
where the 4 in 4n is the number of columns in the table (one-based-index)
You can change size of each text boxe using the following style
#sites_list_table .tablesorter-filter-row td>[data-column="1"] {
width: 100px;
}
#sites_list_table .tablesorter-filter-row td>[data-column="4"] {
width: 100px;
}
#sites_list_table .tablesorter-filter-row td>[data-column="6"] {
width: 100px;
}
(#sites_list_table is the id of the table)
If you have unbroken strings in your table data you may need to try changing:
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
To:
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
max-width:400px;
word-wrap:break-word;
}
(this worked for me in Chrome and IE11)
Another way to get rid of some empty space is setting the width to 100%
.tablesorter .tablesorter-filter {
width: 100%;
}