digicorp / propeller Goto Github PK

Hello, I am currently working with Vue and have a sidebar and navbar, but they are in separate components (but are basically the same as the demos you have provided). Thus, the toggle functionality does not work. Is there a way to manually toggle the sidebar overlay? Adding and removing the requisite classes does not seem to work (I am adding and removing 'pmd-sidebar-overlay-active' to no avail).

I appreciate the help greatly

When you add an element with class pmd-ripple-effect via javascript, for example:

element.innerHTML = '<button type="button" class="btn pmd-btn-raised pmd-ripple-effect btn-default">Button</button>';

the ripple effect doesn't work. Is there any way to make it work?

On line 200 of propeller.css the box-shadow for Firefox, IE and Opera have a false space in their definition. Eg. -moz- box-shadow instead of -moz-box-shadow.

Seems like there is no spacing between cards, is that right?

I had spacing okay when I was using card deck - but I think I have to change because, apparently, Bootstrap 4 doesn't support responsive-column card decks.

So I'm looking at going back to cards that should be 3-wide at lg breakpoint. But, with Propeller enabled, there is no space between the cards. When I go back to plain Bootstrap, I get spacing.

My mark-up is something like this, but I am also sometimes laying more than two cards side-by-side...

<div class="container-fluid  cxt-bgimg     pt-4 pb-5 ">
  <div class="container pt-4 pb-5">

    Content here

    <div class="row ">
    
      <!-- card -->
      <div class="card pmd-card cxt-card-profile pmd-z-depth col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3">
        <!-- background color -->
        <div class="cxt-card-top cxt-bgimg" style="background-image:url('background.jpg')"></div>
        <!-- avatar -->
        <div class="cxt-avatar"><img src="avatar.jpg" class="rounded-circle img-responsive"></div>
        <div class="card-block">
          <h3 class="text-center">Name</h3>
        </div>
      </div> <!-- / end card -->
      <!-- card -->
      <div class="card pmd-card cxt-card-profile pmd-z-depth col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3">
        <!-- background color -->
        <div class="cxt-card-top cxt-bgimg" style="background-image:url('background.jpg')"></div>
        <!-- avatar -->
        <div class="cxt-avatar"><img src="avatar.jpg" class="rounded-circle img-responsive"></div>
        <div class="card-block">
          <h3 class="text-center">Name</h3>
        </div>
      </div> <!-- / end card -->

    </div>

</div>

Hi,
I am trying to use a modal opened by a button. Eventually, it will be a form. But, for now, just any kind of basic modal test would be a success.

The problem is, every modal is appearing with the shading not just behind it but also over the front. That means everything on the page (both the modal and the page behind) is unclickable.

Here is my code - https://www.pastiebin.com/593c523e4e92a

FYI, this is being run through WordPress, with bs4navbar - but I also get the problem when I hand-code the modal code direct.

I'm curious to know what the problem is.

Please could you do a propeller pagination example (I assume there is a component?)

I will like to know if there is support for angular 2+

My propeller-styled sidebar is working properly except that it continues to scroll with the main content rather than fixing to the left as it should with the '.pmd-sidebar-left-fixed` class.

Scrolling down the page scrolls the sidebar, I mean.

My current markup.

// Sidebar
section#pmd-main
	// Left sidebar
	aside.pmd-sidebar.sidebar-custom.sidebar-default.pmd-sidebar-slide-push.pmd-sidebar-left.pmd-z-depth.sidebar-hide-custom(role='navigation', style='position: absolute;')
		ul.nav.pmd-sidebar-nav
			// My Account
			li.dropdown.pmd-dropdown.pmd-user-info
				a.btn-user.dropdown-toggle.media(aria-expanded='false', data-sidebar='true', data-toggle='dropdown', href='javascript:void(0);')
					.media-left
						// img(width='40', height='40', alt='avatar', src='http://propeller.in/assets/images/avatar-icon-40x40.png')
					.media-body.media-middle 
						i.fa.fa-wifi.fa-lg
						|   The Superuser Blues
					.media-right.media-middle
						i.material-icons.pmd-sm more_vert
				ul.dropdown-menu
					li
						a.pmd-ripple-effect(href='javascript:void(0);', tabindex='-1')
							i.material-icons.media-left.media-middle person
							span.media-body Who Am I?

