I put ckeditor widget to my post form with {{ form.content }} and I need to change its style display: inline-block to display:block.
Here you can see the code which I need to change
Related
Using the guidance linked to at Add template for taxonomies to Blogdown default theme I was able to add tags to show-up at the top of my posts and create a /tags page -- for my lithium themed hugo blogdown website.
How can I have the post tags show-up in the summaries of my lithium themed site (i.e. so they show-up on the home page)?
(https://www.bryanshalloway.com/ ; source code on github)
First, add the following HTML to your layouts/_default/list.html template, inside the <article> tag and after the <div class="summary">.
{{ with (.GetTerms "tags") }}
<div class="tags">
{{ range . }}
<div class="tag">
{{ .LinkTitle }}
</div>
{{ end }}
</div>
{{ end }}
Then to make it look better, you can add some CSS similar to this:
.tags {
display: flex;
flex-flow: row wrap;
gap: 8px;
}
.tags .tag {
/* override the `margin: auto;` rule which applies to all divs and iframes,
* defined in main.css */
margin: 0;
font-size: small;
}
Here is how it looks with the code I provided:
example image
I'm developing an Ionic app, and having trouble with my header component. Its elements are wrapping with small screen sizes, and I would like them not to.
Here's the goal:
Here's what's happening now:
I know I could set a fixed width to the header, but I would like not to. I also wouldn't like to use JavaScript to calculate the width.
Here's the HTML/Angular/Ionic code for the title component:
<h1 *ngIf="backButton; else titleBackButton">{{ title }}</h1> <!-- show if backButton != true -->
<ng-template #titleBackButton> <!-- show if backButton == true -->
<button ion-button round class="button-back">
<ion-icon name="arrow-back"></ion-icon>
</button>
<h1 class="floated-title">{{ title }}</h1> <!-- this has been floated to the right -->
</ng-template>
Here are my CSS styles:
.button-back {
margin: 17px 0 0 10px;
}
.floated-title {
float: right;
}
Any time you want to force elements to line-up in a row, and never wrap, give the parent container display: flex. This automatically applies flex-wrap: nowrap and flex-direction: row.
The above suggestion applies to plain CSS. Some frameworks may set different defaults.
For instance, in React, flex-direction defaults to column.
Alternatively, you can apply white-space: nowrap to the container, which suppresses all line breaks inside the container.
I have two buttons that I want to align to be in the same line, and for some reason the second one is below the first one...
I thought grouping them in one div will help.
this is my current html, there is probably some difficulty with my attempt to group <md-switch> with <button>.
<div>
<button md-button (click)="publish()" class="md-primary">Update</button>
<md-switch [(checked)]="data.cb1">Sho: {{ data.cb1 }}</md-switch>
</div>
If I am adding a style attribute to it, only the button reacts, so obviously something is going on with the md-switch.
<md-switch> is a directive and no button. So the HTML will be replaced/parsed by angular which (as I think) outputs a block-level element.
Solutions for that would be to use either display: inline-block; or float: left;.
display: inline-block; is easier but will add 1px margin to your elements.
For floats the <button> has to be display: block;, too.
I have an html file a part of which is as follows:
<ul>
{% for tree in tree}
<li> <a href="{{ url_for('fruits', tree_id=tree.id) }}">
{{ tree.tree_name }} - {{ tree.tree_year }}
</a>
<span class="hyphen"> - </span>
<a href="{{ url_for('stats', tree_id=tree.id) }}">
stats
</a></li>
{% endfor %}
</ul>
and the corresponding .css is as follows:
.hyphen{ margin-left:80px; margin-right:80px }
But the span tag doesn't seem to have any effect at all. I want to give space before and after the hyphen but it isn't working. Why so?
A span is by default an inline element, inline elements can't have vertical padding / margin.
To fix this you can do two things,
the first is to give the element display: block but this is most likely not what you want as it was inline before.
Then there's display: inline-block as noted by D4V1D which will give you the ability to style that span like a block level element.
Add
.hyphen {
display: inline-block;
}
to your <span>.
You can't set width, height and vertical margin and padding properties to elements which aren't block elements.
I have a custom tag within my html, the custom tag is a directive, within the custom I have a text field.
How can I hide that text field using css based on that tag
html
<state>
<input type="text"/>
</state>
Just do this:
body state input{
display: none;
}
JSFIDDLE