i'm trying to add some checkboxes into my form and to make them look nice. The thing is that when I use {{form.checkBoxFilter}} the output is like:
I would like to have them inline and readable, unfortunately using crispy forms renders them too close to each other.
I found that looping through elements will place them inline but still they're close to each other (their labels are much longer than shown below).
{% for x in filter.weights%} {{x}} {%endfor%}
Where to put my css in this case?
filters.py:
weights = django_filters.MultipleChoiceFilter(
label = "Filter by weight",
required=False,
widget=forms.CheckboxSelectMultiple,
choices=OZ,
method = 'filter_by_checkbox'
)
Adding directly into static/css won't work :
input[type=checkbox]
{
padding: 20px;
margin: 20px 15px 0px 3px;
}
You could use css to seperate them. For example you could use a bootstrap stylesheet in your base.html (read here).
when installed you could do it like this:
<div class="container">
<div class="row mb-1">
{% for x in filter.weights %}
<div class="col-sm-XX">
{{x}}
</div>
{%endfor%}
</div>
</div>
where XX should be a suitable size. Keep in mind bootstrap divedes the page in 12 parts. Also it comes with some css features.
Update for your edit:
assign a class to your checkbox and go for the class in the css. You can also use the built in x.as_p to display it as <p> element.
Normally, CSS works by matching element names in the HTML:p.heading1 {} affects all elements of type p with class heading1.
Is there a way to display an object/text that only exists as an attribute?
For example, this is my HTML:
<body var="text I want to insert">
<div class="titlepage">
<p class="titlepagetext">this should also be displayed</p>
The title page has a number of <p> children. In addition to them, I want to display the content of body/var on the title page.
You can probably consider CSS variables. The custom property will get inherited by all the elements inside the body and you can use pseudo element to display it where you want:
.titlepage:before {
content:var(--var);
}
<body style="--var:'text I want to insert'">
<div class="titlepage">
<p class="titlepagetext">this should also be displayed</p>
</div>
</body>
AH Formatter has an -ah-attr-from() extension function that will let you get the contents of an ancestor's attribute (see https://www.antennahouse.com/product/ahf66/ahf-ext.html#attr-from).
You could use -ah-attr-from() in a rule for .titlepagetext::before.
When you using css, you can't target parent. There is no way to get parent selector. And content: "" can apply only for pseudo-classes.
I would like to modify quite a large amount of styles on a page through a customisable panel. When a user clicks an option, the content on the page will completely change based on whatever was clicked.
This cannot be a scenario where a class is appended to a parent element and use CSS/LESS to adjust accordingly. For this scenario (for requirement reasons) the CSS needs to be internal on the angular component HTML.
Is it possible to have a value in the component TS like this:
myNewColour: "red"
That can then be used in an internal style sheet that's inside my angular component.html like this?:
<style>
.myContainer { background: myNewColour }
</style>
<!-- HTML Content -->
<div class="myContainer"> Stuff </div>
Any help with this would be appreciated! :)
"Internal in the HTML template" is called inline style ;) Apart from that, you can use ngStyle like so
<tag [ngStyle]="{'background': myNewColour}"></tag>
EDIT if it makes your code too long, what you can do is simply
let customStyle = {
'background': this.myNewColour
};
And in your tag, simply
<tag [ngStyle]="customStyle"></tag>
We used tinymce in our application and trying to migrate to CKEDITOR .
All the contents are stored in the database with <p><!-- pagebreak --></p> to do pagebreaking while generating pdf contents.
Now we are trying to migrate to CKEDITOR , the HTML code works fine and pdf generation also works fine . But the problem is that CKEDITOR doesnt display anything display for
<p><!-- pagebreak --></p> - It is like blank in WSIWYG editor .
I need to create a solution wherein CKEDITOR <p><!-- pagebreak --></p> with a CSS display ... like say a RED LINE .
I cant modify the code as it is stored in the DB , hence I need CKEDITOR to do some CSS tricks to display <p><!-- pagebreak --></p> as a red line in its editor
Is what I would do if you truly want to migrate and not have to hack any code would be to convert all the <p><!-- pagebreak --></p> in your database entries to <div class="page-break"></div> and set the css value of
.page-break
{
page-break-after:always`
}
Or to use what CKEDITOR does
<div style="page-break-after: always;">
<span style="display: none;"> </span>
</div>
Unfortunately you cannot style that HTML tag without affecting other content in that field.
You see it is defined as simply a paragraph tag with no class or other defining attributes at all (<p> as opposed to <p class="line-break">). That makes it impossible for you to "hook" your custom style into just those nodes with CSS.
The tag content is simply an HTML comment, which is never displayed and therefore cannot be styled.
You could style this if you are pulling the CK-encoded text from a database using a language like PHP for display, in which case you could do a str_replace for the HTML you noted and virtually injecting a hook such as a class name.
One other option is to use JavaScript to search the HTML for that node and dynamically inject either a class name or another node such as a horizontal rule (<hr>).
Once you have a class on just those paragraphs, the CSS you'd use would be something like:
p.line-break { border-bottom: 2px solid red; }
Can I define a class name on paragraph using Markdown? If so, how?
Dupe: How do I set an HTML class attribute in Markdown?
Natively? No. But...
No, Markdown's syntax can't. You can set ID values with Markdown Extra through.
You can use regular HTML if you like, and add the attribute markdown="1" to continue markdown-conversion within the HTML element. This requires Markdown Extra though.
<p class='specialParagraph' markdown='1'>
**Another paragraph** which allows *Markdown* within it.
</p>
Possible Solution: (Untested and intended for <blockquote>)
I found the following online:
Function
function _DoBlockQuotes_callback($matches) {
...cut...
//add id and class details...
$id = $class = '';
if(preg_match_all('/\{(?:([#.][-_:a-zA-Z0-9 ]+)+)\}/',$bq,$matches)) {
foreach ($matches[1] as $match) {
if($match[0]=='#') $type = 'id';
else $type = 'class';
${$type} = ' '.$type.'="'.trim($match,'.# ').'"';
}
foreach ($matches[0] as $match) {
$bq = str_replace($match,'',$bq);
}
}
return _HashBlock(
"<blockquote{$id}{$class}>\n$bq\n</blockquote>"
) . "\n\n";
}
Markdown
>{.className}{#id}This is the blockquote
Result
<blockquote id="id" class="className">
<p>This is the blockquote</p>
</blockquote>
Raw HTML is actually perfectly valid in markdown. For instance:
Normal *markdown* paragraph.
<p class="myclass">This paragraph has a class "myclass"</p>
Just make sure the HTML is not inside a code block.
If your environment is JavaScript, use markdown-it along with the plugin markdown-it-attrs:
const md = require('markdown-it')();
const attrs = require('markdown-it-attrs');
md.use(attrs);
const src = 'paragraph {.className #id and=attributes}';
// render
let res = md.render(src);
console.log(res);
Output
<p class="className" id="id" and="attributes">paragraph</p>
jsfiddle
Note: Be aware of the security aspect when allowing attributes in your markdown!
Disclaimer, I'm the author of markdown-it-attrs.
If your flavour of markdown is kramdown, then you can set css class like this:
{:.nameofclass}
paragraph is here
Then in you css file, you set the css like this:
.nameofclass{
color: #000;
}
Markdown should have this capability, but it doesn't. Instead, you're stuck with language-specific Markdown supersets:
PHP: Markdown Extra
Ruby: Kramdown, Maruku
But if you need to abide by true Markdown syntax, you're stuck with inserting raw HTML, which is less ideal.
Here is a working example for kramdown following #Yarin's answer.
A simple paragraph with a class attribute.
{:.yourClass}
Reference: https://kramdown.gettalong.org/syntax.html#inline-attribute-lists
As mentioned above markdown itself leaves you hanging on this. However, depending on the implementation there are some workarounds:
At least one version of MD considers <div> to be a block level tag but <DIV> is just text. All broswers however are case insensitive. This allows you to keep the syntax simplicity of MD, at the cost of adding div container tags.
So the following is a workaround:
<DIV class=foo>
Paragraphs here inherit class foo from above.
</div>
The downside of this is that the output code has <p> tags wrapping the <div> lines (both of them, the first because it's not and the second because it doesn't match. No browser fusses about this that I've found, but the code won't validate. MD tends to put in spare <p> tags anyway.
Several versions of markdown implement the convention <tag markdown="1"> in which case MD will do the normal processing inside the tag. The above example becomes:
<div markdown="1" class=foo>
Paragraphs here inherit class foo from above.
</div>
The current version of Fletcher's MultiMarkdown allows attributes to follow the link if using referenced links.
In slim markdown use this:
markdown:
{:.cool-heading}
#Some Title
Translates to:
<h1 class="cool-heading">Some Title</h1>
It should also be mentioned that <span> tags allow inside them -- block-level items negate MD natively inside them unless you configure them not to do so, but in-line styles natively allow MD within them. As such, I often do something akin to...
This is a superfluous paragraph thing.
<span class="class-red">And thus I delve into my topic, Lorem ipsum lollipop bubblegum.</span>
And thus with that I conclude.
I am not 100% sure if this is universal but seems to be the case in all MD editors I've used.
If you just need a selector for Javascript purposes (like I did), you might just want to use a href attribute instead of a class or id:
Just do this:
Link
Markdown will not ignore or remove the href attribute like it does with classes and ids.
So in your Javascript or jQuery you can then do:
$('a[href$="foo"]').click(function(event) {
... do your thing ...
event.preventDefault();
});
At least this works in my version of Markdown...