... and so on. Thanks for your kind attention to what may prove to be my idiocy again.

See http://propeller.in/components/floating-button.php all the way at the bottom.

At first I thought it was that maybe the sample was implemented wrong, but when I ran it on my own site the ripple effect goes way over the boundaries. I'm not sure if this is suppose to happen or if it's part of the design.....because all the other ripple effects stay within their button boundaries.

See picture: http://imgur.com/E5aWne8

I have a row containing Propeller cards inside columns that are 4 wide at medium and large. So more than 3 cards correctly wrap to the next line.

Example code is:

`

                              <div class="pmd-card pmd-card-default pmd-z-depth">
                                <div class="pmd-card-media">
                                  <img src="mydirectory/placehold318x180.png" width="1184" height="666" class="img-fluid">
                                </div>
                                <div class="pmd-card-title">
                                  <span class="pmd-card-subtitle-text">Title text</span>
                                  <h3 class="pmd-card-title-text">Subtitle text</h3>
                                </div>
                                                                    <div class="pmd-card-body">
                                   Card body text. Card body text. Card body text. Card body text. Card body text. Card body text. Card body text. Card body text.</div>
                                                                  </div>
                            </div>`

i'm using the admin template and want to use select2 and datepicker on a modal, but neither of them seems to work, i click them but nothing happens, looks like it's something related with z-index, can somebody help me???

hi,when a li in sidebar have data-target of a modal unfortunately modal not working.i using admin template.

Hi, I have been trying to solve this problem on WordPress StackExchange for several days now.

The aim is a contact form opening in a Bootstrap modal upon a button click in my site header. Here is my intended setup:

• WordPress site running a custom theme...
• Theme hand-built using Bootstrap 4 and Propeller, which you are aware of.
• Contact form handled by Wordpress plugin called Contact Form 7
• Plugin called Bootstrap for Contact Form 7, to make CF7 forms use Bootstrap mark-up.

I have overcome the issue of how to hard-insert a Contact Form 7 form in to a PHP theme file, using Wordpress' do_shortcode function.

But I had two outstanding issues:

• Form mark-up should use Bootstrap and Propeller mark-up and classes.
• Form submission was not happening using Ajax as it should with Contact Form 7. On submission, modal should have closed - instead, submission loaded a next-action page.

I think I overcome the mark-up issue by finding out how to construct a Contact Form 7 form using custom mark-up and classes, but also by using the WordPress plugin Bootstrap for Custom Form 7. With that combination, I have got the attractive Material Design text inputs you list on your docs.

But I can't seem to get everything I want, and I think it is the combination of Javascripts that is at fault...

Here is the combination I have been using, and why...

1. Bootstrap 4 advises http://code.jquery.com/jquery-3.1.1.slim.min.js
2. Propeller advises http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
3. Custom Form 7 uses http://www.contexthq.com/wp-includes/js/jquery/jquery.form.min.js?ver=3.37.0
4. Bootstrap for Custom Form 7 plugin uses http://www.contexthq.com/wp-content/plugins/bootstrap-for-contact-form-7/assets/dist/js/scripts.min.js?ver=1.4.2

Note that, to comply with 1. above, I am deregistering WordPress' own built-in version of JQuery and registering http://code.jquery.com/jquery-3.1.1.slim.min.js

With that combination, here is my relevant scripts section...

<script type='text/javascript' src='https://code.jquery.com/jquery-3.1.1.slim.min.js?ver=3.1.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var wpcf7 = {"apiSettings":{"root":"http:\/\/www.contexthq.com\/wp-json\/","namespace":"contact-form-7\/v1"},"recaptcha":{"messages":{"empty":"Please verify that you are not a robot."}}};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.contexthq.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.8'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-includes/js/jquery/jquery.form.min.js?ver=3.37.0'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-content/plugins/bootstrap-for-contact-form-7/assets/dist/js/scripts.min.js?ver=1.4.2'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js?ver=1.0.0'></script>
<script type='text/javascript' src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-content/themes/context/js/propeller.min.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-includes/js/wp-embed.min.js?ver=4.8'></script>
<script type='text/javascript' src='https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&#038;render=explicit&#038;ver=2.0'></script>

However, the problem here is that ajax submission does not take place upon form submission - on submit, it just loads to the next page.

