here is my image of my gridpanel :
just look at the column curativeTask, here I modified the image plus "+" by css:
.curative-task >:first-child >.x-column-header-trigger{
display:block;
background-image: url('../../resources/images/icon_plus.gif');
}
It will be displayed even the user not passed the mouse over it by using "display:block",
Now my probleme is : if I want to clik on this icon I want to do other things but if I cliked on it it show me the menu like this :
In this case I want to elemenate to show this menu and do other things. I done menuDisable:true but the icon it won't be displayed even I made "display:block".
So how I Do this else where is others idea ?
http://i.stack.imgur.com/fRhy8.png
Thanks.
Related
I am using the CommandBar Component to display links. (The buttons are href links).
I want to remove the underline from buttons when hover. Is it possible? enter image description here
https://developer.microsoft.com/en-us/fluentui#/controls/web/commandbar
If you want to remove the underline of a button when hover, maybe you can do something like this
button: hover{
text-decoration: none;
}
Let me know if that worked for you
I have some radio buttons that need text descriptions for each choice so users know what they are choosing.
I would like to add an input field in the radio buttons options for each radio button option that can accept HTML. This then needs to be displayed within each radio list item. I've tried simply adding the details to a HTML area underneath, but this is not suitable for mobile screens as the details are independant from the radio choices and so do not appear under each radio when the screen is re-sized.
Have you considered including the description inside the Radio Button label? If you configure each choice label like so:
<div><span>First Choice</span><span>And this is the description.</div>
You could style it with the following CSS:
.ginput_container_radio input {
vertical-align: bottom;
}
.ginput_container_radio label span {
display: block;
}
.ginput_container_radio label span:nth-child(2) {
opacity: 0.6;
font-size: 0.9em;
}
And it'd look something like this:
I have just started with Dojo widgets. Recently, I did this Dijit Horizontal Slider Sample,and I have been wondering how to make a tooltip follow the slider handle with the current slider value as the tooltip content.
I have tried the same but am facing two issues:
One, the tooltip appears at the end of the slider rather than constantly hovering on the slider handle.
Two, the tooltip displays a value only when I stop sliding rather than changing seamlessly.
How to overcome these?
If you want the tooltip to move with the slider, you have to find a way to open it from the slider handle, not from the entire horizontal slider widget. I do not know if the actual slider you move with the mouse is it's own widget or not. From the declarative sample online the HTML for the handle looks like this
<div data-dojo-attach-point="sliderHandle,focusNode" class="dijitSliderImageHandle dijitSliderImageHandleH" data-dojo-attach-event="press:_onHandleClick" role="slider" aria-valuemin="-10" aria-valuemax="10" tabindex="0" aria-valuenow="4" style="position: absolute;"></div>
So you can try something like the following, if you can get a reference to the sliderHandle object.
/*
* Create the tooltip dialog that you want to show (I use tooltip dialog,
* but you can do the same with basic tooltip)
*/
var myTooltipDialogbase = new ttdialog({
id: 'myTooltipDialogBase',
style: "width: 275px;"
});
Then in your event handler (in this example right mouse click) you open the popup
/**
* On right mouse click, opens the tooltip dialog
*/
on(sliderHandle, 'contextmenu', function (event) {
popup.open({
parent: sliderHandle,
popup: myTooltipDialogbase,
around: sliderHandle.domNode
});
});
EDIT:
For your second question, you can use the slider property onChange() to do something each time the value of the slider changes. You must set intermediateChanges=true so onChange is called when sliding. In your case, in onChange(), if you can get a reference to the tooltip, then change the value of one of the tooltip objects for every value change of the slider.
I have created a nested list. When the text of the selected item is quite long than back button overlaps the toolbar title.
Is there any way to align toolbar text to right or set font size??
Any help is appreciated.
You can use only "Back" (or something else) for the back button. You just need to add this config in your nested list: useTitleAsBackText: false (It is true by default).
Else, you can reduce the font size for both button and toolbar title in your CSS file. Like this:
.my-nested-list .x-toolbar .x-button-label,
.my-nested-list .x-toolbar .x-title {
font-size: 13px;
}
I have a simple dojo text box and a value picker. I want to disable this field for manual entry so that value picker should be used only.
Normally, I can disable the field with dojo attribute, but it greys out the field which is confusing for the user.
<xe:djTextBox id="dep" value="#{viewScope.Department}">
<xe:this.dojoAttributes>
<xp:dojoAttribute name="readonly" value="true"></xp:dojoAttribute>
</xe:this.dojoAttributes>
</xe:djTextBox>
<xe:valuePicker id="valuePicker1" for="dep" dialogTitle="Select the department">
<xe:this.dataProvider>
<xe:simpleValuePicker valueListSeparator=",">
<xe:this.valueList><![CDATA[#{javascript:#DbColumn("", "(ActiveDepartments)", 1)||""}]]></xe:this.valueList>
</xe:simpleValuePicker>
</xe:this.dataProvider>
</xe:valuePicker>
Any method to achieve this without clientside javascript tricks?
You can change the color of the text by overriding the following CSS:
.dijitTextBoxReadOnly, .dijitTextBoxDisabled {
color: gray;
}
You probably want to set color to black in order for the field not to look disabled :-)