Change color of a dojo tab pane - dojo

How do I change the color title of a dojo tab pane of a dojo tab container in a xpage under a given condition? Could anyone give me a roadmap on how to change the label's color?

You can do it like this, and hide the style panel based on your condition
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:panel tagName="style">
div.dijitTab:nth-child(1){background-color:red !important}
</xp:panel>
<xp:panel style="padding:30px">
<xe:djTabContainer id="djTabContainer1">
<xe:djTabPane id="djTabPane1" title="Tab1">1</xe:djTabPane>
<xe:djTabPane id="djTabPane2" title="Tab2">2</xe:djTabPane>
</xe:djTabContainer>
</xp:panel>
</xp:view>

Related

Change the background color of textInput highlight (autocomplete) on react-native

How can I change this background color of TextInput when it got highlight from the autoCompleteType that already exists on react native?
like on this image
To customize this autofill bg color, you have to set this at android level.
Create a xml file with the name of your choice, for example autofill_highlight.xml in android/app/src/main/res/drawable
Put this code inside :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#android:color/transparent" />
</shape>
Here, the color set is transparent ("#android:color/transparent"), replace it with your color.
In android/app/src/main/res/values/styles.xml, add this line to your app theme (make sure to provide your own file name if you don't call it autofill_highlight like in my example)
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- ... your other theme customization ... -->
<!-- ADD THE FOLLOWING LINE -->
<item name="android:autofilledHighlight">#drawable/autofill_highlight</item>
</style>
</resources>
Rebuild your application :)

How to change height of Xamarin Shell.TitleView?

I cannot find a way to customize the height parameter of Shell.TitleView
you could try to add android:actionBarSize to your styles.xml
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="MainTheme" parent="MainTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
...
<!-- ********* CHECK HERE ********* -->
<item name="android:actionBarSize">80dp</item>
...
</style>
</resources>
I had put the stacklayout below navigationbar with same backgroundColor as Navigationbar. Than put controls in that stacklayout. It seems to user as Navigation bar height is increased.

React Native: how to change recent apps background title color on Android?

I would like to change the background title color in the recent apps view (when you press the Overview square button on Android) using react-native.
You can see in the image below that the Facebook app has a blue background color, but my Bitcoin FOMO Calculator app has the default gray color.
Thanks
1.Create colors.xml into android/app/src/main/res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Change the color value for your need -->
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
</resources>
2.Modify the styles.xml inside android/app/src/main/res/values/styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
3.The result and more detail about Android Style and Theme:

Xamarin Forms: How to add controls on MasterDetail Tool Bar

I am creating a master detail page in Xamarin Forms. I want to have Menu icon on top left, searcher on the right and another label on the menu bar.
Can some help help me with how I can be done? I added the menu icon. I want help with adding other controls on the toolbar/Menubar/Navigation bar what ever it is called. Its the bar on top of the master detail page.
Code:
<?xml version="1.0" encoding="UTF-8"?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
xmlns:local="clr-namespace:PCL.Core.Views;assembly=PCL.Core"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="PCL.Core.Views.RootPage" MasterBehavior="Popover" >
<MasterDetailPage.Master>
<local:MasterPage/>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage BarBackgroundColor="Maroon" >
<x:Arguments >
<local:DetailPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Thanks.
If you talking about this kind of controls as on image than:
"Hamburger menu" image you set in MasterDetail page;
Icons (GPS and DATA on image) - are ToolbarItem's that you need to add to Detail Page
There is plenty of examples available:
https://forums.xamarin.com/discussion/17339/navigationpage-and-toolbaritems
https://forums.xamarin.com/discussion/17351/making-a-toolbar

gridpane resize

I want a gridpane layout as in the attached image. Anyone know how to this or am I using the wrong layout?
You can control how different rows and columns in a GridPane grow using column and row constraints.
The way to do this is to set the hgrow property of the first column to ALWAYS, and the vgrow property of the first row to ALWAYS - this means the top left cell will always expand. You can either set the other cells to fixed widths/heights, or otherwise they will expand to fit their contents and no more.
I've included an FXML example with the GridPane inside an AnchorPane, and anchored to the top, left bottom and right of the AnchorPane. This means that the GridPane will grow to fill the parent AnchorPane:
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml">
<children>
<GridPane AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<columnConstraints>
<ColumnConstraints hgrow="ALWAYS" />
<ColumnConstraints prefWidth="150" />
</columnConstraints>
<rowConstraints>
<RowConstraints vgrow="ALWAYS" />
<RowConstraints prefHeight="150" />
</rowConstraints>
</GridPane>
</children>
</AnchorPane>
This results in the layout shown here, and expands to fill the parent pane:
Turns out what I am trying to do requires AnchorPane and GridPane.