I'm trying to align a Google material icon within material-ui FlatButton using FlexBox.
I've tried several permutations, but always with the same outcome -- the icon sits at the very bottom of the button. I'm not sure if this is a material-ui specific problem. How can I achieve alignment properly?
<FlatButton
style = {buttonStyle}
onClick = {
onIncrementClick
}
icon={<i style= {{display:'flex', alignItems:'center', verticalAlign: 'center'}} className="material-icons">keyboard_arrow_up</i>}
/>
Have you seen the docs here - http://www.material-ui.com/#/components/flat-button?
They have examples of icons in flat buttons on the left and the right. Here's the code to have the icon on the right:
<FlatButton
label="Label before"
labelPosition="before"
primary={true}
style={styles.button}
icon={<ActionAndroid />}
/>
Related
I'm trying to make the usual drawer navigator app by having the Menu icon/button at the top-left corner of the screen, I can get it to the header/top but can't get it to the left, it always get stuck in the middle somehow, here is what it looks like:
Here is the render code:
render() {
return (
<Container>
<Header>
<Left>
<Icon name='ios-menu' onPress={() =>
this.props.navigation.dispatch(DrawerActions.openDrawer())} />
</Left>
</Header>
<AppTabNavigator/>
</Container>
);
}
I've tried setting some stylesheet properties to alignSelf, anything to center it but could not manage to get it correctly.
I think you need to have empty Body and Right components inside the Header
I'm building a Planning Poker UWP app for fun. I can style the poker cards (currently implemented as Buttons, via the Background property) using either an ImageBrush or a LinearGradientBrush without any issue, but obviously I can only set one type of brush to that property.
I'd like to style the card with an image, which then had another brush (e.g. a LinearGradientBrush) over-layed on top, this other brush would naturally have some degree of transparency so that parts of the image could show through.
How would you do that?
For the actual poker card that the user sees - I can re-implement that fairly easily using a different control type (e.g. a UserControl that combined several controls, each with their own background) but there are other instances of use (i.e. showing a list of the available styles), so I wanted to see if there way another way before looking into writing a custom UserControl.
Button is a content control, you can put other xaml controls in the button's content, and set LinearGradientBrush for them. For example,you can set ImageBrush for the button's background property, in the meanwhile set LinearGradientBrush for a Rectangle inline.
I'd like to style the card with an image, which then had another brush (e.g. a LinearGradientBrush) over-layed on top, this other brush would naturally have some degree of transparency so that parts of the image could show through.
To meet your requirement, I wrote a code example as follows:
<Button x:Name="BtnPoker" Padding="0">
<Rectangle Width="200"
Height="300"
Margin="0"
Opacity="0.4">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.0" Color="Yellow" />
<GradientStop Offset="0.25" Color="Red" />
<GradientStop Offset="0.75" Color="Blue" />
<GradientStop Offset="1.0" Color="LimeGreen" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Button.Background>
<ImageBrush ImageSource="Assets\caffe.jpg" />
</Button.Background>
</Button>
And the result:
I am trying to use a SVG with an embedded bitmap as a navigation element. The idea is to make it more mobile friendly. I already have a PNG fallback in place for IE8 and below.
Somehow the embedded bitmap doesn't show in webkit based browsers. SVG without bitmap embedded show just fine.
I can get the background to show in webkit using the "object" tag but then my links don't work, I can't control the width and I run into a documented bug of safari where image is not scaled and sliders appear.
See the page in question here:
http://www.izbornareforma.rs/izbori-2012/
All images are SVG, the four bottom one have embedded bitmap in them.
There are a number of similar question but none have a workable solution.
Suggestions welcome.
G.D.
This is a bug in Webkit. If you keep your current backgrounds and also load the same SVGs in an object tag you will see that the SVG backgrounds will load correctly with the embedded data. To work around this I would suggest you to create an invisible div where you load your SVGs in object tags, such as...
<div id="svgfix">
<object ... />
<object ... />
<object ... />
<object ... />
</div>
Your CSS:
#svgfix {
width: 0;
height: 0;
position: absolute;
visibility: hidden;
}
The corresponding Webkit bug was fixed and rolled-out with Safari 9.
I'm trying to set icon to <aui:button> like on this tutorial.
But solution described there doesn't work well in my case, because I have a table and on each row I have a button with different resourceUrl. Like this:
<portlet:resourceURL id="saveReport" var="saveReportURL">
<portlet:param name="reportId" value="${report.reportId}" />
</portlet:resourceURL>
<aui:button onclick="location.href = '${saveReportURL}'">
Is it possible to set icon in <aui:button> without using JavaScript as described in tutorial?
Thanks
You can write this below code for setting icon in liferay alloy button
<aui:button type="cancel" cssClass="btn-info" icon="icon-upload-alt" iconAlign="right" value="upload" />
you need to use the icon attribute for this setting "Icon glyphs"
you need to use cssClass for adding extra design button class for the designing
you need to set iconAlign attribute for left or right side of the button text value
You should be able to add an icon to a button without using JavaScript by adding one of these Icon CSS classes to your button. For example, if you wanted to create a button with a calendar icon, your code should look something like this:
<aui:button class="icon-calendar" ... />
I would like to know how Wikipedia does its search field. What I mean by this is two things: Its gradient and its button.
How does it make a gradient in the field? This can be easily done with CSS cross browser at this point, but when you do the IE CSS code, it aliases the text. Wikipedia has a gradient background, but the text is still anti-aliased! How do they do that?
Also, how did they put a clickable search button INSIDE the text field?
Thanks.
It appears that the actual search input has no styling -- meaning no border and a transparent background. The containing div is styled to look like an input field (border and gradient). The clickable button is inside the div but not inside the actual input element.
You could just look at the code. The search box as it appears is only a div element with a border. This div itself has the gradient set via CSS (background-image). As you can see the button element is also not inside the text field.
<div id="simpleSearch">
<input id="searchInput" name="search" type="text" title="Search Wikipedia [f]" accesskey="f" value="" />
<button id="searchButton" type='submit' name='button' title=""><img src="[x]" alt="Filltext" /></button>
</div>