I am trying to apply bootstrap 4 pagination style in cakephp paginator helper.
It is looking very hard to me.
This my simple html that I want to apply in paginator helper
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
I created a paginator-templates file in config location.
config/paginator-templates.php
return [
'number' => '{{text}}',
];
Then I have initialized in appView.php
public function initialize(): void
{
$this->loadHelper('Paginator', ['templates' => 'paginator-templates']);
}
After that getting below error
Config file "paginator-templates.php" did not return an array
How can I create a paginator-templates.php for apply bootstrap 4 pagination design in cakephp ? Has there any blog or example ?
What is the file returning?
One way to work around this might be to use the setTemplate() method on the helper.
https://book.cakephp.org/3/en/views/helpers/paginator.html#changing-templates-at-run-time
Using your supplied example code I've been able to get the code working in Cake 3.8.5
I wonder if you just forgot the opening <?php tag in your templates file so it's coming back as a string.
Related
i want to conditionally add :before css selector to my dynamic product, currently its mutual fund but it can be later in future, please let me know how to do it
<div className={`${style.right_block}`}>
<ul className={`${style.three_points}`}>
<li className={`${style.mutual_fund}`} >{current_web.cat}</li>
<li className={`${style.beginner_icon}`}>{current_web.difficulty}</li>
<li className={`${style.time_icon}`}>{current_web.dur}</li>
</ul>
</div>
as you can see my product, difficulty, and dur(duration ) coming from api,
i want to chnage product :before icon based on my product,
If I understand the question correctly, you would like to conditionally add a :before css rule to a certain element?
<div className={`${style.right_block}`}>
<ul className={`${style.three_points}`}>
<li className={(yourCondition ? style.nameOfStyleInCssFileWithBeforeRule : style.normalStyle)} >{current_web.cat}</li>
<li className={`${style.beginner_icon}`}>{current_web.difficulty}</li>
<li className={`${style.time_icon}`}>{current_web.dur}</li>
</ul>
</div>
I recommend to use useState:
const [ConditinClass , setConditinClass] = useState(styles.NoBeforeStateMent);
Then to style your component :
<div className={ConditinClass} >
... your stuff
</div>
And to switch to class with before :
setConditinClass(styles.classWithBefore)
Be sure to create both classes.
I have used this link
codepen.io/sliiice/pen/GurpF to implement tree table in my application but unable to create a expandAll and collapseAll feature in it.
Can anyone help me out in implementing this feature in treetable.
Thanks in Advance
You can use ng-show for this
For example:
<ul>
<li ng-click="showFirst = (showFirst ? false : true)"> First
<ul ng-show="showFirst">
<li>First > First</li>
<li>First > Second</li>
<li>First > Third</li>
</ul>
</li>
</ul>
When clicking on First it will toggle the children.
I am using SpringBoot and Angular JS for my web application and I would like to know a good way to change the navigation menu based on the user logged.
I was placing the navigation bar inside all the views but im sure there is a better way to do it.
User.class
#Entity
public class Usuario implements Serializable {
#Enumerated(EnumType.STRING)
private Rol rol; -> This can be "UserA","UserB","UserC"
}
And my different navigation menus are
Navigation for UserA
<nav id="nav">
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul>
</nav>
Navigation for UserB
<nav id="nav">
<ul>
<li>B1</li>
<li>B2</li>
<li>B3</li>
</ul>
</nav>
Navigation for UserC
<nav id="nav">
<ul>
<li>C1</li>
<li>C2</li>
<li>C3</li>
</ul>
</nav>
Thanks!
You can use ng-show, ng-if or ng-switch. Beter use ng-if or ng-switch as it doesn't create html for other roles and other users wont be able to see links for other roles if they do inspect element. ng-show will just hide only(adds the display:none style)
In controller get the role
JS
$scope.role = $http.get("some url to get role");
HTML
<nav id="nav" ng-switch='role'>
<ul ng-switch-when='userA'>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul>
<ul ng-switch-when='userB'>
<li>B1</li>
<li>B2</li>
<li>B3</li>
</ul>
<ul ng-switch-when='userC'>
<li>C1</li>
<li>C2</li>
<li>C3</li>
</ul>
<ul ng-switch-default='userDefault'>
<li>Default1</li>
<li>Default2</li>
<li>Default3</li>
</ul>
</nav>
Default is optional
For all nav add ng-show and control your rol. And you have set your rol to $scope.role
<nav id="nav" ng-show="role=='userA'">
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul>
</nav>
If you don't want to use ajax call;You can set $scope.role value on your jsp and when user changed result will be changed. You can use "JSTL" or "Jsp shortTag" shortTag example;
<nav id="nav" ng-show="<%=rol%>=='userC'">
<ul>
<li>C1</li>
<li>C2</li>
<li>C3</li>
</ul>
</nav>
I've got a Bootstrap navbar dropdown menu, where clicking the parent link produces the dropdown list (default behaviour). The dropdown list of the parent is built using ngRepeat from an array of navigation data, and each has a ui-router state parameter, so it looks like:
<li class="dropdown">
<a href class="dropdown-toggle" data-toggle="dropdown">
Parent Link
</a>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="item in navCtrl.items()"
ui-sref-active="active">
<a ui-sref="some.state({ paramKey: paramValue })">
{{item.link}}
</a>
</li>
</ul>
</li>
But, even though it does seem to drop the active class on my link it throws this error in the console:
TypeError: Cannot read property 'name' of undefined
I am not entirely sure about the answer, but, as far as I know, why would you use navCtrl.items() using brackets? I have never seen it used like that before. Wouldn't the old item in items ng-repeat work? Sorry if it does not help at all.
I have this CSS selector, which just won't bind .live(), but works perfectly with .bind():
$('.treeView li ~ :has("ul")').prev('li')
I've read somewhere, that using the .prev() and .next() could be troublesome coupled with .live(), so I wanted to create an pure CSS selector (or ANYTHING that works with .live()!) to do the job - but I just can't figure it out!
Here's what I want to do:
Select all li-elements, which is followed by an li containing an ul.
Here's an HTML markup example, I want to select the ones where the comment says "selected"
<div class="treeView" id="processSegmentsTree">
<ul>
<li>Ostetanke</li> //selected
<li>
<ul>
<li>Tank 1</li>
<li>Tank 2</li>
</ul>
</li>
<li>Presse</li> //selected
<li>
<ul>
<li>Sub-leaf 1</li>
<li>Sub-leaf 2</li> //selected
<li>
<ul>
<li>test</li>
<li>test</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Any help is much appreciated, since this is a bit of a thorn in my eye :(
There is no such Selector to accomplish this task.
What I highly recommend you to do is to add ANYTHING as a flag to use when selecting your desired elements.
add attribute, wrapper, ANYTHING YOU WANT, then the task will be as easy as it should be.
This may work: // not css selector
$(".treeView li:has('ul')").prev();