I know that inputNumberSlider in richfaces allow you to increase values with a slider also by an indicator. Is it possible to change the indicator with an other shape, for example square or circle?.
I saw that there are many properties to change aspect, like, for example, several style properties to change colors,width, to handling input, steps and other, but I didn't find anything about this.
Here are some examples:
<rich:inputNumberSlider value="50" showInput="false" enableManualInput="false" showBoundaryValues="false" showTooltip="false"/>
Without boundary values and without manual input
<rich:inputNumberSlider maxValue="100" step="2" value="0" width="6" showArrows="true" showTooltip="false" />
A disabled inputNumberSlider example:
<rich:inputNumberSlider width="100" maxValue="200" step="1" showArrows="true" showTooltip="false" disabled="true" value="0" />
The icon is not directly customizable but you can use handleClass:
.myHandleClass {
background-image: url('my/image.gif');
}
<rich:inputNumberSlider handleClass="myHandleClass" … />
Related
I have a simple SAP UI5 application, where the user open an add dialog pop-up,
I want to change the style of the dialog, the xml of the dialog is something like this:
<core:FragmentDefinition xmlns="sap.m" xmlns:core ="sap.ui.core" xmlns:html="http://www.w3.org/1999/xhtml>"
<Dialog title="Add" class="sapUiPopupWithPadding">
<Input type="Text"/>
<buttons class="buttonsStyle">
<Button text="Save"/>
<Button text="Cancel"/>
</buttons>
</Dialog>
</core:FragmentDefinition>
The CSS:
.buttonsStyle {
background-color: #d8d8d8 !important;
}
I always get the same result as the picture no matter how I change the CSS, I want to change the color and size of the dialog title (Add) and the background color and font color of the buttons but I get no result by trying and searching.
Thank you.
For buttons you should favor the type attribute over custom CSS ;)
See the API reference & samples for ButtonType
https://sapui5.hana.ondemand.com/#/api/sap.m.Button%23controlProperties
https://sapui5.hana.ondemand.com/#/api/sap.m.ButtonType
https://sapui5.hana.ondemand.com/#/entity/sap.m.Button/sample/sap.m.sample.Button
For the Dialog, you can use the customHeader aggregation and use some customizable component in place of the title.
https://sapui5.hana.ondemand.com/#/api/sap.m.Dialog%23aggregations
Edit:
Bug report Bug Report on github
Situation:
I am writing an app with the ObjectPageLayout.
In the header content I have a sap.m.Select and a sap.m.MultiComboBox with a reset button each.
I want to have them in the header, since they filter all Diagramms and Tabels of the diffrent tabs.
I set my css class as it is discribed in the Workthrough.
When the style is set to compact mode due to the device type everything is fine.
Problem:
When the css class is cozy the select still has the compact style.
The MultiComboBox and buttons and everything else take the cozy style.
--> it looks really bad
Does anyone have an idea, why the select doesn't have the cozy style aswell?
I even tryed hard setting the css style in the XML, but it doesn't work.
If I change the css class of the MultiComboBox or the buttons it works,
but I dont want to always have everything on compact just because the select cannot go on cozy...
To replicate the problem you can just create a new project (UI5 Version 1.71) in the webide and replace the view with mine:
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns="sap.uxap"
xmlns:layout="sap.ui.layout"
xmlns:m="sap.m"
xmlns:f="sap.f"
controllerName="TEST.TestingSelects.controller.Home"
height="100%"
>
<ObjectPageLayout
id="ObjectPageLayout"
enableLazyLoading="true"
useIconTabBar="true"
showTitleInHeaderContent="false"
>
<headerTitle>
<ObjectPageHeader
id="headerForTest"
objectTitle="{i18n>home.title}"
>
</ObjectPageHeader>
</headerTitle>
<headerContent>
<m:VBox>
<m:HBox>
<m:Select
id="idStoreSelect"
selectedKey="{homeModel>/storeSelectKey}"
change="onStoreSelectChange"
items=""
>
<core:Item
key=""
text=""
/>
</m:Select>
<m:Button
icon="sap-icon://redo"
press="onResetStoreButtonPress"
tooltip="{i18n>home.store.redo.tooltip}"
type="Transparent"
/>
</m:HBox>
<m:HBox>
<m:MultiComboBox
id="idCatMCB"
selectedKeys=""
selectionChange="onCatMBCChange"
items=""
>
<core:Item
key=""
text=""
/>
</m:MultiComboBox>
<m:Button
icon="sap-icon://redo"
press="onResetCatButtonPress"
tooltip="{i18n>home.cat.redo.tooltip}"
type="Transparent"
/>
</m:HBox>
</m:VBox>
</headerContent>
<sections>
<ObjectPageSection title="2014 Goals Plan">
<subSections>
<ObjectPageSubSection title=" ">
<blocks>
<m:Button
icon="sap-icon://redo"
press="onResetCatButtonPress"
tooltip="{i18n>home.cat.redo.tooltip}"
type="Transparent"
/>
</blocks>
</ObjectPageSubSection>
</subSections>
</ObjectPageSection>
<ObjectPageSection title="Personal">
<subSections>
<ObjectPageSubSection title="Connect">
<blocks>
<m:Button
icon="sap-icon://redo"
press="onResetCatButtonPress"
tooltip="{i18n>home.cat.redo.tooltip}"
type="Transparent"
/>
</blocks>
</ObjectPageSubSection>
<ObjectPageSubSection id="paymentSubSection" title="Payment information">
<blocks>
<m:Button
icon="sap-icon://redo"
press="onResetCatButtonPress"
tooltip="{i18n>home.cat.redo.tooltip}"
type="Transparent"
/>
</blocks>
</ObjectPageSubSection>
</subSections>
</ObjectPageSection>
</sections>
</ObjectPageLayout>
</mvc:View>
Code of select when hard setting css style:
<m:Select
id="idStoreSelect"
class="sapUiSizeCozy"
selectedKey="{homeModel>/storeSelectKey}"
change="onStoreSelectChange"
items=""
>
<core:Item
key=""
text=""
/>
</m:Select>
SAP fixed the UI5 bug with the version 1.95 (commit 4c7fffe).
Here you can see, that the sap.m.Select no longer has its own height set in the ObjectPageHeaderContent but applies the height according to the density class:
UI5 ≥ 1.95
UI5 ≤ 1.94
Screenshots from: https://plnkr.co/edit/gTxIx9BvTChZovBZ?preview
To fix the width of the Select you can add the aggregation layoutData
<m:layoutData>
<m:FlexItemData growFactor="1" />
</m:layoutData>
To fix the height of the Button you need to set the content density (as described in the official Walkthrough (Step 37)).
Basically you provide a method in your Component.js which returns the correct density (and don't forget to import "sap/ui/Device" at the top!)
getContentDensityClass : function () {
if (!this._sContentDensityClass) {
if (!Device.support.touch) {
this._sContentDensityClass = "sapUiSizeCompact";
} else {
this._sContentDensityClass = "sapUiSizeCozy";
}
}
return this._sContentDensityClass;
}
Then in the controller of your root view (defined in manifest.json > sap.ui5 > rootView) you can call this method
onInit: function() {
this.getView().addStyleClass(
this.getOwnerComponent().getContentDensityClass()
);
}
I put together a small sample:
https://plnkr.co/edit/h1JZiyYrWLmuck46
I want to always show up/down arrows for input "number" field. Is this possible? So far I haven't had any luck...
http://jsfiddle.net/oneeezy/qunbnL6u/
HTML:
<input type="number" />
CSS:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: "Always Show Up/Down Arrows";
}
You can achieve this (in Chrome at least) by using the Opacity property:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
As stated above, this will likely only work in Chrome. So be careful using this code in the wild without a fallback for other browsers.
I tried this and it worked
input[type=number]::-webkit-inner-spin-button {
opacity: 1
}
</style>
<input type="number" value="1" min="1" max="999">
Found Here
If you're trying to get the same appearance across different browsers you may be forced to use a plugin/widget or build one yourself, the main browsers all seem to implement number spinners differently.
Try jQuery UI's spinner widget it offers a lot more versatility when it comes to styling.
Working Example
<p>
<label for="spinner">Select a value:</label>
<input id="spinner" name="value" />
</p>
$("#spinner").spinner();
I tried this and it's working
input[type=number]::-webkit-inner-spin-button {
opacity: 1
}
If you don't mind the focus on your input, do
document.getElementById(<id>).focus();
I'm using the DateTimePicker in the ui.xml as follows:
<b:Label text="{messages.gwt_ui_from}" />
<b.date:DateTimePicker styleName="btn-block"
ui:field="dtpFrom" format="dd.MM.yyyy" minView="MONTH"
maxView="YEAR" autoClose="true" hasKeyboardNavigation="true" highlightToday="true"/>
<b:Label text="{messages.gwt_ui_to}" />
<b.date:DateTimePicker styleName="btn-block"
ui:field="dtpTo" format="dd.MM.yyyy" minView="MONTH"
maxView="YEAR" autoClose="true" hasKeyboardNavigation="true" highlightToday="true"/>
As you can see, the style is set to "btn-block".
But the result is the following picture:
How can I keep the style and still get the arrows back?
Thanks very much for any help!
Aurel
Hello everyone having the same problem I've had
The solution in my case was quite simple (after having searched for three days...)
<b.date:DateTimePicker styleName="btn-block form-control"
b:id="dtpToId" ui:field="dtpTo" format="dd.MM.yyyy"
minView="MONTH" maxView="YEAR" autoClose="true"
hasKeyboardNavigation="true" highlightToday="true" />
Just add form-control to the styleName attribute of the DateTimePicker and enjoy the arrows.
Hope this helps someone!
I have a little trouble with tag h:selectOneMenu, I just want to add some background image to option, such as avatar of user.
Follow styling options in h:selectOneMenu - by balusC
I had tried to render options with its own style css.
<h:selectOneMenu id="dropListUser"
value="#{myController.myUserObject.userid}">
<f:attribute name="avatar" value="#{true}"></f:attribute>
<f:attribute name="key" value="somthing"></f:attribute>
<f:attribute name="height" value="32"></f:attribute>
<f:attribute name="width" value="32"></f:attribute>
<f:selectItems value="#{myController.listOfUsers}" var="item" itemLabel="#{item.username}" itemValue="#{item.userid}"/>
</h:selectOneMenu>
It work great with height, width and key, but with avatar(or any attribute contains value with #{} expression) server bean could not get it.
Try to printout all key name:
Iterator itr = component.getAttributes().keySet().iterator();
while(itr.hasNext()){
System.out.println(itr.next().toString());
}
there is no key with name avatar :
--------------------------------
height
javax.faces.component.VIEW_LOCATION_KEY
com.sun.faces.facelets.MARK_ID
key
width
width: 32 height: 32 style null?: true
--------------------------------
ps: by the way,Is there any one know how to create custom taglib that extends h:selectOneMenu :-?
ps2: In the fact, If I could get myController.listOfUsers
in <f:selectItems value="#{myController.listOfUsers}" var="item" itemLabel="#{item.username}" itemValue="#{item.userid}"/> in my custom render bean, it could be better
Woof, I don't know why or how, but when try print out all of key names from component.getAttributes() also component.getAttributes().containsKey("avatar") return that avatar is not exist, BUT I really can get avatar value, my trouble was solved ^^" just remove code that check the key exist or not