Now, if I let WordPress use its own version of JQuery, my scripts section looks like this...

<script type='text/javascript'>
/* <![CDATA[ */
var wpcf7 = {"apiSettings":{"root":"http:\/\/www.contexthq.com\/wp-json\/","namespace":"contact-form-7\/v1"},"recaptcha":{"messages":{"empty":"Please verify that you are not a robot."}}};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.contexthq.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.8'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-includes/js/jquery/jquery.form.min.js?ver=3.37.0'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-content/plugins/bootstrap-for-contact-form-7/assets/dist/js/scripts.min.js?ver=1.4.2'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js?ver=1.0.0'></script>
<script type='text/javascript' src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-content/themes/context/js/propeller.min.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-includes/js/wp-embed.min.js?ver=4.8'></script>
<script type='text/javascript' src='https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&#038;render=explicit&#038;ver=2.0'></script>

In this scenario, ajax submission does take place successfully - but it spoils the formatting of my form input labels... text in the inputs is overwriting the labels themselves.

If I let WordPress use its own version of JQuery and disable all Propeller CSS and JS, everything works okay - but that's because I am losing all the nice Material Design of my site, including the inputs and labels.

However, I have just made an additional finding...

If I remove the Propeller class .pmd-textfield-floating-label from my form inputs, the form input formatting is just fine. With no text movement/animation expected, there is no overlap. I just a) have to live without floating labels and b) I notice that the input boxes are not using the Roboto font.

I am happier now that I have found this solution, but I am still curious... first, is there anything wrong with .pmd-textfield-floating-label?

Most importantly, what JS does the combination of Bootstrap 4 / Propeller really need? Do you see any conflicts in what I have currently... ?

Head...

<script type='text/javascript' src='http://www.contexthq.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>

Foot...

<script type='text/javascript'>
/* <![CDATA[ */
var wpcf7 = {"apiSettings":{"root":"http:\/\/www.contexthq.com\/wp-json\/","namespace":"contact-form-7\/v1"},"recaptcha":{"messages":{"empty":"Please verify that you are not a robot."}}};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.contexthq.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.8'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-includes/js/jquery/jquery.form.min.js?ver=3.37.0'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-content/plugins/bootstrap-for-contact-form-7/assets/dist/js/scripts.min.js?ver=1.4.2'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js?ver=1.0.0'></script>
<script type='text/javascript' src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-content/themes/context/js/propeller.min.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-includes/js/wp-embed.min.js?ver=4.8'></script>
<script type='text/javascript' src='https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&#038;render=explicit&#038;ver=2.0'></script>

Hi,

I would like to close the side bad after an option has been clicked in a single page application. I'm using angular 4.

Any tips?

is there any component for mask text fields? like phone number

If a regular navbar is used in the admin theme toolbar its height is increased by a few pixels.

Currently I fix this with

@media (min-width: 768px) { .pmd-navbar .navbar-nav > li { margin-bottom: -7px; } }

but I'm not sure, if this is a good solution. ;)

Hi,
Your theme have great features but I have a request that can you please concern about Typography of your theme like your font is may little big with your theme or others. It will be helpful for us if you can.

Thanks

Many components not working with angular 2 routing. scripts not working when the app change from one route to another one.

Hi! I'm having some trouble with the modal loading in mobile. Im using the propeller framework on my angular application. The modal works perfectly in web view, but as I scale down the window to mobile - the modal loads at the bottom of the page - i.e. the user needs to scroll to the bottom of the page to see the content of the modal.

This seems to be happening with the sample code too (I tried copy and pasting to test). How can I fix this issue?

Thank you!

Every website has dynamic sections. As soon as I want to render a list from a ajax request I can't use the library to make this work. The last option is to copy paste and reinitiliaze all components. My suggestion is to provide a javascript api e.g by jquery plugins.

Further I would remove all html in javascript and provide a interface like in bootstrap.

When using dropdowns in the sidebar, clicking a link causes a full page reload in an SPA. Top level links do not do this. Any thoughts on what would cause this?

