In the default web application created using yii 'Home', 'About' labels are always on left side. How can I change their position or any other label to right end of main menu.
You can add class CSS using htmlOptions when you create Menu like:
//in your view
$this->widget('zii.widgets.CMenu', array(
'id'=>'myMenu',
'items'=>$this->myMenu,
'htmlOptions'=>array('class'=>'right-position'),
));
Yii will render like:
...
<ul class="right-position" id="myMenu">
...
</ul>
...
And You're able to define Css for right-position class like:
.right-position
{
text-align: right;
}
So Your Menu-Items should be on the right-side.
More info:
If you want apply CSS for each Menu-Item in the different ways, you can use itemOptions and linkOptions for this. For example:
//At your controller
$this->myMenu = array(
'id'=>'myMenu',
'items'=>array(
array(
'label'=>'Home',
'url'=>array('site/index'),
'itemOptions'=>array('class'=>'css-item'),
'linkOptions'=>array('class'=>'css-link'),
)
),
);
Yii will render like:
...
<ul id="myMenu">
<li class="css-item">
<a class="css-link" href="/site/index">Home</a>
</li>
...
For example: If you want Home item on the right-side the you can define css-item like:
.css-item
{
float: right;
}
I hope it's helpful for you.
Related
I'm running into trouble trying to set anchor tag helper parameters dynamically and looking for some help.
I have a nav that is a view component inside the shared _Layout.cshtml page that populates departments from a model.
#model List<DepartmentModel>
<ul class="nav">
#foreach (var d in Model)
{
<li>
<a asp-page="catalog/departments" asp-route-departmentName="#d.Name" asp-route-departmentId="#d.Id">#d.Name</a>
</li>
}
</ul>
Here is the InvokeAsync() from my View Component class
public async Task<IViewComponentResult> InvokeAsync()
{
var departments = _catalogService.GetNavDepartments();
return View(departments);
}
When I first launch the page, all the hrefs are populating correctly.
"catalog/departments/department-name-1/department-id-1"
"catalog/departments/department-name-2/department-id-2"
"catalog/departments/department-name-3/department-id-3"
If I click on one of the links, like the first link for example, I go to the proper department page "catalog/departments/department-name-1/department-id-1"
However, once I click that first link and navigate to the respective page, all the nav hrefs populate to the current url "catalog/departments/department-name-1/department-id-1" instead of the originally generated hrefs. This makes it so I can't navigate to another department.
Here is my route in the Startup.cs
services.AddRazorPages().AddRazorPagesOptions(options => {
options.Conventions.AddPageRoute("/Catalog/Departments", "{dName}/{dId}");
});
Based on the convention above, it eliminates the "catalog/department" piece of the url but I added it in this description for a sense of what I'm trying to accomplish. Even if I add this template to the page that populates the "catalog/departments" url, I get the same result.
#page "{dName}/{dId}"
Can anyone help me figure out what I am missing? Thanks in advance!
******** UPDATE ********
Currently, the only way I am able to get this to work is by adding the cache tag helper.
<cache>
<ul class="nav">
#foreach (var d in Model)
{
<li>
<a asp-page="catalog/departments" asp-route-departmentName="#d.Name" asp-route-departmentId="#d.Id">#d.Name</a>
</li>
}
</ul>
</cache>
This doesn't seem like a proper fix. Seems more of a hack then anything. Anybody have any ideas? Thanks!
how to write controller code to shared layout page,
i want to get menu from database to layout,
am able to get menu in normal view page,
this is my layout page
<pre lang="html"> <div style="width:1230px">
<script type="text/ng-template" id="treeMenu">
{{menu.Name}}
<ul ng-if="(SiteMenu | filter:{ParentID : menu.Id}).length > 0">
<li ng-repeat="menu in SiteMenu | filter:{ParentID : menu.Id} : true" ng-include="'treeMenu'"></li>
</ul>
</script>
<ul class="main-navigation">
<li ng-repeat="menu in SiteMenu | filter:{ParentID : 0} : true" ng-include="'treeMenu'"></li>
</ul>
You should isolate this in Partial and use RenderAction in your layout page
Steps in nutshell :
Create Action in some controller "let say CommonController" called SiteMenu for example.
Put the code that will bring the Data from Database and map it to suitable ViewModel to represent your Menu items.
The Action should return PartialView instead of View.
Consider this Action regardless of your main layout. So just create a special view for it and put the logic of Html in that view.
In suitable place in your main layout just use #Html.RenderAction("SiteMenu ","Common")
for more information read about RenderPartial vs RenderAction vs Partial vs Action in MVC
Just a simple question, is it possible to change the classname generated by ClistView ?
by default, it generates
<div class="post">
for all the list.
I'd like to have
<div class=post1>
<div class=post2>
...
You can customize CListView styles with bellow parameters:
$this->widget('zii.widgets.CListView', array(
'dataProvider'=>$YOUR_DATA_PROVIDET,
'itemView'=>'...',
'sortableAttributes'=>array(),
'cssFile'=>' YOU CAN ASSIGN A CSS FILE TO YOUR CLISTVIEW',
'itemsCssClass'=>'SOME CLASS',
'pagerCssClass'=>'SOME CLASS',
'sorterCssClass'=>'SOME CLASS',
'summaryCssClass'=>'SOME CLASS',
));
for more information you can check CListView's Official document in the following link:
CListView
UPDATE:
If you want to change other names, you must edit the source of yii's CGridView. But changing the style of it could be more easier.
If you want a different, incrementing class on each looped list item, change your itemView partial like this:
using the ID of each model:
<div class="post<?php print $data->id; ?>">
<?php
print_r($data->attributes); // Or whatever
?>
</div>
using the 'index' of the current iteration:
<div class="post<?php print $index; ?>">
<?php
print_r($data->attributes); // Or whatever
?>
</div>
More info available here
I have a question about jQuery Mobile formatting, and how to get an <li> to format properly in a listview. The MVC 4 default template for a Mobile application in Visual Studio has a logoff link that uses a GET call to logoff. Here is the markup:
<ul data-role="listview" data-inset="true">
<li>#Html.ActionLink("Change password", "ChangePassword")</li>
<li>#Html.ActionLink("Log off", "LogOff")</li>
</ul>
And here is the call:
// GET: /Account/LogOff
public ActionResult LogOff()
{
FormsAuthentication.SignOut();
return RedirectToAction("Index", "Home");
}
With jQuery Mobile, it looks like this:
In contrast, the MVC 4 default template for an internet application uses a POST method for the same logoff:
#using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id =
"logoutForm" })) {#Html.AntiForgeryToken()
<a ref="javascript:document.getElementById('logoutForm').submit()">Log off</a>}
What I would like to do is to use a POST method in my Mobile application to log off instead of the default GET method (in keeping with best practice: Logout: GET or POST?). I can get the link to work properly, but what I am having trouble with is getting the button to look the way it did when it was using the GET method.
My markup looks like this:
<ul data-role="listview" data-inset="true">
<li>#Html.ActionLink("Change password", "ChangePassword")</li>
<li>#using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
{#Html.AntiForgeryToken()
Log off}
</li>
</ul>
But the result looks like this:
I’ve tried putting the <li> tags around the <a> tag instead, but the results are not any better:
Could someone explain why this <li> tag is being formatted differently than the one above it, and how I might get it to look like the one at the top of this post?
Unless you feel like creating your own custom CSS in that list item don't put the actual <form> inside of it because forms have their own default CSS. Instead keep the form somewhere outside the list item and put the button itself inside the list item
<ul data-role="listview" data-inset="true">
<li>#Html.ActionLink("Change password", "ChangePassword")</li>
<li>Log off</li>
</ul>
#using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
{
#Html.AntiForgeryToken()
}
I am trying to show the subcategories menu of prestashop categories inside all subcategories. By default you only can see the subcategories menu inside a category but you cant see the "brother" subcategories of a subcategory.
I think I only need to make this code to work inside a subcategory because this code works well inside a category:
{foreach from=$subcategories item=subcategory}
<li > <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}"
class="cat_name">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>
</li> {/foreach}
Any ideas?
Thanks so much
as always i don't give you a full code, but i tell you how to do it.
in smarty you need to create a function that takes as param number of parent category,
and in this function you need to use Category::getChildren( $id_category );then in smarty you need only take a loop through the smarty function.
regards
and sorry for my English.
For to start i would have created a override file in /override/controllers/, named CategoryController.php
And add this:
<?php
class CategoryController extends CategoryControllerCore
{
public function displayContent()
{
// Get the global smarty object.
global $smarty;
// Get current category's parent.
$parent_category = new Category($this->category->id_parent, self::$cookie->id_lang);
// Get parent category's subcategories (which is current category's siblings, including it self).
$category_siblings = $parent_category->getSubCategories((int)self::$cookie->id_lang)
/* Assign your siblings array to smarty. */
$smarty->assign(
array(
"category_siblings" => $category_siblings
)
);
/* This we run the normal displayContent, but pass the siblings array to
category.tpl */
parent::displayContent();
}
}
?>
And in product-list.tpl file:
<ul>
{foreach from=$category_siblings item=elemento}
<li {if $category->id == $elemento.id_category}class="active"{/if}> {$elemento.name} </li>
{/foreach}
</ul>
via Get sibling categories in category.tpl for the current category in prestashop