On my jQuery Mobile page, i'm using a horizontal control group for some buttons.
But in some languages the text within these buttons is too long.
Instead of wrapping the text within each button, the buttons themselves wrap onto the next line.
this is the base code:
<div data-role="controlgroup" data-type="horizontal">
short button
really really really insanely long button is really really insanely long. No really, who makes buttons this big?
</div>
and with this css, we convince it to wrap inside the buttons. Otherwise the text is truncated with an ellipsis
.ui-btn-inner{
white-space: normal !important;
}
On the third page of this fiddle the problem is demonstrated
http://jsfiddle.net/koesper/R8Kwe/
Anyone have any ideas how I might tackle this?
Thanks in advance,
Casper
ps. Inspiration for the original fix came from Tosh in Jquery Mobile Multiline Button
You could set widths for the links in your control-group:
.ui-page .ui-content .ui-controlgroup a {
width : 49%;
}
This will keep them on the same line. Here is a demo: http://jsfiddle.net/R8Kwe/6/
Also, just to be thorough, the white-space : normal actually needs to be applied to the .ui-btn-text element which is a child of the .ui-btn-inner element (so it still receives the inherited value).
Trim your long buttons - that's a usability issue. If you have action buttons named that long seems like that just defeats the purpose of an action? Other than that I wouldn't use controlgroups for something like this. I would use a custom data theme & some grids to house my buttons inline.
Related
Not sure where to look for an answer, but here's my quest:
http://www.mobiliteitsvisie.nl/
On this site I've made a one page parallax, but when scrolling the main text moves underneath the menubar, but the headers (h3 & h4) seem to move over it...
But where would I need to adjust this? In the .css or in the .js file?
Thanks in advance!
Ruud
Since you're problem is with the style you need to make a change to the CSS.
In your case you want to get the menu on top of all other objects. Just give the menu container a large z-index.
Add this to your css file:
header {
z-index: 100;
}
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
Additional question about the same site. When scrolling through the site, the menu-item should change with every slide it passes. At this moment the last clicked menu-item is highlighted, even when scrolling through to the several slides. Is there an easy way to make that work in CSS? Or would that be possible by just adding a jQuery.nav.js to the index.html?
Im using horizontal radio buttons in jQuery mobile:
http://jquerymobile.com/test/docs/forms/radiobuttons/
When you make the fieldset horizontal the style changes and the round 'selected' bit goes away. Can this behavioral be disabled so it users the normal jQuery mobile styling?
Yes, but not in a easy way. This much I can remember. I don't have an example with myself, also don't want to rewrite it again.
First, what you need is a firebug plugin (or something similar) for Firefox or Chrome.
I. Horizontal radiobuttons have a disabled span used for round selection img. Enable it by giving it a display: block-inline (in that case give other div the same property, this will allow them to be in line, in other case they will overlap) or give both of them display: block; a float them to the left (don forget position: relative) .
I am talking about this:
<span class="ui-btn-text">List</span>
<span class="ui-icon ui-icon-radio-off ui-icon-shadow"> </span>
Top one is a text span and bottom one is an icon holder. Bottom one is disabled (display: none;) in case of horizontal group.
II. Second thing, on click/select prevent background color change. This will leave you with horizontal version of vertical radiobutton control group.
Hope this helps.
I am trying to add a horizontal toolbar at he top of my application (uses android webview and jquery mobile) that contains a bunch of buttons (too many to fit across the screen in a single line).
The problem that I am facing is that instead of hiding the extra buttons, they wrap around to the next line. What I would like is for them to hide and be accessible by scrolling them horizontally just like a native ListView would allow me to do.
I have tried to use a ListView to put the buttons in, and pass the button presses to the javascript code by doing loadUrl(), but this causes other issues and is not usable in my case (it automatically hides the soft keyboard).
I have tried the following code (along with this code wrapped in a jquery mobile toolbar):
<ul data-role="controlgroup" data-type="horizontal">
<li>B</li>
<li>I</li>
<li>U</li>
<li>S</li>
<li>ol</li>
<li>ul</li>
<li>in</li>
<li>out</li>
<li>sub</li>
<li>sup</li></ul>
But this just wraps around to the next line.
Try putting the ul in a div, and set the div's width property to a large value, enough to accomodate all the buttons. Then set the overflow property to auto, and you should be good to go.
I just started working with JQM a little while ago. I used the default VS2012 asp.net mobile project to start with. I like how the mobile pages work, but wanted a fixed area at the top of each page that essentially has 3 columns one of which is a logo. I've done that (with a basic table to start with) in the _layout.cshtml, and right below that is where I start the JQM Page layout. This is all working well, and I like how the page transitions happen while keeping a fixed header area at the top.
However, I would like to add a button to my fixed area at the top that is styled similar to the other JQM buttons. This doesn't work because the buttons are not within a valid Page or Header data-role I presume. Is there a way to take advantage of the JQM styles for HTML that is outside of those data-roles?
As an example, I'd like to use the anchor tag for a Log In button and have it styled the same as it is with a gear-icon when it's within a div that has data-role = "header". I'm not sure I have a deep enough understanding to drill down through all the elements that are used in the .css file and was hoping there are other individual classes or something I can take advantage of.
This is the line I am trying to display as a button, but I am only getting text (does work as anchor tag though):
<a data-role="button" data-transition="pop" href="/Vision/Account/Login">Log in</a>
Also, I am using jquery.mobile-1.1.0 and jquery-1.7.2.
You can style any element as a button by calling the jQuery Button Widget on the element:
$('.login-button').button();
The button function also accepts options such as the icon and theme:
$('.login-button').button({
icon: 'gear'
});
See also: http://jquerymobile.com/test/docs/buttons/buttons-options.html
Try adding data-role="button" to your anchor tag.
I'm trying to override the default behavior of list items and buttons in jQuery Mobile, which has text which doesn't fit on one line as hidden overflow.
If you view this on a skinny browser window or iPhone you'll see what I mean: http://m.gizmag.com
I'd like to be able to wrap the text in the h3 and p tags of each list item onto new lines.
Thanks in advance!
Try setting a style of white-space:normal for the elements.
I just did this with an anchor (<a>) element inside a jQuery Mobile listview-styled li, and it worked to wrap the text as I expected. I used Chrome's developer tools to determine where the CSS attributes were coming from and interactively changed them to make it work the way I wanted.
--
Derek
If feasible, enclosing it inside a <div> will also make it wrap. (But finding the affected element and declaring white-space:normal is the more proper solution)
Source: http://forum.jquery.com/topic/list-items-are-truncating-text-is-there-a-way-around-this