The first image and the file label are on the same line, but the last image is on a second line.
I would like the three items to be on the same line.
Here is my code:
HTML:
<div>
<img src="{{asset('bundles/cramifaccueil/images/pdfdocument.png')}}"
title="{% trans %}dialog.pdf.file{% endtrans %}"
class="smallImagesFloatLeft"
/>
<div class="fileLabel">{% trans %}file.note.service.2584{% endtrans %}</div>
<img src="{{asset('bundles/cramifaccueil/images/download.png')}}"
title="{% trans %}download{% endtrans %}"
class="smallImagesFloatRight"
/>
</div>
<div>
<img src="{{asset('bundles/cramifaccueil/images/pdfdocument.png')}}"
title="{% trans %}dialog.pdf.file{% endtrans %}"
class="smallImagesFloatLeft"
/>
<div class="fileLabel">{% trans %}file.mode.operatoire{% endtrans %}</div>
<img src="{{asset('bundles/cramifaccueil/images/download.png')}}"
title="{% trans %}download{% endtrans %}"
class="smallImagesFloatRight"
/>
</div>
CSS:
.smallImagesFloatLeft {
float:left;
margin-right:5px;
cursor: default;
}
.smallImagesFloatRight{
float:right;
}
.fileLabel {
max-width: 75%;
}
Assuming there is room on one line, you simply need to re-order your elements so that the floats come before the non-floated element:
<div>
<img src="{{asset('bundles/cramifaccueil/images/pdfdocument.png')}}"
title="{% trans %}dialog.pdf.file{% endtrans %}"
class="smallImagesFloatLeft"
/>
<img src="{{asset('bundles/cramifaccueil/images/download.png')}}"
title="{% trans %}download{% endtrans %}"
class="smallImagesFloatRight"
/>
<div class="fileLabel">{% trans %}file.note.service.2584{% endtrans %}</div>
</div>
http://jsfiddle.net/o0ksu724/
It seems that you forgot to float:left your .fileLabel.
just remember to use a clear:both after your floated elements.
<span style='clear:both'></span>
just add this inside the parent div after all your floated elements.
Well, It would be a lot better if you provided us a fiddle to understand in a better way that what are you actually getting from the code and what do you expect from it.
I believe there can be 2 reasons for the images not appearing on the same line are:
Images are too big to fit the size of the page so they are forced to move on the second line. If that is the case, then, obviously you'll have to reduce the size of images.
There may be coding issues and for that I think you should use
position: absolute
the following line of code first in the desired image and property first and then check if its working or not.
Also, I would like to tell you what I do usually to solve these kinds of problems. Choose some background color of the div tags background: redto see where and how much spaces these divs are taking on the page and then move further with that.
In fact, I realized the only thing to do is to add :
display: inline
on the fileLabel class
Related
I have this liquid code:
<a href="{{ section.settings.button_link }}" class="btn--rounded">
{% include 'icon-btn--rounded' %}
<div class="link-label">{{ section.settings.button_label }}</div>
</a>
And when the button is hover, I need to show a different icon, for example:
{% include 'icon-btn--white' %}
I now that I can use display: none for that, but how can I dynamically change between buttons when I hover?
You have to use CSS to show the different icons on hover.
Liquid is a language that loads before the DOM is ready. This means that once you see content of the page the liquid code has finished its execution and it will not fire again until a reload of the page.
Or to say it in developer terms - you are trying to load a back-end function via the front-end, which is a big "no-no".
CSS and JS can't interact with liquid, but liquid can interact with them. Or to say it more simply you can create javascript and css code using Liquid, but you can't create liquid code using JS and CSS.
In addition includes are deprecated and you should be using render instead.
Here is the code that you should use:
<a href="{{ section.settings.button_link }}" class="btn--rounded">
<div class="icon">
{% render 'icon-btn--rounded' %}
</div><!-- /.icon -->
<div class="icon icon--hover">
{% render 'icon-btn--white' %}
</div><!-- /.icon -->
<div class="link-label">{{ section.settings.button_label }}</div>
</a>
<style>
.icon--hover {
display: none;
}
.btn--rounded:hover .icon {
display: none;
}
.btn--rounded:hover .icon--hover {
display: block;
}
</style>
In django easy to generate an iterated list of titles from context received by template:
{% for instance in object_list %}
<li>{{instance.international_title}} </li>
{% endfor %}
And in css easy to create a popup overlay:
#overlay
{
height:300px;
width:300px;
margin:0 auto;
position:relative;
z-index:10;
display:none;
border:5px solid #cccccc;
border-radius:10px;
}
<div align="center">
Click Title for Detail
</div>
<div id="overlay">
<p> Here is the text giving more detail<p>
</div>
Would like to be able to associate a unique text with each unique title {{instance.international_short_description}} for the purposes of the overlay popup. However do not see how to do this. Is it necessary to somehow create a series of css classes: #overlay1, #overlay2 with custom href to each one? Is it possible to use a single class, pass a variable to it and then select the correct text? Have not been able to find examples.
You can alter the id, for example by adding the primary key of the instance, like:
{% for instance in object_list %}
<div align="center">
{{ instance.international_title }}
</div>
<div id="overlay{{ instance.pk }}">
<p>{{ instance.international_short_description }}<p>
</div>
{% endfor %}
I’m working with a mat-tree in my Angular 7 application. It looks like this:
<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree">
<mat-tree-node *matTreeNodeDef="let node">
<li>
<span *ngFor="let item of getArrayForIndenting(node)"> </span>
<button mat-icon-button disabled></button>
{{ node.name }}: {{ node.value }}
</li>
</mat-tree-node>
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
<div>
<span *ngFor="let item of getArrayForIndenting(node)"> </span>
<button mat-icon-button matTreeNodeToggle>
<mat-icon class="mat-icon-rtl-mirror">
{{ nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
</mat-icon>
</button>
{{ node.name }}
</div>
<ul [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</mat-nested-tree-node>
Notice that each node is spaced really far apart vertically. This is what I’m trying to adjust.
I’ve tried everything. I’ve tried styling the height of various elements in the above markup, the line-height, the margins, the padding, etc., but nothing works.
According to this site:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_ul_compact_css
I should be able to set the line-height on the ul element, but I tried that and it doesn’t work.
Can anyone tell what I’m supposed to do? Thanks.
EDIT: Here's the CSS:
.example-tree-invisible {
display: none;
}
.example-tree li,
.example-tree ul {
list-style-type: none;
}
Note that I removed the "mat-tree-node" class 'cause it didn't exist.
There's also a reference to fonts.googleapis.com in my index.html file:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
...which is probably what mat-icon-rtl-mirror comes from.
Hope that helps
Yes, you are right you should be able to set line height of ul or li elements. However, you have not pasted the css for the above code. Please give us css or create https://plnkr.co/
so that we can debug and help you. It is also possible that you may have margin or padding in ul or li element, check that as well.
just use .css to override min-height, e.g.
.mat-tree-node {
min-height:1.6rem; //min-heigth:0 if you want the min heigth possible
}
The only working way I found with angular 8 on a nested element (and nested tree) is
.mat-tree-node {
min-height: 1.2em !important;
height: 1.2em;
}
Here is my code
<div>
<p>hello nirmesh</p>
<span> <img src="x.png"/></span>
</div>
I want is to show image next to my <p> tag and not below it. Please anyone help me to resolve this
Making the p tag, which is defaulted to "block" an "inline-block" element, will let other elements flow along after it. It's best to add these rules in an external stylesheet, but for illustration:
<div>
<p style="inline-block; margin-right: 5px;>hello nirmesh</p>
<span><img src="x.png"/></span>
</div>
Set the display of the p tag to inline.
p {
display: inline;
}
<div>
<p>hello nirmesh</p>
<img src="x.png"/>
</div>
<div>
<p style="display:inline-block;>hello nirmesh</p>
<span> <img src="x.png"/></span>
</div>
I'm working on a dynamic album art grid with CSS and Bootstrap 3 and everything works fine, when all images are scaled 1:1. But when an image occurs that is not scaled like that, my grid breaks. Here is a screenshot of my problem:
Screenshot
But what I want is
The code to generate the grid looks like this:
<div class="row">
<div class="col-md-6 panel panel-default" v-for="result in results">
<img src="{{ result.art }}" />
<strong>{{ result.title }}</strong>
<br />
from <strong>{{ result.album }}</strong>
<br />
by <strong>{{ result.artist }}</strong>
</div>
</div>
I'm using Vue.js for this template.
So I can't place such two col-md-6 into one row, but when I chain the columns the grid is breaking.
Is there any way to get a correct grid with these kind of images? I don't need something like masonry-style, just a regular bootstrap grid.
Thanks for your help! :)
You need to add something every 2 col-md-6 to ensure the left floats clear..
One way is to use Bootstrap's clearfix reset, another way is to use a CSS reset like this..
#media (min-width: 768px) {
.row > .col-md-6:nth-child(2n+1) {
clear: left;
}
}
http://www.codeply.com/go/oAiZNlWgau
There are a few ways to achieve this.
Wrap each row into it's own row
<div class="row">
<div class="col-md-6>Content</div>
<div class="col-md-6>Content</div>
</div>
You can also set a min-height for each item, that way they will always be the same height.
Lastly, you can not use the bootstrap grid system and build your own grid by using display: inline-block; just be sure to set negative margin on each element and v-align to top.
Hope this helps :P