Please help me to fix this issue. I have two files BaseLayout.cshtml and the second one is ExtendedLayout.cshtml file for overriding the base content of HTML CSS.
I need to run the extended section of extendedLayout.cshtml file if same section is present in override otherwise base would work. Same as OOPS override concept.
Base Layout CSS Code
#section HeadCssSection {
#*Base Layout CSS *#
#Styles.Render("~/Content/BaseCSS")
#RenderSection("HeadCssSection")
}
Extended Layout CSS Code
#section HeadCssSection {
#Styles.Render("~/Content/ExtendedCSS")
#RenderSection("HeadCssSection")
}
Please help me to fix this issue
You can use isSectionDefined() like following
#if (!IsSectionDefined("HeadCssSection")) {
RenderSection("HeadCssSection")
}
In Base layout, write the code like this.
#section HeadCssSection {
#if (IsSectionDefined("HeadCssSection"))
{
#RenderSection("HeadCssSection")
}
else
{
#Styles.Render("~/Content/BaseCSS")
}
}
Define this HeadCssSection in extended layout so that it will take extended layout code. And if you want to run the code of base layout, then put the code in else condition.
Related
Here is what I want to do:
#if (condition)
{
<div class="test">
}
<span class="test2">...</span>
#if (condition)
{
</div>
}
This does not work because the Blazor compiler thinks the div is never closed.
So I need to do this:
#if (condition)
{
<div class="test">
<span class="test2">...</span>
</div>
}
else
{
<span class="test2">...</span>
}
It works fine, but I have a big code redundancy with the span.
How can I do this properly?
Please note div and span are examples. In reality, my code is bigger.
Thanks
What you're seeing is really a Razor syntax issue rather than specifically a Blazor issue. This question and answer cover it well.
So, you can do what you're trying to do in the first example, but there are also other ways of solving that issue, at least one of which is Blazor specific (there are more no doubt):
Make the class conditional
Rather than trying to not render the div, you could make the class itself conditional.
So in the code section of your page you could declare a property:
#code {
string myClass = "";
protected override void OnInitialized()
{
if (condition)
{
myClass = "whatever";
}
}
}
And then use that in your razor:
<div class='#myClass'>
<span class="test2">...</span>
</div>
That way the span is only on the page once.
Split the common code into a separate component
Another approach is to make the common part (the span in this case) into a separate component and then render that component conditionally:
#if (condition)
{
<div class="test">
<YourComponent />
</div>
}
else
{
<YourComponent />
}
That's probably overkill for the span in your example, but makes more sense where the new component would be replacing multiple lines of code.
I am using draft js to create email templates in a reactJs application.
I implemented custom block types and with css I was able to align my columns properly (left, center, right). I used RichUtils to toggle block type.
However, my problem is when I am exporting the editor state into html, only the tags are exported, but I need the style too, so that the text-align style remains the same.
I use stateToHtml from draft-js-export-html when exporting the html.
I was also thinking about adding custom attributes, but I was not successful with it yet.
I appreciate every answer and thank you for the help in advance.
you can try this way:
import { ContentState, convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
const currentContent = this.state.editorState.getCurrentContent();
return draftToHtml(convertToRaw(currentContent));
As an extension on #ArtemZubarev , there will be a problem when exporting it to html because it will contain no styles. So this requires 2 answers
How to get state to html: credits to #ArtemZubarev
import { ContentState, convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
const currentContent = this.state.editorState.getCurrentContent();
return draftToHtml(convertToRaw(currentContent));
However, this will return unstyled elements, for example: <h1>Hello World</h1>.
This raises the question: How to keep the styling?
Option 1: CSS
Option 2: Create a render function that will inject the styles as inline
private injectHTML = (html?: string) => {
return `<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
${
html
}
</body>
</html>`
}
I'm wondering if it's possible to use media queries with CellLists. For example:
interface MyStyle extends Style {
}
public interface MyResources extends Resources {
#Source({ Style.DEFAULT_CSS, "MyStyle.css" })
MyStyle cellListStyle();
}
And then I have the CellList CSS file "MyStyle.css" :
/* cell flow basic css style */
.cellListWidget {
}
.cellListEvenItem {
}
.cellListOddItem {
}
.cellListEvenItem:hover,.cellListOddItem:hover {
}
.cellListKeyboardSelectedItem,.cellListSelectedItem:hover {
}
.cellListSelectedItem {
}
Is it possible to have something like this
#media ( min-width : 768px) {
.cellListEvenItem {
height: 90px;
}
}
inside MyStyle.css ? I tried and it doesn't seem to recognize it (no errors or warnings, but it doesn't work either).
I used it like this:
new CellList<MyObject>(listCell,
(CellList.Resources) GWT.create(MyResources.class));
If the above is not possible is there any workaround to achieve this?
Thank you.
CSS Resource didn't allow to use CSS3 media queries.
You must use the new stylesheet compiler named GSS in the GWT version 2.7.
You must update your project to the version 2.7.
In your gwt.xml add this line for activate the new GSS :
<set-configuration-property name="CssResource.enableGss" value="true" />
And rename your css file to MyStyle.gss
You may need to change some CSS Resource code :
http://www.gwtproject.org/doc/latest/DevGuideGssVsCss.html
You can learn more in the presentation from last GwtCreate :
https://drive.google.com/file/d/0BwVGJUurq6uVNGgtOWtOdy0wRzQ/view
I recently encountered a.. "thing" in the land of SASS. And maybe you guys know a trick or something alike to "fix" it.
I've got this class .icon. It contains some basic styling for my icons (Used for an iconfont). These icons can then be placed in the markup whereever I want. For example in a button. But inside the button this icon needs some extra styling. So I do the following:
.icon {
// Basic styling
}
button {
.icon {
// Additional styling
}
}
It compiles to this css:
.icon {
// Basic styling
}
button .icon {
// Additional styling
}
Everything OK so far. But now I want to extend the .icon to an after-element inside of all my .foo elements like so:
.foo:after {
#extend .icon;
}
Now it compiles to this css:
.icon, .foo:after { // This is good, exactly what I want
// Basic styling
}
button .icon, button .foo:after { // But I don't need the second half of this line
// Basic Additional
}
Now the foo-element isn't just extending the "root" icon-class but also the icon-class under button and all its additional stylings. But I don't need that. I don't want that element to have that additional styling. It doesn't result in problems yet. But maybe that could happen later. So I was curious if it is possible to extend only the .icon from the root, omitting the nested .icon in the button, and possibly more nested icon-classes in other elements later on.
My first thought was to use an abstact class like %icon and extend from that, but the above mentioned icon-class, and the file that it is placed in, is generated by grunt-webfont. So I can't just change the icon-class styling 'cause its overwritten all the time.
What can I do? Is there some more to the extend function of SASS that I don't know of? Or is there a totally different way?
Thanks for any help.
SOLUTION:
Using all the awesome help and tips I found a way to avoid this problem:
Grunt-Webfont suggests to use the i-tag to display the icons. Font-Awesome does the same. So, I'm doing exactly that. And I usually don't use it for anything else.
This allows it to use the i-tag under the button for my extra styling, and not the .icon class. This way the .icon class is used only once in the generated file and then never again.
.icon {
// Basic styling
}
button {
i { // <= Previously '.icon'
// Additional styling
}
}
Have you tried doing something like this?
.icon {
//some styles from external (ie: grunt webfont)
color: red;
}
%icon {
#extend .icon;
}
button {
.ico {
#extend %icon;
//add some additional styles
}
}
.foo:after {
#extend %icon;
//add some more
}
You would then avoid generating the foo:after rule for the .icon inside the button.
EDIT2 - you'll need to create an additional class which you can use inside your styles, so there's only one .icon class defined (in your grunt-webfont generated css). Then just use the .ico class inside your styles and extend the %icon placeholder like shown above.
EDIT - have you considered solving this problem in your grunt-webfont generator?
From the documentation, it seems you can set the output to scss like so:
options: {
stylesheet: 'scss',
mixinPrefix: 'mixin-'
Then just use the mixin to define the styles of your desired classes?
I think this gets the result you're looking for? Albeit, slightly messily.
The method: make a placeholder style and extend that into .icon to begin with.
%icon-styles{
basic: styling;
}
.icon {
#extend %icon-styles;
}
.foo:after {
#extend %icon-styles;
}
button .icon {
#extend %icon-styles;
additional: styling;
}
It compiles into:
.icon, .foo:after, button .icon {
basic: styling;
}
button .icon {
additional: styling;
}
You can also use custom template with grunt-webfont. It’ll give you much more control on generated CSS.
I'm creating a tumblr them and I have to write an external CSS file but I am having trouble editing the css style of the post elements.
This its structure:
<li class="post quote">
{other code}
</li>
The problem is that the class name has a space in it.
How would I create a CSS class to access this? And yes, I know I can just put a style attribute in the element tag but I was kind of hoping for another option.
The problem is that the class name has a space in it.
This is not possible in CSS. What you are doing is giving the element two classes.
You can address them such:
.post.quote { .... }
but in your case, it's probably better to use a valid separator like
post_quote
This element actually has two classes - it is marked with both the post class and the quote class. So, you can use the following selectors to access it:
// css
.post { ... } // elements with the post class
.quote { ... } // elements with the quote class
// jQuery
var postLis = $('.post');
var quoteLis = $('.quote');
You can also stack selectors to return all elements which meet all conditions in the selector, by including the different selectors together:
// css
.post.quote { ... } // elements with both the post and quote classes
// jQuery
var postAndQuoteLis = $('.post.quote');
This might work:
$('li').each(function() {
if($(this).attr('class').indexOf(" ")>-1) {
$(this).css('border','1px solid #ff0000')
}
}