I am using a jquery accordion with just one content panel like so:
<ul id="myaccordion">
<li>
Header Title
<div>
Content in here.
</div>
</li>
</ul>
and then calling:
$('#myaccordion').accordion();
The problem I'm having is that the content part of the accrodion id the correct width, but the header is merely the width of the text that says 'Header Title' and this text is overlapping the arrow icon.
Can anyone see why the header wouldn't be the same width as my content? I have tried setting a specific with to the ul, the li and the a tags, but to no effect.
Many thanks in advance.
The accordion code expects a header around that anchor for styling (or any wrapper element really), since this styling here needs it:
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
Just add a wrapper in there, like this:
<ul id="myaccordion">
<li>
<h3>Header Title</h3>
<div>
Content in here.
</div>
</li>
</ul>
Here's a demo showing both with and without the <h3>, so you can see the effect.
Related
I am using Materializecss for my website and I'd like to display tooltips on the smaller action buttons whenever the user presses the big action button. Materializecss shows tooltips only on hover by default.
Is there a way to change this?
Thank you
<li> <!-- Small button -->
<a class="btn-floating green tooltipped" data-position="left" data-delay="50" data-tooltip="Add friends">
<i class="material-icons">add</i>
</a>
</li>
Check out this github issue
Github user philipraets created a nice codepen to demonstrate his soluton.
Edit (For the Lazy):
philipraets created a simple css style:
.mobile-fab-tip {
position: fixed;
right: 85px;
padding:0px 0.5rem;
text-align: right;
background-color: #323232;
border-radius: 2px;
color: #FFF;
width:auto;
}
then wrapped the tooltip within another link element using that style:
<div class="fixed-action-btn click-to-toggle" style="bottom:24px; right:24px;">
<a class="btn-floating btn-large red"><i class="large material-icons">settings</i></a>
<ul>
<li>
<i class="material-icons">create</i>
Edit <!--tooltip-->
</li>
<li>
<i class="material-icons">event</i>
Save to calendar <!--tooltip-->
</li>
<li>
<i class="material-icons">supervisor_account</i>
Switch responsible <!--tooltip-->
</li>
</ul>
</div>
So this seems like a dumb problem to have. I may be going about it wrong so if anyone could suggest another way of doing this i would love to try it out.
I have a FIXED Navigation bar built with Zurb Foundation 4
<div class="fixed">
<nav class= "top-bar">
<ul class="title-area">
<li>
<h2><%= link_to image_tag("officialLogo-100x197.png", :size => "100x197", :class => "logo" ) + "AppDomum", root_path, :class => "textlogo" %></h2>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
#links .....
</ul>
The image that is displayed for the title is larger than the navigation bar. I actually like it hanging down from the nav bar and i have a media query setup to remove it on smaller screens so it is not hanging over content.
Problem: The <div class= "fixed"> wraps the navigation bar and the image all the way across the page. Because the image hangs below the nav bar anything behind it is not clickable. the entire top part of the page is unclickable. For a form i am unable to select a text box to edit. Because the navbar is fixed it affects the entire page depending on how far you have scrolled. Is there a way to have them fixed but without having the fixed tag grab all the empty space? Is there another way to do this?
Try adding position: relative; to your image.
I did Solve this after much research.
here is the code to solve the issue or at least what i hacked together to get what i want.
This is the navigation bar.
<div class="fixed">
<nav class= "top-bar">
<ul class="title-area">
<li>
<h2><%= link_to "AppDomum", root_path, :class => "textlogo" %></h2>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
#links .....
</ul>
</section
</nav>
</div>
<div class= "fixed-icon">
<%=link_to image_tag("officialLogo-100x197.png", :size => "100x197", :class => "logo" ), root_path %>
</div>
I separated the icon and the Text but kept both of them as links to the home page. Giving the illusion that they are both part of the title. There is a media query that hides the image and removes the margin on the title.
And Here is the CSS. I basically searched around the html and css files of the site until i found the "fixed" class and stole the css modification and then changed the width to be small so it does not mask everything else.
#media only screen and (min-width: 768px) {
.title-area {
margin-left: 6em;
}
}
.fixed-icon {
#extend .hide-for-small;
width: 10%;
left: 0;
position: fixed;
top: 0;
z-index: 99;
}
.title-area {
padding: 5px 5px;
font-weight: bold;
letter-spacing: -1px;
}
I try to use paginate with kaminari. My project used bootsrap css, and the result is so ugly:)
The html is generated by nokogiri
<nav class="pagination">
<span class="first">
« First
</span>
<span class="prev">
<a rel="prev" href="/admin/book_borrow/borrow?locale=en">‹ Prev</a>
</span>
<span class="page">
<a rel="prev" href="/admin/book_borrow/borrow?locale=en">1</a>
</span>
<span class="page current">
2
</span>
<span class="page">
<a rel="next" href="/admin/book_borrow/borrow?locale=en&page=3">3</a>
</span>
<span class="page">
4
</span>
<span class="next">
<a rel="next" href="/admin/book_borrow/borrow?locale=en&page=3">Next ›</a>
</span>
<span class="last">
Last »
</span>
</nav>
I want something like pagination in bootstrap page, how I can do?
Please help!
After I posted this question I found the solution:
kaminari: A Scope & Engine based, clean, powerful, customizable and sophisticated paginator for Rails 3.
Just go to the console and type:
rails generate kaminari:views bootstrap4
It will download some Haml files to your application, and the views are changed. It also supports bootstrap 2 and 3 e.g
rails generate kaminari:views bootstrap3
Here are some themes for Kaminari views: https://github.com/amatsuda/kaminari_themes
simply add following css to your application.css
.pagination a, .pagination span.current, .pagination span.gap {
float: left;
padding: 0 14px;
line-height: 38px;
text-decoration: none;
background-color: white;
border: 1px solid #DDD;
border-left-width: 0;
}
.pagination {
border-left: 1px solid #ddd;
.first{
padding : 0;
float: none;
border: none;
}
.prev {
padding : 0;
float: none;
border: none;
}
.page{
padding : 0;
float: none;
border: none;
}
.next{
padding : 0;
float: none;
border: none;
}
.last{
padding : 0;
float: none;
border: none;
}
}
rails generate kaminari:views bootstrap4
Available themes: bootstrap2, bootstrap3, bootstrap4, bourbon, bulma, foundation, foundation5, github, google, materialize, purecss, semantic_ui
Nearly gave up until I found "Pagination with Kaminari".
In short, after rails g kaminari:default go into the views that are created under app/views/kaminari and change the tags to suit your styling.
I went into _paginator.html.erb and changed the <nav> to a <div> and replaced all the <span> tags with <li>.
To get the bootstrap styling that fits my app, I changed the <div> tag in _paginator.html.erb to <div class="pagination pull-right"> and the <span class="page"> tags to simple <li>.
There's are a couple of gotcha's that perhaps someone else can help with:
There's erb in _page.html.erb that changes the class for the current page when active. It messes up the alignment so to get around that, change the <%= link_to_unless page.current? ... %> to <%= link_to page ... %>.
The _gap.html.erb view which inserts the "..." block also gets messed up. Replace it with <li><%= link_to '...' %></li> to get it to sit nicely inline.
I just started coding 8 weeks ago so for sure there are better ways to approach this and ways to clean up 1 and 2, but if you just want things to look right and function as intended, give that a shot and fine tune later.
Is there any way that I can "Stack" the jQuery UI Tabs Header? Please allow me to explain: I have tabs which may require two or more words for the titles to be self-explanatory. For instance:
"PDP Undeveloped"
My problem is that I am running out of space when adding a bunch of tabs. So instead of writing the tab as
PDP Undeveloped
I would like it to show as
PDP
Undeveloped
Is that possible? If not then are there alternate ways of solving this problem?
Thanks in advance.
Bharat
I would recommend using <br /> tags. Since you only want them to take effect when you're short on space I'd recommend using media queries to turn on the multi line display.
<div id="tabs">
<ul>
<li>Nunc <br />tincidunt</li>
<li>Proin <br />dolor</li>
<li>Aenean <br />lacinia</li>
</ul>
<div id="tabs-1">Tab 1</div>
<div id="tabs-2">Tab 2</div>
<div id="tabs-3">Tab 3</div>
</div>
<style>
br { display: none; }
/* Replace 700px with whatever width you want the multi line display to start */
#media screen and (max-width: 700px) {
.ui-tabs li { height: 4em; }
br { display: inline; }
}
</style>
Live example: http://jsfiddle.net/vvpeF/
I'm trying to apply this SlickGrid example:
http://mleibman.github.com/SlickGrid/examples/example4-model.html
to my own web project.
When I drop my grid in to the top of my page, it renders correctly. However, when I drop it into a jQuery UI Tabs tab on the same page, the CSS Sprite that renders the search image is incorrectly offset.
The icon is rendered with
<span title="Toggle search panel" class="ui-icon ui-icon-search ui-state-default ui-corner-all" style="float: right;" onclick="toggleFilterRow11()"/>
It looks like jQuery UI Tabs also uses the same CSS classes, and of course a conflict arises.
Looking at the effective styles in IE9, the control outside of jQuery UI Tabs that renders correctly has the following:
The control that renders incorrectly looks like this:
Bottom Line
Placing the SlickGrid in a jQueryUI Tab causes the ui-icon-search class to be lost and therefore the wrong background-position-x/y to be set.
Why is that class being lost and how can I fix the issue?
The problem
When jQueryUI creates tabs from the HTML it adds the jQueryUI CSS classes. From the jQueryUI examples:
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
<div id="tabs-3"></div>
</div>
becomes
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">Nunc tincidunt</li>
<li class="ui-state-default ui-corner-top">Proin dolor</li>
<li class="ui-state-default ui-corner-top">Aenean lacinia</li>
</ul>
<div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
<div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
<div id="tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
</div>
The problem is happening because the SlickGrid content now exits as a child of an element with the class ui-widget-content. Actually, there are 2 ancestors of the grid header that have that class - in the above code see <div id="tabs"> and <div id="tabs-1"> both have that class applied when tabs are created.
The jQueryUI CSS rules that are supposed to apply to get the correct search icon are:
.ui-icon {
width: 16px;
height: 16px;
background-image: url(images/ui-icons_222222_256x240.png);
}
.ui-icon-search {
background-position: -160px -112px;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 1px solid #d3d3d3;
background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
font-weight: normal;
color: #555555;
}
The markup for the icon is:
<span style="float:right" class="ui-icon ui-icon-search ui-state-default ui-corner-all" title="Toggle search panel" onclick="toggleFilterRow()"></span>
so therefore the CSS rules .ui-icon, .ui-icon-search and the first match of the 3rd rule .ui-state-default are applied.
However when the same markup exists as a descendent of a element with the class .ui-widget-content, the 2nd part of the 3rd rule above (.ui-widget-content .ui-state-default) also matches which is more specific. See http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg for a Star Wars themed explaination of CSS specificity. Essentially the background property of the 3rd rule that includes background-position:50% 50% is more specific than the single selector .ui-icon-search rule therefore overriding the correct background-position:-160px -112px.
The solution
Need to make the .ui-icon-search rule the same or more specific than the .ui-widget-content .ui-state-default rule which can be done by either:
Adding !important to the rule
Adding more selectors to the rule
For example
.ui-icon-search {
background-position: -160px -112px !important;
}
or
.ui-icon-search, .ui-widget-content .ui-icon-search {
background-position: -160px -112px;
}
I cannot think of a way that doesn't involve changing the jQueryUI CSS (or duplicating the .ui-icon-search rule in your own CSS with one of the two solutions above). I would actually be interested to see if there is another way myself!