<ul class="nav pmd-sidebar-nav">
	<li class="dropdown pmd-dropdown ...>
		<a>dropdown</a>
		<ul class="dropdown-menu">
                       <li><a href="/profile">Profile</a></li>  CAUSES FULL PAGE RELOAD ON CLICK
                   <li><a href="/logout">Logout</a></li> CAUSES FULL PAGE RELOAD ON CLICK
		</ul>
	</li>
            <li>
              <a href="/dashboard">Dashboard </a> DOES NOT CAUSE RELOAD
            </li>
     </ul>

I found this error in console when I use it in my WordPress theme.
Can you solve this please? Thank you.

I've found the the dropdown element in the sample "Tabs with Dropdown" do not work correctly, it do not open the list on my mobile phone. I use Chrome on Android 7.1.
If I use Chrome on Desktop it works like expected. The normal dropdown component works on my phone.

Hi, I need to open my dropdown menu but when I click on the item the left sidebar suddenly closes.
Here the google drive Link to screen recording:
https://drive.google.com/file/d/1y8JcXwWfLwlLbQT6sUkVGyvGUtwgr8-4/view?usp=sharing

Here my navbar code:

`

              <!--nav -->
        		<ul id="menu-top-menu" class="nav navbar-nav navbar-right">
                    <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="#" title="Iperius Backup Freeware"><strong>Free Download</strong></a></li>
                    <li class="dropdown pmd-dropdown">
                      <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Products <span class="caret"></span></a>
                      <div class="pmd-dropdown-menu-container"><div class="pmd-dropdown-menu-bg"></div><ul class="dropdown-menu" style="">
                        <li><a href="#">Iperius Backup <strong>Free</strong></a></li>                    
                        <li><a href="#">Iperius Backup <strong>Cloud</strong></a></li>
                        <li><a href="#">Iperius Backup <strong>Database SQL</strong></a></li>
                        <li><a href="#">Iperius Backup <strong>ESXi - Hyper-V</strong></a></li>
                        <li><a href="#">Iperius Backup <strong>Exchange</strong></a></li>
                        <li><a href="#">Iperius Backup <strong>Tape</strong></a></li>
                        <li><a href="#">Iperius Backup <strong>Desktop/Home</strong></a></li>
                        <li><a href="#">Iperius Console</a></li>
                        <li><a href="#">Iperius Online Storage</a></li>
                        <li><a target="_blank" href="#">Iperius Remote Desktop</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="text-uppercase"><a href="#"><strong>Iperius Software Suite</strong></a></li>
                      </ul></div>
                    </li>
                    <li class="dropdown pmd-dropdown">
                      <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Buy <span class="caret"></span></a>
                      <div class="pmd-dropdown-menu-container"><div class="pmd-dropdown-menu-bg"></div><ul class="dropdown-menu">
                        <li><a href="#">Buy Iperius Backup</a></li>
                        <li><a href="#">Buy Iperius Iperius Console</a></li>
                        <li><a href="#">Buy Iperius Online Storage</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a style="font-weight:bold;" href="#">Become a RESELLER</a></li>
                      </ul></div>
                    </li>
                    <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href=#"><strong>Contact us</strong></a></li>

                <span class="nav-active" style="display: none;"></span></ul>            		
     
          </div>`

Floating Action Button with pmd-ripple-effect works fine, but when i try to remove the pmd-ripple-effect from the buttons i face strange issue, the data-title of the rest of buttons becomes showing even if i don't hover over them...

Floating Action example with pmd-ripple-effect :

works fine!

Floating Action example without pmd-ripple-effect :

you can see the issue!

Hopefully i fixed this by adding overflow:hidden to the buttons:

.pmd-floating-action-btn{ overflow: hidden; }

I attached some demos
floating_actions_issue.zip

There does not seem to be an active class that working in the sidebar menu?

Hello, is there a way to show modal programmatically ?

no SCSS as an alternate download?

Sad Panda...

When a btn-block is used in a card action, it overflows the card on the right.

https://jsfiddle.net/4pL05gfL/

Is there any way to set different colors for the navbar and sidebar?

please
How can I right align the page and sidebar in Propeller theme? (change RTL & LTR of pages)
in bootstrap, by use bootstrap-rtl (bootstrap-rtl.min.css) you can change page direction to RTL

will this framework work with bootstrap 4?

Try linked picker example
http://propeller.in/templates/admin-dashboard/datetimepicker.html

minDate and maxDate are set but has no effect. I upgrade datetimepicker to the latest version and it works but styling is broken.

