I have got two pages. The first one, parent.jade, which contains:
div.header
block header
And the second one, child.jade, contains:
extends main
block prepend header
So, how I can to add a class for header block in my child.jade? I need to have other class naming at the different pages.
Yes, but you must pass a object to jade to be that which is rendering. I.e.
In nodejs
jade.renderFile('child.jade', {
"myIds" : 'FristPage',
"myClass" : [ 'this', 'is', 'cool' ],
})
In your parent.jade
div.warpper( id=myIds, class=myClass )
block content
When render show
<div class="warpper this is cool" id="FristPage">
The block form child.jade
</div>
But it can not do directly from jade or from files jade.
Related
I am trying to add a CSS class to the whole form_row in a twig template from Symfony 4! As you can see from the image, my code right now only adds the class to the input tag, put I need the class to be added to the parent div container.
Below is my code:
{{ form_row(form.firstname, { 'attr' : {'class' : 'first_name'} }) }}
below is an image of the rendered code:
From the documentation of symfony:
attr: A key-value array that will be rendered as HTML attributes on the field.
This means the attributes only get applied to the field.
You could instead wrap the whole div in another div like so:
<div class='first-name'>
{{ form_row(form.firstname) }}
</div>
And then apply the style either to div.first-name or div.first-name > div
Alternatively: Render the whole row yourself
With the following you can render the label and widget yourself:
<div class='first-name'>
{{ form_label(form.firstname) }}
{{ form_widget(form.firstname) }}
</div>
My goal is to render different pages with different layouts to one div on my index page. The idea is that only one div ("create-focus") changes and I want the other pieces to only have to load once.
This is a proof-of-concept so everything that I am building is local (I have no addresses to redirect to. Only local files to import.)
I have an index.jx as thus:
<div class="col-md-12">
<div id="create-header"></div>
<div id="create-top-banner"></div>
<div id="create-menu"></div>
<div id="create-focus"></div>
<div id="create-footer"></div>
</div>
I would like to replace the id "create-focus" with new html from another jsx :
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./AdBanners.css";
class AdBanners extends Component {
render() {
return (
<div className="AdBannerBody" id="ad-banners" ref={this.myRef}>
<h2>Stuff and Things</h2>
</div>
);
}
}
export default AdBanners;
const wrapper = document.getElementById("create-adBanner");
wrapper ? ReactDOM.render(<AdBanners />, wrapper) : false;
I have tried to load just the html, but it simply prints the code to my screen as text. Do I need to run another render call? How is that possible?
I don't understand very good what you're trying to do, is it to set the inner html of the div "create focus"?
take a look at:
https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
You are misusing ReactDOM.render. The second argument should be a reference to a normal HTML element you want to render your element as the child of. So in your case you would want to call:
ReactDOM.render(<AdBanners />, document.getElementById("create-focus"))
Although I'm not sure this is exactly what you're trying to do. The setup for this app seems very strange to me.
Is there a way to add white space in MVC while using variables? for example foreach(item in collection) {#item #item}. How to make a blank space something like " " in it?
You can use pre tag , which defines preformatted text.
foreach(item in collection) {
<pre>#item #item</pre>
}
have you tried this can be repeated i.e. you can do line breaks with <br />
In my application I have used a space after the link's name ("Details ") as shown here
#Html.ActionLink("Details ","Details", new { Variable_ID = item.VIP_ID})
#Html.ActionLink("Edit", "Edit", new { Variable_ID = item.VIP_ID })
so my links will look like this: Details Edit, instead of DetailsEdit.
You can also put a separation bar like this "Details | ", so you can have
Details | Edit
<span> </span>
Insert " " to add more blank spaces
//This will work for sure, as MVC C# using razor syntax then you just need to put space between those two only
foreach(var item in collection) {
<span>#item #item</span>
}
If you wish to add single space between item:
foreach(item in collection)
{
<p>#item #item</p>
}
But you will have better flexibility if you wrap it in a HTML element like div or span,
and then add padding/margin to the element using CSS.
foreach(item in collection)
{
<div class="user-defined-classname">#item</div>
<div class="user-defined-classname">#item</div>
}
In CSS
.user-defined-classname{
padding-left|right|top|bottom: 10px
}
Suggestion:
The "Views" folder is specifically meant to just contain your view files (i.e. .cshtml files).
Try adding your CSS file to a folder in the root of the ASP.NET project. Often, this folder is named "Content", but you can rename it as "Styles" or something else. Then you can load your CSS file from within a view using a link tag:
<link href="~/Content/styles.css" rel="stylesheet" type="text/css" />
This may help.
One more variant:
#(string.Format("{0} {1}", item, item))
I have a jade template
extends _base
block content
include ./partials/_main-header
.Template2RightBig
.container
.row
block content2RightBig
.col-md-3.Template2RightBig--left.column
block left-column
.col-md-9.Template2RightBig--right.column
.Template2RightBig--right-header
block right-column-header
.Template2RightBig--right-annotation
block right-column-annotation
block right-column
include ./partials/_footer
I want to show or hide right-column-annotation block WITH its parent container(.Template2RightBig--right-annotation) in pages, which will extend this page.
How can I do that with Jade power?
You can pass a variable from your child page into this template through a new block in order to conditionally control anything in this template.
_your-template.jade
extends _base
block content
include ./partials/_main-header
.Template2RightBig
.container
.row
block content2RightBig
block page-variables
.col-md-3.Template2RightBig--left.column
block left-column
.col-md-9.Template2RightBig--right.column
.Template2RightBig--right-header
block right-column-header
if rightAnnotationVisible === true
.Template2RightBig--right-annotation
block right-column-annotation
block right-column
include ./partials/_footer
_your-page.jade
extends _your-template
block page-variables
- var rightAnnotationVisible = true
//- annotation and parent wrapper will render
_your-other-page.jade
extends _your-template
block page-variables
- var rightAnnotationVisible = false
//- annotation and parent wrapper won't render
Just be sure the new block is scoped to be included in the right place in the parent blocks.
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')
}
}