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.
Related
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
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 has been bothering me. Although I've resolved my problem using padding for the container to create the desired height of the container, I'm still puzzled on why this happens.
I have a container with two child elements inside, like so:
<div class="container">
<img src="http://placehold.it/30x30" id="first-item"/>
<img src="http://placehold.it/50x50" id="second-item"/>
</div>
I vertical align the children to the container using the below:
#first-item, #second-item {
display: inline-block;
vertical-align: middle;
}
However, if a fixed height is set for the container, the vertical alignment breaks.
Why is this so?
http://jsfiddle.net/Nx8Jc/
It will work if you add a line-height property with an identical value to the height:
.container {
background-color: #EADDBB;
height: 100px;
line-height: 100px;
width: 100%;
padding: 20px 20px;
}
#first-item, #second-item {
display: inline-block;
vertical-align: middle;
}
Demo: http://jsfiddle.net/galengidman/Nx8Jc/1/
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
I'm trying to put a div inside another div that stretches to the full height of the screen and center it vertically, like so:
Preview http://f.cl.ly/items/1a3L46453f0D271V1O2w/Schermafbeelding%202013-04-02%20om%2021.37.25.png
The large photo is the full screen div, the white band is the vertically centered div.
The solution below works gracefully on all possible computers and browsers that I tried... except for Mobile Safari.
For some reason, Mobile Safari (at least on iPad) decides to put the nested div 50% down the page instead of 50% down its parent div.
HTML:
<div class="band full">
<div class="band">
*content*
</div>
</div>
SCSS (irrelevant tags removed):
div.band{ //General styling for div.band elements
margin: 0px;
padding: 80px 0px;
width: 100%;
&.full{ //Style the parent div
height: 100%;
}
div.band{ //Style the nested div
position: relative;
top: 50%;
margin-top: -200px;
padding: 20px 0px;
height: 400px;
}
}
I've got a nagging feeling that this is a bug in Mobile Safari. I sure hope it isn't. Does anyone know how to fix this?
I really did my best to solve this in a clean manner, but I ran some more tests and it's clearly a bug in Mobile Safari's rendering engine. I decided to solve it with an admittedly dirty jQuery hack, but at least it works now.
My page had one of these full screen photos with a band in the middle on the very top, and another one on the very bottom of the page. The top one was easy to solve: just use absolute positioning instead of relative (which was positioning relatively to the top of the page anyway). The "top" property of the bottom band, on the other hand, has to be recalculated based on the height of the page after setting its positioning to absolute. I solved this by setting the "top" property to this: vertical offset from the top of the page to the bottom band + (the height of the full screen band to center in / 2).
Or in code form:
$(window).load(function() { //Wait until the page is fully loaded
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { //If the user is using an iDevice
$('div.band#top div.band').css('position', 'absolute');
$('div.band#bottom div.band').css('position', 'absolute');
$('div.band#bottom div.band').css('top', $('div.band#bottom').offset().top + ($('div.band#bottom').height() / 2));
}
});
check this out. Not tested on mobile but should work
HTML
<div class="panel">
<div class="panelInner">
<div class="box">
<div class="boxInner">hi there</div>
</div>
</div>
</div>
CSS
html {
min-height: 100%;
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.panelInner {
padding: 40px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.box {
height: 200px;
background: #999;
display: table;
width: 100%;
}
.boxInner {
display: table-cell;
vertical-align: middle;
}
And here's a fiddle