is there any way that a bootstrap success button will look like same as a success button but it will be inactive.
The problem is when i make the success button inactive it change the color of a success button, looks fade, so it doesn't fullfill the requirement of a success button.
Anyone knows how make an success button inactive.
Your button :
<button type="submit" class="btn btn-success" disabled>Save changes</button>
Your css :
.btn[disabled]{
opacity: .65; //Comment this
}
You can do this by overriding the Bootstrap CSS:
.btn-success.disabled, .btn-success[disabled] {
opacity: 1;
}
The original value is .65, which makes the button greyed out.
But this way, all success buttons will look the same. Which is confusing for the user, and this is bad from an UX standpoint.
Related
I would like to disable the button animation on the click. As can be seen here, when clicking on the button, the button moves. Is there an easy way to disable this?
<Button styles={{ root: { ':active': { transform: 'none' } } }}>test</Button>
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
I have a series of Material UI buttons as such:
<Button className={classes.button}>Edit</Button>
<Button className={classes.button}>Duplicate</Button>
<hr />
<Button className={classes.button} color="secondary">
Remove
</Button>
I've given them a class that simply displays them as block eg:
button: {
display: 'block',
},
They work fine but there seems to be a setting where the smaller Edit button has extra padding on it because it has less text in the name:
If I add more text it corrects it:
Would anyone know how to fix this? If there is a setting somewhere?
The problem is with the min-width property which forces that "padding". Try just adding min-width: 'unset' to your button class.
There is a live example
https://codesandbox.io/embed/naughty-galois-bc0sz?fontsize=14&hidenavigation=1&theme=dark
I'm using sidemenu template.
I have toggle (true= online, false= offline) in the left menu,
while the button (true= online, false= offline) in the other html.
What I'm trying to do is, if the user turn on the toggle 'leftMenu.html', it will be true, then the button in 'page1.html' also change into true.
Here is my code for toggle in my left menu (leftMenu.html)
<span ng-controller="toggleCtrl">
<p ng-bind=toggleColor></p>
<ion-toggle ng-checked=toggleColor ng-click="one()" toggle-class="toggle-calm">
Airplane Mode
</ion-toggle>
</span>
Here is my code for button in the other .html (page1.html)
<button class="btn btn-default" ng-click="one()" ng-class="{'on': toggleColor, 'of': !toggleColor}">on</button>
<button class="btn btn-default" ng-click="one()" ng-class="{'on': !toggleColor, 'of': toggleColor}" >off</button>
Here is my js (app.js). Both HTML used the same controller 'toggleCtrl'
.controller('toggleCtrl', function($scope) {
$scope.toggleColor = true;
$scope.one = function(){
$scope.toggleColor = !$scope.toggleColor;
}
})
Already implement ng-bind, but it didn't worked in other HTML. It only worked in the same HTML.
Here is my codePen http://codepen.io/aishahismail/pen/pgPEoJ
According to your scenario use $rootScope instead of $scope variable and issue will be solved.
Just change your controller to the following and issue will be solved I have checked the same in your code pen.
.controller('toggleCtrl', function($scope,$rootScope) {
$rootScope.toggleColor = true;
$scope.one = function(){
$rootScope.toggleColor = !$rootScope.toggleColor;
}
});
Hope issue is resolved.
I noticed that on Iphone my button states are acting a little funny.
here's what's set up:
<button class="button follow">follow</button>
<button class="button unfollow" style>unfollow</button>
css:
.button {
background: green;
}
.button:hover, .button:active {
red;
}
when the buttons are clicked they perform an ajax function and alternate. I.E. if follow is showing and i click follow the ajax call is made and follow is hidden and unfollow is shown and vice versa.
My conundrum:
In mobile when I click a button the buttons swap, but the new button is rendered in it's active state (i.e. the background is red).
any idea on how to make sure the button does not get rendered in it's hovered/active state?