getting @font-face encountered unknown error in internet explorer. Check the screenshot.

as title.

Is the admin theme something separate? I see that downloading it requires an email and you can only download a zip file (no npm, grunt, etc...) also the css files are different (there is a properller.theme.css while in normal propeller it's just propeller.css) and that each folder in the admin zip has a js folder with separate javascript?

I started with the standard propeller and then tried to build in some admin stuff, but am now confused.

Why is admin different from general propeller?

I have a datatable like this
`$(document).ready(function(){
$('#tb-unified-records').DataTable({
columns: [
{ "data": null },
{ "data": "receiveDate" },
{ "data": "model" }
],
columnDefs: [ {
className: 'select-checkbox',
targets:0,
render: function ( data, type, full, meta ) {
return '';
}
},{
targets:2,
render: function ( data, type, full, meta ) {
return "<i data-trigger="hover" data-toggle="popover" data-placement="auto bottom" data-content=""+data.txt+"">"+data.code+"</ i>";
}
return '';
}
}],
select: {
style: 'multi',
selector: 'td:first-child'
},
"ordering": false,
bFilter: true,
processing: true,
serverSide: true,
ajax: {
"url": "/unifiedRecords.do?method=manageList",
"type": "POST"
},
pagingType: "simple_numbers",
"paging": true,
"searching": false,
dom:
"<'row'<'col-sm-12'tr>>" +
"<'pmd-card-footer' <'pmd-datatable-pagination' l i p>>",
});

    //init popover when datatable complate a draw
	$('#tb-unified-records').on( 'draw.dt', function () {
        $('[data-toggle="popover"]').each(function(i,e){
        	popover(e);
        })
    } );

   //init the popover
   function popover(o){
	var e = $(o);
	var tg = e.attr('data-trigger');
	var t = e.attr('data-title');
	if(t==undefined || t==null)
		t = '';
	var h = e.attr('data-html');
	if(h==undefined || h==null)
		h = false;
	var p = e.attr('data-placement');
	var c = e.attr('data-content');
	$(o).popover({
        trigger:tg, 
        title:t,
        html: h, 
        placement:p,
        content:c
    });
}
});`

the popover correctly triggered, but only the ‘arrow’ part, the box of title and content was disappeared

Timepicker numbers crumble when keyboard arrow up and arrow down key press

Could this be because there is no package.json on the the master branch ? I would like to install propeller via npm so I can use webpack to package it up and such.

There is no way to highlight an item as currently selected as far as I can see...

It returns 403 Forbidden.

Forbidden

You don't have permission to access / on this server.
Server unable to read htaccess file, denying access to be safe

Time Picker Hour Hand in not properly place in the corresponding hour number.

Im having kinda of a harsh time using this library alerts.
i want to use it to tell the user that an ajax call was successful, but when i try the "js || jquery way"

 <button type="button"
                id="success"
                data-positionX="center"
                data-positionY="top"
                data-duration="5000"
                data-effect="fadeInUp"
                data-message=""
                data-type="information"
                data-revert="fadeOutUp"
                class="btn pmd-ripple-effect btn-info pmd-btn-raised pmd-alert-toggle">
        </button>

document.getElementById('success').click();
$('#success').trigger('click');
$('#success').click()

The alerts aren't being erased.

Must be cool if they trigger with the same jquery you guys are using.

Neat library btw .

example
Maybe I should rewrite some css or start over but the sidebar has a problem with users scrolling down on mobile. If a person scrolls down too much the nav is unable to be exited out of unless you refresh the page. I've looked at the sidebar on propeller's website and when scrolled down on mobile it auto closes. Is that a default feature? I would like to have that since it seems like the only solution.

Missing margins/paddings/etc...

I have just noticed an issue with my navbar under Bootstrap 4.
I only discovered this when removing "fixed-top" to try the normal freestanding navbar...

With <nav class="navbar navbar-toggleable-sm navbar-light cxt-bg-white pmd-z-depth">, when wrapped in a container-fluid div, 15px margins appear on the left and right of the navbar, seemingly put there by Bootstrap files.

But it doesn't happen in plain Bootstrap, when I remove Propeller CSS.

It also doesn't happen in Propeller when I used fixed layout, ie. no container-fluid around the navbar.