With PrimeFaces 12, an Ajax loading status indicator icon is introduced to p:commandButton. See https://github.com/primefaces/primefaces/pull/8302
I don't want to use that have loading status indicator icon to appear in my project, but I can't find an option to disable it. So, how can I disable the Ajax loading status indicator icon?
As you can read in the linked pull request, we've chosen to add a class (ui-state-loading) to the button which triggered the Ajax request. With this class you can fully customize how your button should look while an Ajax request is running. You can easily suppress the indicator to the normal state by applying:
html .ui-state-loading.ui-button-text-only .ui-icon-loading + .ui-button-text {
opacity: inherit;
}
html .ui-state-loading .ui-icon-loading {
display: none;
}
html .ui-state-loading .ui-icon:not(.ui-icon-loading) {
display: inherit;
}
See also:
How do I override default PrimeFaces CSS with custom styles?
If you don't want the button to be disabled during the Ajax request, use the disableOnAjax="false" attribute.
Related
I have used this code:
form .this-class input[type="radio"]
{
position: fixed;
opacity: 0;
pointer-events: none;
}
And the radio button is hidden when I load the page without caching. But when I turn on Litespeed Cache the radio button is shown for a split second before the CSS kicks in. I tried to turn off cache on that specific page where the CSS is supposed to be active, but it ain’t working.
The form which is affected is implemented through a shortcode (Contact Form 7).
Suggestions?
I want user to select a theme which he wants to apply to the document.
So i have created a popup dialog which has multiple themes which are qradiobutton. But I want to display only icons and remove circle from the widget.
I have tried visible:hidden for the radio button but that didn't worked.
If you want to customize QRadioButton with style-sheets I suggest you check the reference documentation: https://doc.qt.io/qt-5/stylesheet-reference.html#qradiobutton-widget
You should also find useful the examples given in Qt documentation as it shows how to replace the check indicator by different images:
QRadioButton::indicator {
width: 13px;
height: 13px;
}
QRadioButton::indicator::unchecked {
image: url(:/images/radiobutton_unchecked.png);
}
QRadioButton::indicator:unchecked:hover {
image: url(:/images/radiobutton_unchecked_hover.png);
}
https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qradiobutton
If you do this yo can just use the indicator to display the icon and leave the QRadioButton label empty.
However, I have to warn you, depending on which QStyle you are using, it could happen that using style-sheets destroys completely the style of a component. A general example is: you are using a style where buttons have round corners, you use style-sheets to change the font of the button and as a result the button does not have round corners anymore. This is caused by incompatibilities between some QStyle and the style-sheet mechanism. If you do not want to make a multi platform app, it might not be an issue as you will use only one style, but if you make an multi platform app, you have to check every possible style you platform can have on the different platforms.
So if you want to have a QRadioButton without indicator and not use style-sheets, you can do it in C++ directly by subclassing QAbstractButton. Just make sure you set your class to be autoExclusive so that is will behave like a radio button.
would you try this? ( visible => visibility )
input[type="radio"] {
visibility: hidden;
}
or
input[type="radio"] {
display: none;
}
I have an Interactive Report with multiple saved reports. For the Primary Report, I want to hide the information bar that indicates highlight filter "Errors Found" is active, as it just takes up space, and the users would not need to disable it:
I used the debugger to get the div class and ID, but I don't know where I can put the CSS to set that ID to hidden; here is the div and ID, and the display: none code I inserted via the debugger to hide that area:
So I want to add to that division/id
style="display: none;"
I don't know how/where to put that code in my page definition to hide that division/ID.
Try to use the class in that div to do this, like
.a-MediaBlock.a-IRR-controlsContainer.a-Collapsible.is-collapsed {
display: none !important;
}
I think ID can change in a update of the application, but you can use id too:
div#R91.._control_panel {
display: none !important;
}
put this code in page properties --> css inline.
I'd like clicking on the element to append the hash to the url and then initiate a postback, but I can only get one or the other to happen.
Clicking on the element with an onserverclick attribute initiates the postback, but doesn't append the hash.
Submit
Clicking on the element without the onserverclick attribute causes the hash to be appended to the url, but no postback occurs.
Submit
My objective is to display another element through the use of the CSS target pseudo selector as soon as the user clicks the element and have that same click initiate a postback. I know JavaScript is the appropriate tool for this task, but it isn't an option.
Here's the element I want to set to visible with the target pseudo selector:
<p class="targetMessage" id="message">Insert text here.</p>
and here are the CSS classes I'm using:
.targetMessage {
display: none;
}
.targetMessage:target {
display: block;
color: red;
}
I've also considered using an html meta element to automatically refresh the page while storing the page's state in session state; causing the page to reload with the message upon the user's click and then refresh automatically a few seconds later to do the actual work, but I'd rather not employ this option.
Your input is appreciated. Thank you!
Because your desired usage of href seems to conflict with how ASP.NET renders the control when onserverclick is defined, I would suggest an alternative approach that doesn't rely on the anchor's href.
If you're open to moving the message in your markup, you can use the sibling selector in conjunction with the :focus pseudo-class to reveal the message when the link is clicked:
.targetMessage {
display: none;
}
.anchorButton:focus + .targetMessage {
display: block;
color: red;
}
Submit
<p class="targetMessage" id="message">Insert text here.</p>
Hope this helps! Let me know if you have any questions.
Currently I am working on RadCalendar. My requirement is Calendar has to be started from current month and we should have only NEXT navigation button. When user navigates to next month, then the PREV navigation icon had to be displayed along with NEXT navigation icon.
How can I achieve this????
For test purpose I created a TelerikStyle.css and placed the below code:
BODY
{
margin: 0px;
padding-left: 0px;
font-size: 32px;
font-family: Arial;
}
.MyRadCalendar .rcTitlebar a.rcPrev
.MyRadCalendar .rcTitlebar a.rcFastPrev,
.MyRadCalendar .rcTitlebar a.rcNext,
.MyRadCalendar .rcTitlebar a.rcFastNext
{
visibility: hidden;
}
And I am creating this Radcalendar dynamically. So I tried to attach to apply this CSS Styles to Radcalender through below way.
_myCalendar.CssFile = "~/stylesheets/TelerikStyle.css";
_myCalendar.TitleStyle.CssClass = "rcTitlebar";
But my navigation buttons are not hiding. So please tell me how to apply CSS Styles for Radcalender dynamically. And How to achieve my above requirement?
Each of the Telerik Skins actually have a minimum height and width setting for the RadCalendar in order to ensure that the visual styles of the control are not broken.
As you can imagine modifying the width and height to arbitrary settings could skew the look and feel of the control quite a bit.
What you can do, however, is either modify one of the existing skins or create your own.
This section http://www.telerik.com/help/aspnet-ajax/calendar-custom-skin.html in their online documentation covers how to change the appearance, and the specific article covers how to create a custom skin.
Thanks
AB