I'm using Mobiscroll 2.0.3. The datepicker view gives ok button on the left and cancel button on the right. Can I exchange the position, like the cancel button on the left and set button on the right? Because I have ok/cancel buttons placed in the opposite way to Moviscroll on the site. Users would get confused if the button positions are different at each.
You should be able to do that just using CSS and overriding the styles. I did it for the scroll-wheel view but the idea is the same (also note that that this was for mobiscroll 1.5.3 so the the markup and classes may have changed)
/* overide stlyes for mobi date/time picker */
.dwb-c
{
float:left;
margin-bottom:12px;
}
.dwb-s
{
float:right;
margin-bottom:12px;
}
I know it's late but if someone try to google it, just try this https://docs.mobiscroll.com/jquery/datetime#opt-buttons
You can set an array of buttons to display and you can use string names if you wanna show default buttons. So if you wanna change direction just set buttons like this:
buttons: ["cancel", "set"]
Related
Antd Button
The following code comes from the antd document
import { Button } from 'antd';
ReactDOM.render(
<div>
<Button>Default</Button>
<Button type="dashed">Dashed</Button>
<Button type="danger">Danger</Button>
</div>,
mountNode,
);
Like the default Button, Dashed Button, when you click, you'll have a highlight and border shadow effect.But I want Button to revert to the default state after clicking, rather than clicking elsewhere before it becomes the default state.
This is what happens when I set up the Uploade's click button, which keeps me clicking (highlighted and bordered) when I upload the file successfully or fails, which makes people look a little unusual.Although this detail is acceptable to most people, it still feels a little strange.
I have thought about using the Dragger component of Upload, which can meet my needs on the display. But I want to automatically hide the upload button when the upload content meets the requirements, and Dragger seems to be unsatisfied. So I chose to use the Upload component. After the condition is met, the content in the Upload is made blank, and the hidden effect is achieved. The above situation will occur in the middle of the Button.
I looked at Button's API
and didn't find an action like reset.
Here is my example code. When you click on the Button component, the highlight will not disappear. When you click on the Button upload component, the highlight will not disappear after uploading the file. After clicking on the Dragger component and uploading the file, the highlighting disappears automatically.
Whether there is a good action to reset the Button style.
If you know thank you for answering.Thank you.
You need to customise ant-btn class like so:
.ant-btn:focus {
color: inherit !important;
border: 1px solid rgb(217, 217, 217);
}
Here is the codepen
I have a link button with jQuery mobile.
I want to be able to set it to be constantly pressed or unpressed.
I tried this code for pressed:
$(this).css('background-color', '#e0e0e0');
and this code for unpressed:
$(this).css('background-color', '#f6f6f6');
But when hovering over the unpressed button it does not highlight anymore.
So I tried:
$(this).addClass('ui-button-active');
But the button gets a blue color and I want dark gray color.
Any suggestions?
In jQuery Mobile 1.4.2 CSS you can see that there are button styles for normal/hover/active states (for each theme), and an active style that changes the color of the button (to blue, in your case).
To simulate a "constantly pressed" button you have to add a class for each theme (a and b) based on the button :active class, and override background color:
.button-pressed-a { background-color: #e8e8e8 !important; }
.button-pressed-b { background-color: #404040 !important; }
Then, in your script, you can toggle the "pressed" state with:
$("#button").toggleClass('button-pressed-a');
Have you been to themeroller? There you can try out different styles.
Adding a Custom Theme
Another good way to customize a jQuery Mobile button is adding a custom theme.
<a data-role="button" data-theme="my-site">Button</a>
That will give you more control over the different elements and states of the button. For instance, you can target different states of the button in CSS by writing the code for the class associated with your custom theme name (they are automatically added to the button):
.ui-btn-up-my-site { /* your code here */ }
.ui-btn-hover-my-site { /* your code here */ }
.ui-btn-down-my-site { /* your code here */ }
Keep in mind that the default buttons are made out of borders, shadows, and of course the background gradient. In addition to this, there are other HTML elements inside the button that are automatically generated by the framework. Depending on what exactly you want to customize you might need to target other classes within the button (i.e. ui-icon, ui-btn-text, ui-btn-inner, etc).
Otherwise I could recommend you this site
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/
I am extremely new to Vaadin, and I don't know all controls, I tried to google but didn't find type of control. My question is which is control visible on this link
http://demo.vaadin.com/sampler/#foundation/cssinject
which is used for navigation (left and right arrow buttons on left and right side of screen which you press to change content in middle or something like this doesn't exist in vaadin by default and this is in jquery ?) ?
I need to implement this, to change content on click, to allow user to iterate through shopping cart like this.
They are probably just buttons. Imagine 3 columns Button | Content | Button
Button.onclick -> Load Content
I use this carousel add-on which does that. Buttons are bigger but can be changed using css.
It has a nice transition effect, sliding left and right.
I am writing a script using jQueryUI's button http://jqueryui.com/dialog/#modal-form.
The button is pretty fancy looking.
Now, when I tried to use jQuery to change the display name of the button:
$('#signin').text("new name");
The Button revert to the original style of the browser, with no padding and etc. I don't know why change of style happens when I just change the display name of the button. Please suggest me a way to fix it.
To change button text use this :
$('#btnId').val('new-text');
I figured out how. I used a span tag around the display name and just change text of that span tag.
how can I animate only a part of an element?
I show/hide a div using jquery-ui's show method but I'd like to start/end the animation from/to a given height of the element.
My dev website can be seen here (link removed). When clicking on the 'Contact' button the contact page shows up or hides if it's already open. Since I couldn't find how to starts my animation from a given height I added a fixed button when it's closed, but when the contact button of the contact page overlaps the fixed button when it's closing...
Any help welcome!
looking for something like this??
http://jsfiddle.net/rlemon/F6Efp/8/
You can also add any fade or whatever effects. This is using a single button to animate both open and close. You could also attach a attribute to the button tag to define it's current state.