I created this simple code, It it just a button that stays on a "push" state when clicked and returns to normal when clicked again.
THE PROBLEM:
by using float:right the text in the label goes to right, and if i dont set the float it goes to the left by default. but when I put float:center it stays on the left. If someone can help me put the text on the center I would be happy. thank you!
This is my code from jsfiddle
The jQuery Mobile element you want to center is the one nested within your fieldset with the .ui-btn-text class:
#ui-2 .ui-btn-text {
text-align : center;
width : 100%;
}
http://jsfiddle.net/nfGmJ/10/
Related
please see this http://jsfiddle.[net]/Nkkzg/108/ (SO doesn't allow to like to JsFiddle) and write 'Apple' in auto-complete text box. You can see a long string appears and with that page's horizontal scroll bar also appear which is very annoying.
I want to show the full string as a result without setting the width, You can see autocomplete results div shows from the left corner to maximum right depending on string length. How can we show the results in the center of page like input textbox, so that horizontal scroll bar shouldn't appear.
Any help will be highly appreciated.
Thanks and Regards.
According to this article:
jQuery UI Autocomplete Width Not Set Correctly
It looks as though you need to place everything in a container and specify the appendTo property telling it where to put the menu.
You should try to use position:absolute
.ui-autocomplete {
max-height: 200px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
border:1px solid #222;
position:absolute;
}
Live Demo
You could try to put this in your .css file
span input.ui-autocomplete-input {
width: 100%;
}
In that way the autocomplete get's the width you have style it to according to the styleClass that is on the enclosing span tag
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"]
I have buttons in my web app using jQuery Mobile.
When clicked the buttons have the ui-focus class added which displays a blue halo around buttons. The class stays there until another spot on the page is clicked. This happens in firefox, not iPad. I would like that this halo is not displayed.
What must I do for that focus halo not to be displayed at all ?
You can override the default css instead of hacking up the source. Just make sure your css file is after the JQM one.
.ui-focus,
.ui-btn:focus {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none ;
}
I have found that the best way to do this is to give focus back to the page after your buttons are clicked.
$('yourButtons').click(function(){
//Do some important stuff
// ....
$.mobile.activePage.focus();
});
Well thats easy, just open your xxx-mobile-theme.css file and find the class ui-focus
and remove the box-shadow property manually
None of the solutions worked for me as I had a custom submit button and used data-role="none" on the button. The :focus event still had the blue glow so this worked for me. I wrapped my form in a div called myform.
.myform button:focus {
outline: 0;
}
In an application I'm developing, I pop up Help in a modal jQueryUI dialog. For the most part, it works beautifully. There is one problem: if you try to use the arrow on the lower right of the dialog to scroll the help text, you can't, because it is in the same place as the mouse-drag resize for the dialog.
I realize this would not happen if I used the jQueryUI dialog "button" option to add a "Close" button at the bottom of the dialog, but that would be inconsistent with our style elsewhere in the application.
Anyone know a reasonable way around this? Ideally, I'd like something that would give me a small non-scrolled div at the bottom of this dialog, without affecting other dialogs, so that the mouse-drag resize would fall lower on the screen than the down-arrow.
Adding a bottom padding to the ui-dialog class in your jquery-ui.xxxx.css should result in the behavior you want:
.ui-dialog {
... Existing CSS...
padding-bottom: 15px !important;
}
I am trying to put auto height and width to modal dialog box (provided by jQuery UI). But some how the position of my dialog is getting disturbed. It is not coming in center. Every time I click on the link to open the dialog box, the dialog opens at different position. Could anybody please suggest how to resolve this issue...
u can main
div
{
margin:0 auto;
}
or
{
margin:auto auto;
}
==========
Othervise u can set a left and top javascript dailog box position set...
thanks
suresh