I have a Partial View which shows on multiple pages. The problem I am facing after implementing it is, The position of the partial view is beiong shuffled on different views. Each of the views have their own css layout. So, should I change the css layout of all the views or is there any workaround for it...
Typically you would render shared partials like here:
One way to do it is to have two Layouts for your pages.
Have the default _Layout.cshtml and _LayoutWithSomething.cshtml and then in your Views determine which one to use
#{
Layout = "~/Views/Shared/_LayoutWithSomething.cshtml";
}
Another way to do this is to put RenderSection block in your _Layout.cshtml
<div class="main-content">
#RenderSection("submenu", false)
#RenderBody()
</div>
And then use #section in your views, note that this doesn't work inside partial views.
#section submenu
{
#Html.Partial("_MyPartial")
}
If your css completely changes the layout I'd split the css into two: layout aspect of styling and then the others like colors etc.
Related
As per the bootstrap documentaion
Bootstrap requires a containing element to wrap site contents and
house our grid system. You may choose one of two containers to use in
your projects. Note that, due to padding and more, neither container
is nestable.
In ASP.NET MVC we have layout.cshtml page which typically includes container. and all other views gets rendered inside the this container.
Does that mean we cannot use 'container' in the individual view?
It all depends on your layout structure and what you want to achieve. There are 2 ways to accomplish this (I can't think of any more).
I don't use containers in my _Layout.cshtml template. I normally have my containers in my views. My _Layout.cshtml template only has the bare minimum.
This is what my _Layout.cshtml template normally looks like:
<body>
#RenderBody()
#Html.Partial("_Footer")
#Scripts.Render("~/bundles/js")
#RenderSection("scripts", false)
</body>
And then in my views I would have the following:
<div class="container">
<p>Test paragraph</p>
</div>
You can also have the container in your _Layout.cshtml template but then in your views you must just remember that you already have a container that you are working with. So your _Layout.cshtml it could look like this:
<body>
<div class="container">
#RenderBody()
</div>
#Html.Partial("_Footer")
#Scripts.Render("~/bundles/js")
#RenderSection("scripts", false)
</body>
And then your view could look like this:
<p>Test paragraph</p>
The best way to see what will work in your scenario is to play around with the various positionings of the containers and the other HTML components. It will take a while but it will give you an indication of what is possible and what is not.
I have a requirement to white label (specifically changing header logo/menu/font colors) our existing asp.net web forms site per each customer. Customer will be able to pick the colors they want for the site.
The site is a portal and consists of multiple web sites. I don't want to use themes or different master pages because we don't have the bandwidth for restructuring the app heavily. As far as I can see I have a few options. I want to know if there is more or someone knows any other better/best way to do this. The first two options may be similar but one could be better performance.
Have a dummy css class for all the "color changing" sections - say customColor.
Examples
<div class="menu customColor" />
<div class="header customColor" />
menu and header css classes contain all styles but the color.
Programmatically add color to this css class when the master page loads. Pseudo code : Page.Header.Controls.Add(New LiteralControl("<style type=""text/css""> .customColor { color: blue }");
Have a asp.net ashx handler return whiteLabel.css that contains customColor { color:blue }; and add this css to the page dynamically.
It is not that many elements in every page that needs to change. You can have a function in each page that sets the appropriate colors from the database.
I assume my options pretty much are dynamically changing css or programmatically setting colors to individual elements.
Also I would think it may be better to do option#1 than #2 because does css get cached on #2? This will make it difficult for companies to change colors.
Does all your pages use a common MasterPage?
If so, then I have once used setting a class for body or may be a div wrapper like:
<div class='<%= GetCustomClass() %>'>
<div class="menu customColor" />
<div class="header customColor" />
</div>
GetCustomClass is a static method that will return say class1 or class2 based on customer's selection.The css will look something like:
class1.customColor{color:blue;}
class2.customColor{color:red;}
Hope that helps.
Let's rule out option 3 also, it may fail to reskin the page if a javascript error occurs during the page load.
That leaves option 1, although you might want something a bit more readable:
<style>
.menu.customColor { color: <%= menuColor %>; }
.header.customColor { color: <%= headerColor %>; }
</style>
I am using ng-view to render dynamic data on my page. When the page loads, if I use static html I get this (top):
When Angular loads the page the data is there but it's like the element is still empty (bottom).
If I make even the slightest adjustment in Chrome dev tools, the items snap into place but I cannot get them to prefill without using CSS to make them static sizes, which doesn't work because text is different sizes. The elements in question have CSS of inline-block.
As you can see in this screenshot, I have tried two ways of populating the data, both with the same result:
<div class="cd-rating" ng-class="caseData.scoreClass">
<span class="score" ng-bind="caseData.adjustedScore | number:0" ng-cloak>N/A</span>
<span class="verdict">{{caseData.recommendation}}</span>
</div>
Here is the what the HTML looks like in the browser:
<div class="cd-rating medium" ng-class="caseData.scoreClass">
<span class="score ng-binding" ng-bind="caseData.adjustedScore | number:0">349</span>
<span class="verdict ng-binding">review</span>
</div>
If I hard-code that HTML identically, then it renders perfectly. It's only when Angularjs renders it that the elements are collapsed, appearing if there is not content.
I would also like to add that I am using RequireJS and manually bootstrapping the app instead of using the ng-app directive, in case that matters.
Any ideas on how to make the view fill the elements?
EDIT: Here is a video that demonstrates the behavior: http://youtu.be/zTwv-o6mWRM
I am not able to figure out what exactly you mean by the "..data is still there but the element is empty.." - the only issue that I find with the rendering by AngularJS is that the "Review" (button?) is overwritten with the number.
Looking at your code (which, as #Wingman4l7 suggests needs to be posted in the question rather than as a image), I see that you are using bindings to define a class dynamically. Instead, can you use the ng-class directive and see if it resolves the issue?
That is, replace:
<div class="cd-rating {{caseData.scoreClass}}">
with
<div class="cd-rating" ng-class="caseData.scoreClass">
instead and check if the issue gets resolved?
I am trying to edit blocks in drupal 7.x . My base theme is Zen. In block.css I am able to change the css style of the blocks according to their numbers. But its confusing,is there there any other way to edit the style of the blocks ?
Besides block numbers, actually drupal will attach quite a lot information for styling when generate the HTML, here is an example for the default Main Menu system block:
<div id="block-system-main-menu" class="block block-system block-menu first last odd" role="navigation">
</div>
As you can see, here we have block name embedded in div id, block type embedded in div class, and you can choose which one to use.
There is always the Block class module which lets you add custom classes to blocks for easy theming.
I have a repeater of div's that look a little bit like this:
<div class="header_div">
<!-- Content -->
</div>
I want to have the background color of the divs change based on a dynamic property of the content of the div (lets call it the category), but I still want the "header_div" style to be assgined in cases where I dont have a css class for that category. Whats the best way of doing this?
The best way I can think of is to render the category as the "id" of the div and apply styles based on the id, but that strikes me as really messy - standards dictate that the id should uniquenly identify the element on the page and there will definitely be repeats of each category.
The simple answer would be to use multiple classes for the <div> so that
<div class="header_div header_red">
<!-- Content -->
</div>
<div class="header_div header_green">
<!-- Content -->
</div>
You're correct about the need for IDs to be unique.
There's nothing stopping you from specifying more than one value per class attribute - just separate them with a space.
<div class="header_div category">
<!-- Content -->
</div>
Just be careful to check what happens when both classes specify different values for the same style - I can't say whether the first or the second would take precedence.
You could supply multiple styles for the div class:
<div class="header_div mystyle">
<!-- Content -->
</div>
I believe styles declared later in the declaration override earlier ones. As long as you ensure your custom styles "shadow" those of the header-div, you can always include the header-div element, and it will only have an effect when any secondary style is absent (or empty).
If it's going to be used repeatedly on the page, it should be a class.
If it's unique on the page, use an id.
Without knowing more about your content, can you not use one of the header tags (<h1> etc)?
You are correct, IDs should be unique and if you want to use the same style more than once then use a class.
You can't have duplicate IDs so if you had multiple divs of the same category you would have an issue. Classes should be used when the style needs to be applied for 1 or more items on a single page.
Why not assign the class on databinding of the div based on the category? As your repeater is getting bound, find your div for the item you are binding and assign it.
You could also substitute the div for an asp:Panel and use it's onDataBinding method. It should look exactly like your div.