When I place text buttons next to notext buttons in the header, the notext button show up slightly lower than. I've tried setting margin-top and padding-top for ui-btn-icon-notext, but that does not seem to have an effect.
<div data-role="header" class="ui-bar">
...
<div class="ui-btn-right">
Sign In
Home
...
</div>
</div>
Not really sure why it is happening but a quick (and dirty) fix could be like this:
a.custom-class-name-for-no-text-buttons {
top: -2px !important;
}
JSFiddle
http://jsfiddle.net/GG3qE/
Related
can you please tell me how to how header label left side with button on right side .
i found like this
<div data-role="header">
Cancel
<h1>Edit Contact</h1>
Save
But i need like this
My case label on left side and button on right side
You can do like that, DEMO http://jsfiddle.net/yeyene/5kfnT/3/
JQM DOC: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/headers/
Custom header configurations
If you need to create a header that doesn't follow the default configuration, simply wrap your custom styled markup in any container, such as div. The plugin won't apply the automatic button logic to the wrapped content inside the header container so you can write custom styles for laying out the content in your header.
It's also possible to create custom bars without using the header data-role at all. For example, start with any container and add the ui-bar class to apply standard bar padding and add the ui-bar-b class to assign the bar swatch styles from your theme. (The "b" can be any swatch letter.)
<div data-role="header" data-position="fixed">
<div class="ui-block-a"><h3>Header</h3></div>
<div class="ui-block-b"> </div>
<div class="ui-block-c"> </div>
<div class="ui-block-d">
A
B
C
</div>
</div>
You can do it this way, override ui-title and ui-btn-right styles. However, for the second button, give it a custom class in order not to override both button with ui-btn-right. I used custom class .second for the second button.
Demo
CSS - I used .ui-header in order not to change footer style.
.ui-header .ui-title {
margin-left: 2px !important;
text-align: left !important;
width: 150px !important;
}
.second.ui-btn-right {
right: 80px !important
}
HTML
<div data-role="header">
Cancel
<h1>Edit Contact</h1>
Save
</div>
I want to have an image that stick to the bottom center of the screen. I know I can use <div data-role="footer"> to do it. However the footer has a visible horizontal line on top which I want to get rid off. Any idea how to do it?
The easiest way to do this is to use the built-in jQM footer, which has the data-position="fixed" attribute to make it stick to the bottom. I'm unfamiliar with this horizontal line you say the footer has, but it'll be easy to get rid of just by overriding the default jQM stylesheet. You can view/test-edit the CSS styles using Firebug in Firefox, or the built-in developer tools in any browser.
It should look something like this:
.ui-footer {
/* Use !important to ensure the target style will be overridden! */
border: none !important;
}
And the HTML:
... <!-- rest of page -->
<div data-role="footer" data-id="fixedFooter" data-position="fixed" data-tap-toggle="false">
<img src="path/to/image.png" />
</div>
I am developing something in a Right-To-Left (RTL) language and I need the text in the collapsible to be positioned on the right as opposed to the default left.
Here is the code:
<div id="content_c1" data-role="collapsible" data-iconpos="right" align="right">
<h3>Right to Left Text</h3>
<p>Right to Left Content</p>
</div>
<div id="content_c2" data-role="collapsible">
<h3></h3>
<p></p>
</div>
The first collapsible is Right to Left. The data-iconpos="right" nicely movees the icon to the right and the align="right" moves the content in the <p> to the right. But the text shown in <h3> stays on the left.
Thanks for the help in advance.
This is working for me:
.ui-collapsible h3 .ui-btn-inner
{
text-align:right;
}
I'm sure there is a better way but you could try this.
.ui-btn-text{float:right}
Having the same problem...
This one solved it :
.ui-collapsible-heading .ui-btn {
text-align: right;
}
I am experiencing a very odd bug with Chrome 17.0.963.56. Following is a screenshot:
When the page first renders, the Salutation combobox looks fine. However as soon as you check the checkbox above, the weird image appears. Clicking anywhere on the page then causes it to go away. Unchecking the box causes it to appear again. I tried to repro in jsfiddle, but could not.
I found 2 different ways to make this bug go away. The first has to do with the HTML and CSS structure of the combobox:
<div class="field ui-helper-clearfix #Html.IdFor(m => m.Salutation)-field">
<span class="label">
#Html.LabelFor(m => m.Salutation)
</span>
<div class="input">
<div class="combobox">
<div class="text-box input">
#Html.EditorFor(m => m.Salutation)
</div>
<a class="text-box down-arrow">
<img class="text-box down-arrow" alt=""
src="/content/icons/transparent.png">
</a>
<div class="autocomplete-menu">
</div>
</div>
<div class="messages">
<div class="top callout border">
<div class="top callout bg">
</div>
</div>
<span class="validation">
#Html.ValidationMessageFor(m => m.Salutation)
</span>
</div>
</div>
</div>
.combobox .text-box.input {
position: absolute;
left: 0;
right: 20px;
border-right-color: transparent; /* was border-right-width: 0; */
border-right-width: 0;
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
}
Basically, the border comes from a div wrapper around the input element. The input itself has no border. For normal text box wrappers, the border radius is 5px. However for the combobox, I override that CSS value to give the top & bottom right corners a radius of zero. This is to make it blend into the drop-arrow element for the combobox.
When I completely remove the right border on the textbox wrapper (using border-right-width: 0;), the anomaly appears. When I instead keep the right border and give it a transparent background color, the anomaly goes away.
However I also discovered that removing /content/themes/base/jquery.ui.all.css made the problem go away. Trial and error led me to the following line in jquery.ui.theme.css:
.ui-widget :active { outline: none; }
When I remove this line, or change it to .ui-widget:active { outline: none; } (note the absence of the space between widget and :active) the problem also goes away -- even with the text box wrapper having a right border width of zero.
This issue does not occur in Firefox, IE, or Safari 5.1.1 (7534.51.22), only in the Chrome version mentioned above. So it seems it could be a Chrome bug.
I have never seen a state selector used with a space like that before. Most of the time, things like :hover, :link, :active, etc, come immediately after the selector. Does the jQuery UI selector above mean "apply outline:none; to all :active elements nested beneath a .ui-widget element"? Or does it mean "apply outline:none; to all :active .ui-widget elements"? If there is no difference by removing the space between .ui-widget and :active, I would prefer that solution over making the text box wrapper right border transparent instead of giving it a width of zero.
Another odd thing is that the Suffix combobox is not affected -- yet it uses the same exact CSS and HTML structure as the Salutation combobox. Weird...
Is there a difference between .ui-widget :active and .ui-widget:active?
There is. .ui-widget :active means "an active successor of an element with the class "ui-widget". .ui-widget:active means "an active element with the class "ui-widget".
Provided that other browsers render this case correctly, I suggest reporting a bug against Chrome (preferably, give a reduced test case): http://new.crbug.com
I'm using jQuery UI's tabs to divide content on my page. I have a 'link bar' I would like to have hang at the bottom of each tab. (The tab text will change but generally they will navigate the user left or right through tabs.)
Hosting the #linkBar div inside the first tab makes it 'look' right, inside Themeroller's border. Putting it just outside the 'parent tab' div places the links below the theme's border. I've tried creating a spacer div but it just pushes #linkBar down further.
Of course when the user switches to another tab, the link bar goes away. How is ownership of elements organized between tabs? Should I dynamically destroy the #linkBar div on the tab being navigated away from and rebuild it in the tab being navigated to? Or is there a better way to move it between them, or just manage visibility?
I would like to have the link bar follow the content on each tab as a footer, 'floating' one or two lines below the last content of each tab (rather than having it in a fixed position relative to the tab bar).
Ok ... It was simply adding the jQuery UI classes to the linkBar. Check out my working jsFiddle demo:
I moved the linkBar div out of the tabOne div and put it at the bottom of the tabs div:
<div id="container">
<div id="title">
<h1>title bar</h1>
</div>
<div id="tabs">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div id="tabone">
content goes here
<br><br><br><br>more stuff<br><br><br>more stuff<br><br>
</div>
<div id="tabtwo">
content goes here...
</div>
<div id="tabthree">
content goes here...
</div>
<div id="linkBar">
<span id="leftLink"><< left link</span>
<span id="rightLink">right link >></span>
</div>
</div>
</div>
I slightly altered the linkBar style by giving it a top and bottom margin as well as hiding it by default:
#linkBar {
display: none;
margin: 10px auto;
}
Then I simply added the jQuery UI classes to the $linkBar. I slightly altered the jQuery to be more readable:
$("#accordion").accordion({ header: "h3" });
var $tabs = $("#tabs"),
$linkBar = $("#linkBar");
$linkBar.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
$linkBar.show();
$tabs.tabs();
$('#title').click(function() {
$tabs.tabs('select', 0);
return false;
});
Note: You could just add class="ui-tabs-panel ui-widget-content ui-corner-bottom" to the linkBar div and be done with it. But, I think I like it better managed in the JS.