I'm using Fluent UI's TeachingBubble component. I want it to have one button, which should be centered. How can that be done? I'm unable to move it from the bottom right corner.
Current code:
<TeachingBubble
headline="Welcome"
primaryButtonProps={{
children: "Next",
onClick: () => alert("Primary button pressed!"),
}}
>
This is some content.
</TeachingBubble>
This outputs:
What should be added to this code so that the primary button is centered (at the red cross I marked)?
Button is inside footer part of TeachingBubble, so the style of footer should be changed:
<TeachingBubble
headline="Welcome"
primaryButtonProps={{
children: "Next",
onClick: () => alert("Primary button pressed!"),
}}
styles={{
footer: {
display: "flex",
justifyContent: "center",
},
}}
>
Some text
</TeachingBubble>
That renders as:
Related
Using DefaultButton currently. This remains selected when clicked, which property can be used to revoke selection once clicked.
Alternatively, is there any styling that needs to be done for selection?
You can use DefaultButton checked property for that scenario and control it with onClick event:
const [isButtonChecked, setIsButtonChecked] = React.useState(false);
<DefaultButton
checked={isButtonChecked}
onClick={() => {
setIsButtonChecked(!isButtonChecked);
}}
styles={{
rootChecked: {
backgroundColor: '#f00',
color: '#fff',
}
}}
>
Default Button
</DefaultButton>
Use styles property to modify button styles when button state is checked: rootChecked, rootCheckedHovered etc.
Codepen example.
in React-Admin I want to limit the width of the columns that show edit, show buttons in the datagrid
I know I can use styles to set the width of other cells like TextFields, but cant find a way to do this with buttons
enter image description here
Inside Datagrid you can use the headerClassName cellClassName props to style both the cell in the header row and in body rows as described in the docs under section Datagrid/CSS-Api
<ShowButton
headerClassName={classes.hiddenOnSmallScreens}
cellClassName={classes.hiddenOnSmallScreens}
/>
*EDIT
Obviously this approach doesn't work when using typescript, probably a bug - you can work around it in this way:
const usePostListActionToolbarStyles = makeStyles({
toolbar: {
alignItems: "center",
display: "flex",
marginTop: -1,
marginBottom: -1
}
});
const PostListActionToolbar = ({ children, ...props }) => {
const classes = usePostListActionToolbarStyles();
return (
<div className={classes.toolbar}>
{Children.map(children, (button) => cloneElement(button, props))}
</div>
);
};
and then inside your Datagrid:
<Datagrid>
//...fields
<PostListActionToolbar>
<ShowButton/>
<EditButton/>
</PostListActionToolbar>
</Datagrid>
I am trying desperately to change the color used to underline the selected tab in the NativeBase element Tab https://docs.nativebase.io/Components.html#tabs-def-headref . So fare I have been able to change the text color of the selected element to red but there seems to be no way of doing it for the underlings blue bar.
here is The Vue native template which can use every react native element.
<template>
<nb-container :style="{flex:1, backgroundColor: '#fff'}">
<header v-bind:title="title" ></header>
<nb-tabs>
<nb-tab :heading="heading1" :textStyle="textStyle" :activeTextStyle="activeTextStyle" :tabStyle="tabStyle" :activeTabStyle="activeTabStyle">
<actualitesVue v-bind:navigation= "navigation" > </actualitesVue>
</nb-tab>
<nb-tab heading="Dossiers" :textStyle="textStyle" :activeTextStyle="activeTextStyle" :tabStyle="tabStyle" :activeTabStyle="activeTabStyle">
<dossiersVue v-bind:navigation= "navigation" > </dossiersVue>
</nb-tab>
</nb-tabs>
</nb-container>
here is the prop
data: function () {
return {
heading1: "Actualités",
title : "INFOS",
tabStyle : {backgroundColor: "white"},
activeTabStyle : {backgroundColor: "white"},
textStyle : {color: "rgba(189,40,26,0.6)"},
activeTextStyle : {color : "rgba(189,40,26,1)", fontSize: 20 },
}
},
And the result is close to this. My point is about the blue line:
Simply you can change :
<Tabs tabBarUnderlineStyle={{ backgroundColor: "red" }}>
....
</Tabs>
i need develop a dropdown like, for example, whatsapp.
This is my code trying to do it with ToolbarAndroid
<Icon.ToolbarAndroid
titleColor={'#000000'}
style={{
height: 56,
alignSelf: 'stretch',
width: 20
}}
iconColor={"#fff"}
iconSize={26}
rtl={true}
navIconName={"more-vert"}
contentInsetStart={50}
actions={[{title: 'Settings', show: 'always'}, {title: 'Settings 2', show: 'always'}]} />
I dont know if ToolbarAndroid is the component what i need, maybe if i know the real name of this style of menu i can be more accurate in google searchs.
Here an image of the menu:
I need do a menu like this (whatsapp)
just change it here:
actions={[{title: 'Settings', show: 'never'}, {title: 'Settings 2', show: 'never'}]} />
This is called overflow menu in android:
Action "Show:"
when to show this action as an icon or hide it in the overflow menu:
always, ifRoom or never
if you set never, it will hide in overflow menu icon at the right side of toolbar.
For more information see this ToolbarAndroid
I'm using Smartclient, v 8.2 (LGPL).
I have a MenuButton that opens a Menu. The button is aligned right. the problem is that when the menu is displayed; the left side of the menu is aligned with the left side of the button, and there's no space for rendering the menu. As a result, when I click the menu button, the page becomes wider (horizontal scrollbar appears) in order to make space for rendering the menu. when the menu is hidden, the page returns to normal size.
is there any way to avoid this? What I would like is that the right side of the menu is aligned with the right side of the button.
I tried using the align property of the menu, but no matter what value I used, I always see the same behavior. Also I set overflow= "hidden", but still same problem.
this is small test case:
isc.Menu.create({
ID: "menu",
autoDraw: false,
showShadow: true,
shadowDepth: 10,
overflow: "hidden",
align: "right",
data: [
{title: "New", keyTitle: "Ctrl+N", icon: "icons/16/document_plain_new.png"},
{title: "Open", keyTitle: "Ctrl+O", icon: "icons/16/folder_out.png"},
{isSeparator: true},
{title: "Save", keyTitle: "Ctrl+S", icon: "icons/16/disk_blue.png"},
{title: "Save As", icon: "icons/16/save_as.png"}
]
});
isc.MenuButton.create({
ID: "menuButton",
autoDraw: false,
title: "File",
width: 100,
menu: menu
});
isc.HLayout.create({
width: "100%",
members: [
isc.Canvas.create({
width: "*",
height: 24,
backgroundColor: "lightgray"
}),
menuButton
]
})
I found the problem: if showShadow is set to true, then I see the issue described in the question. removing that attribute (default is false) solved the problem: menu is aligned to the right, and no scrollbars appear.