I would like to use jQuery UI tabs but I need the tabs aligned right … That's "easy" since I can modify the tabs container class and extend it.
But the thing is I want to add a "title" on the left, as shown in this screenshot:
http://cl.ly/400D0E3z0f272h1B3x3R
How can I do it in a clean way ?
(A dirty way could be to prepend/append a div to the tabs tag, adding the DOM on the fly … I'm looking a cleaner way :)
Thank you in advance
First there is nothing dirty adding elements to the dom on the fly :-)
Secondly, you could simply add an element in the markup, for instance a <h3> (let's be semantic (and assume you got other titles before)):
<div id="tabs">
<h3 class="ui-tab-title">My Title</h3>
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
...
</div>
and position it with css:
/* float tab buttons to right */
.ui-tabs .ui-tabs-nav li { float: right !important; }
/* position:relative on container will make the title position:absolute relative to the container */
#tabs { position: relative; }
/* absolute position the title */
.ui-tab-title { position: absolute; left: 20px; top: 15px; }
Here's a jsfiddle to illustrate
Edit:
As you pointed out, floating right the <li> inverts their order.
You could invert the order of the list items in the markup itself but this will mess up the whole logic.
Here's a piece of css to right align the tab button while keeping the markup and the visual order in place:
/* align right the <ul> container */
.ui-tabs .ui-tabs-nav { height: 2.35em; text-align: right; }
/* jquery ui css floats-left the <li> so un-float them */
.ui-tabs .ui-tabs-nav li { display: inline-block; float: none; }
I've changed the fiddle accordingly.
Related
Is it possible in bootstrap 5 to right align the caret in the dropdown-menu items?
Moving as per this picture?
Answering my own question. Use another class.
<li><a class="dropdown-item dropdown-toggle first-level-dropdown-toggle" href="#">Clouds</a>
...
</li>
And the class
.first-level-dropdown-toggle::after {
position: absolute;
left: 80%;
margin-top: 0.7em;
}
I have created a select menu next to a button. I wonder how can I get the select menu be at the same Y of the button? (Ideally I would like it to be of the same height too but that is another thing I guess...)
As the shown code I have no configuration other than the select width:
HTML:
<div>
<button>button</button>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
jqueryui JS
$('button').button();
$('select').selectmenu({
width: 120 // Needed to show see options
});
Current Result:
Fiddle that show the problem: https://jsfiddle.net/9xv7jqn4/2/
Is this a bug or a setting I am missing? Any help is appreciated
EDIT:
Thank you for the answers, I am still testing them in my code... I am also interested in know why this happens? Why the selectemenu is taking more space than it looks? Is this a bug of selectmenu widget?
Maybe with this css:
display: inline-flex;
vertical-align: middle;
Your fiddle with the changes: https://jsfiddle.net/9xv7jqn4/3/
Based on thread: "jQuery ui selectmenu vertical position offset (relatively to buttons in this line) " and suggestions here too I ended up adding a couple of rules that fix my case.
I don't know why but ui-selectmenu-button is not vertical-aligned as other buttons. Also decreased the padding of inner text so it looks almost (not exactly) the same height as other buttons.
.ui-selectmenu-button {
vertical-align: middle;
}
.ui-selectmenu-button .ui-selectmenu-text {
padding-top: 0.3em; padding-bottom: 0.3em;
}
You can use
vertical-align: top;
for your button like here: https://jsfiddle.net/9xv7jqn4/4/
$('button').button();
$('select').selectmenu({width: 120});
div,
button,
select{
border: thin dotted red;
}
span {
border: thin dotted blue;
}
.one{
vertical-align: top;
}
<div>
<button class='one'>button</button>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
Another good option is to add wrappers like here: https://jsfiddle.net/9xv7jqn4/6/
$('button').button();
$('select').selectmenu({width: 120});
div,
button,
select{
border: thin dotted red;
}
span {
border: thin dotted blue;
}
.w{
display:inline-block;
vertical-align: middle;
}
<div>
<div class='w'>
<button>button</button>
</div>
<div class='w'>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
</div>
I am having an issue with my fixed header and footer scrolling up/down with my page content and then returning after scrolling stops. It only happens on iOS devices, at least that I am aware of.
Here is the CSS code that I have:
.toolbar-wrapper {
background: #f5f5f5;
border-bottom: 1px solid #e4e4e4;
min-width: 20em;
position: fixed;
left: 0;
top: 0;
}
.wrapper {
width: 100%;
clear: both;
}
And the HTML:
<div class="toolbar-wrapper wrapper">
<div class="container">
<nav id="click-menu" class="primary-nav collapsable-menu" role="navigation">
<span class="menu-toggle">Select a Page</span>
<div class="menu-wrap">
</div>
</nav>
</div>
<!-- .container -->
</div>
Try adding -webkit-transform: translate(0, 0); to .toolbar-wrapper.
I was having a similar issue where the a fixed position element was getting "stuck" in the middle of the page when scrolling back up. I believe that adding transform forces ios safari to use hardware acceleration - I could be wrong about that however.
Hope that helps!
I'm trying to give a "Options" drop down in the header bar. I've successfully added it to the header. But the problem is, it is stretching in its "expand" state, and return to normal in its collapse state.
Here's the fiddle to the problem : http://jsfiddle.net/vNTR5/
I've tried a couple of things :
I noticed the "ui-collapsible-heading ui-collapsible-heading-collapsed" class in the collapsed state, vs "ui-collapsible-heading" class in the expanded state. I captured the events and tried adding the "ui-collapsible-heading-collapse" class. It resulted in keeping the list permanently "expanded" once it had been expanded.
I tried making custom css class, and adding and removing those. But it simply won't take in margin-left added through a class. It takes it when its inline.
Please help.
Code snippet:
HTML:
<div data-role="header">
<h1>Main Menu</h1>
<div data-role="collapsible" id="optionsMenu" data-mini="true" class="rightMenu" data-collapsed-icon="gear" data-expanded-icon="gear">
<h3 style="margin-left:-20%;">Options</h3>
<ul data-role="listview">
<li data-icon="false">Settings</li>
<li data-icon="false">Logout</li>
</ul>
</div>
</div>
CSS:
.rightMenu{
position: absolute;
top:-10%;
right:2%;
}
Working example: http://jsfiddle.net/Gajotres/FSSzK/
.rightMenu {
position: absolute;
top:-10%;
right:2%;
width: 100px !important;
}
.rightMenu .ui-collapsible-content .ui-listview {
margin: -10px -15px -10px -35px !important;
}
I have a standard website, and when printed (for PDF-making purposes on Safari OS X), I'd like the footer to align to the bottom of whatever printed page it is on — i.e. the last page of the document.
Like this:
Is that possible?
I have used a media query (#media print { }) for all other print stylesheet details (excluded for simplicity).
Demo code is here; for the screen page itself, here is the HTML:
<div id="footer">
<p>A bunch of example stuff inside here...</p>
</div>
Which is situated with absolute positioning:
#footer {
color: #fff;
background: #000;
width: 100%;
position: absolute;
bottom: 0px;
}
Bit of an old one but the answer is surely to use the #page:last selector, but you have to alter the CSS for the footer as well.
#footer { position: static; }
#page:last {
#bottom-center { content:element(footer) }
}