I am trying to use a v-data-table inside of a v-card, you can see the code from the following codepen
https://codepen.io/benwasin97/pen/eYveZGL
<v-data-table
:headers="headers"
:items="items"
:search="search"
:sort-by="id"
:sort-desc="true"
>
When I click on the rows per page option the menu doesnt show up at all.. in my application, the whole rows per page dropdown menu does not show up entirely at all. So, Im hoping the issues might be correlated.
Just to recap, I am trying to make the rows per page menu show up in the codepen above.
Thank you
You need to put v-data-table inside a v-app. If you do that, rows per page option would work.
Related
In Wordpress plugin gallery "Everest Gallery" got some tabs which first display ALL pictures, and next according to the category assigned to a given photo. For example: ALL | GROUP 1 | GROUP 2.
Choosen tab is later displayed as "active" one.
What I need to get is to hide the tab responsible for ALL. Code of two tabs below when first is choosen as active and the second is inactive (there are two different classes in css):
<li>ALL</li>
<li>GROUP 1</li>
I figure out that I can hide ALL group using below code in custom css section:
[data-filter-key="all"] {display: none;}
And it works! The problem is that on the first look, gallery still display all the pictures before I click on any other GROUP tab. How to make eg. GROUP 1 with data-filter-key="h3MyESImhP" display as a default?
I'm not programmer, so I hope that everything here is explained correctly and clearly for you.
Thanks in advance!
Thats not a css question, there should be default setting in the Plugin. CSS has nothing to do with load data. You can only hide/show like the way you figured out.
If there is no config in the Plugin for that you have to change the php file in the Plugin, but after every update it will be overwritten.
I'm trying to implement a dropdown with an input but whenever I try to click the dropdown, it overlaps to the other row of the table since the inputs are inside the table. Please see my screenshot below.
Screenshot:
Note: This is pure bootstrap 3, and didn't add any customization yet.
I'm using bootstrap 3 and am trying to imitate jQueryMobile's select option where you can replace the standard select textbar and arrows with just a button which toggles the opening of said select.
I don't want to use dropdowns either because they get hidden inside my nested divs (if you can make them appear at the topmost layer, then that's fine too).
So I'm wondering if there's a way to have a button as a stand-in for opening the select options.
Not totally sure on this, need a little more information. But you can create a button with:
<button type="button" onclick="alert('Message')">Button</button>
if that what you wanted?
This isn't exactly what you asked for but I did a search and found this plugin and I think if you were to experiment with this then you could come up with the desired effect. Give it a look over.
Theres a spot about a 1/3 of the way down the page which I think would help you decide if this would work.
Plugin: Bootstrap-Select
commerce site that has a particular tab navigation code that allows users to click and view information.
The Tab Nav looks like this:
Details | Shipping | Returns | Lifestyle View
When you click on anyone of these a paragraph appears below the tab with more information. What happens though is that all the other list items get pushed below the paragraph rather than staying in their current positions. So for instance if I click on "Details," the "Shipping," and "Returns," tab gets pushed down. I would like all the menu items to stay intact and just have the paragraph appear below each menu.
Any help would be greatly appreciated.
the page can be found at:
http://babsandmickieco.myshopify.com/collections/clothing-all/products/sana-dress#
As I've demonstrated in this JSFiddle, it really is a case of just appending an in flow element onto the list item. In the example I have provided, I used the following jQuery code to append a paragraph element (P) to a List item element (li).
Snippet
$("#clickAble").click(function(e) {
$("#clickList").append($("<p id='appended'>Hello</p>"));
});
As you can see, it's fairly obvious what his does. This created something of a rough example, but it's a working example nonetheless.
I am trying to edit my wordpress page to make every menu item at the top of the page two lines long with the top line being a single word (ie: Home, About, etc.) and another line in a different font underneath each item (ie: "Read about us" underneath "About").
Here is an example of what I mean:
http://images.sixrevisions.com/2009/04/13-26_css_block_menu.png
I am aware that this is achieved in some way by using the 'Description' box on the Wordpress menu screen, and I have checked the 'show descriptions' box, but I'm unable to get it to display correctly.
Any help is greatly appreciated!
You do this by creating a custom walker which extends the Walker_Nav_Menu class - here's a good tutorial on it;
http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output