I have a button to go to a link, but when the visitor is the user that created the page, that button needs to also have an X so it can be deleted by the user-owner.
1) Tags: The solution that works has the problem that: I can make the 2 buttons, but it is difficult to spot visually which X corresponds with each button (when there is more than one).
2) Tags: On the other side, when I put them together you can not click on the X, because it always takes you to the buttons' link.
NEED: I need a button with two parts, one for the delete X and another for the link of the text, but I do not see how to do it. Please, see the image.
<div class="g-mb-30">
<h6 class="g-color-gray-dark-v1">
<button id="jh-create-entity"
*ngIf="owner === post.userId"
class="btn btn-primary float-right jh-create-entity create-tag"
[routerLink]="['/tag/new']" [queryParams]="{ 'postIdEquals': post.id }">
<fa-icon [icon]="'plus'"></fa-icon>
</button>
<strong class="g-mr-5">Tags:</strong>
<span *ngFor="let tag of post.tags">
<a (click)="removePostTag(tag.id, post.id)">
<fa-icon [icon]="'times'"></fa-icon>
</a>
<a [routerLink]="['/tag', tag.id, 'view' ]" class="u-tags-v1 g-font-size-12 g-brd-around g-brd-gray-light-v4 g-bg-primary--hover g-brd-primary--hover g-color-black-opacity-0_8 g-color-white--hover rounded g-py-6 g-px-15 g-mr-5">
{{tag.tagName}}
</a>
</span>
</h6>
<h6 class="g-color-gray-dark-v1">
<button id="jh-create-entity"
*ngIf="owner === post.userId"
class="btn btn-primary float-right jh-create-entity create-tag"
[routerLink]="['/tag/new']" [queryParams]="{ 'postIdEquals': post.id }">
<fa-icon [icon]="'plus'"></fa-icon>
</button>
<strong class="g-mr-5">Tags:</strong>
<span *ngFor="let tag of post.tags">
<a [routerLink]="['/tag', tag.id, 'view' ]" class="u-tags-v1 g-font-size-12 g-brd-around g-brd-gray-light-v4 g-bg-primary--hover g-brd-primary--hover g-color-black-opacity-0_8 g-color-white--hover rounded g-py-6 g-px-15 g-mr-5">
<span>
<a (click)="removePostTag(tag.id, post.id)">
<fa-icon [icon]="'times'"></fa-icon>
</a>
</span>
{{tag.tagName}}
</a>
</span>
</h6>
EDIT Wayne: This does not work since the X (delete) does not work
<h6 class="g-color-gray-dark-v1">
<button id="jh-create-entity"
*ngIf="owner === post.userId"
class="btn btn-primary float-right jh-create-entity create-tag"
[routerLink]="['/tag/new']" [queryParams]="{ 'postIdEquals': post.id }">
<fa-icon [icon]="'plus'"></fa-icon>
</button>
<strong class="g-mr-5">Tags:</strong>
<section style="display: flex; justify-content: space-around;">
<span *ngFor="let tag of post.tags">
<a [routerLink]="['/tag', tag.id, 'view' ]" class="u-tags-v1 g-font-size-12 g-brd-around g-brd-gray-light-v4 g-bg-primary--hover g-brd-primary--hover g-color-black-opacity-0_8 g-color-white--hover rounded g-py-6 g-px-15 g-mr-5">
<span>
<a (click)="removePostTag(tag.id, post.id)">
<fa-icon [icon]="'times'"></fa-icon>
</a>
</span>
{{tag.tagName}}
</a>
</span>
</section>
</h6>
Currently, in your second solution (which I recommend from a UX standpoint), you have the X icon within the element that links to /tag.
If you move that icon to the outside of your anchor, it should work properly.
Check my quick example below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<section style="display: flex; justify-content: space-around;">
<span style="border: 1px solid gray; padding: 5px;">
<a onclick="remove()"><i class="fas fa-times"></i></a>
<a onclick="link()">Link</a>
</span>
<span style="border: 1px solid gray; padding: 5px;">
<a onclick="remove()"><i class="fas fa-times"></i></a>
<a onclick="link()">Link</a>
</span>
<span style="border: 1px solid gray; padding: 5px;">
<a onclick="remove()"><i class="fas fa-times"></i></a>
<a onclick="link()">Link</a>
</span>
<span style="border: 1px solid gray; padding: 5px;">
<a onclick="remove()"><i class="fas fa-times"></i></a>
<a onclick="link()">Link</a>
</span>
</section>
</body>
<script>
function remove() {
alert('Removed an element!');
}
function link() {
alert('Clicked a link!');
}
</script>
</html>
Edit: Changed to use FA so that it is hopefully more clear.
Edit: Here is an example of how you would apply what I am explaining in your own code. If this does not work, inspect your CSS.
<h6 class="g-color-gray-dark-v1">
<button id="jh-create-entity" *ngIf="owner === post.userId" class="btn btn-primary float-right jh-create-entity create-tag"
[routerLink]="['/tag/new']" [queryParams]="{ 'postIdEquals': post.id }">
<fa-icon [icon]="'plus'"></fa-icon>
</button>
<strong class="g-mr-5">Tags:</strong>
<section style="display: flex; justify-content: space-around;">
<span *ngFor="let tag of post.tags">
// Note that here I have moved the X link to be a child of the span
<a (click)="removePostTag(tag.id, post.id)">
<fa-icon [icon]="'times'"></fa-icon>
</a>
// The tag name link is on the same level as the X (child of the span)
<a [routerLink]="['/tag', tag.id, 'view' ]" class="removed-classes">
{{tag.tagName}}
</a>
</span>
</section>
</h6>
Related
I have an application that list's some content on page dynamically. So we choose some achievement, and create a section that have from 1 to X achievements and on this page, they're listed using col-md-x.
I want to use the col-md-6 size, because I have some elements that's dynamic and I need some space to show it.
But my problem here is, I want to make the columns to use the empty space, for example this image:
The red area, below section 'informe um nome2' isn't occupied, but I want to show the third, 'informe um nome3' below this section and use the free space.
Here's my current code:
<div class="row col-md-12">
#foreach (var item in Model)
{
<div class="col-md-6" style="margin-bottom:20px">
<div class="card">
#if (item.SectionHeader != null)
{
<div class="card-header text-center" style="height: 120px; background-image: url('#item.SectionHeader.ImageURL'); background-size:cover; color:black">
#item.SectionName <a title="Renomear" ng-click="Rename(#item.SectionID)"><i class="fa fa-xs fa-clipboard" style="cursor:pointer"></i></a> <a title="Baixar arquivo da seção" ng-click="DownloadFiles(#item.SectionID, false)"><i class="fa fa-xs fa-download" style="cursor:pointer; color:green"></i></a> <a title="Apagar seção" ng-click="Delete(#item.SectionID)"><i class="fa fa-xs fa-trash" style="cursor:pointer; color:red"></i></a>
</div>
}
else
{
<div class="card-header text-center">
#item.SectionName <a title="Editar" href="#Url.Action("EditSection", "Guides", new { sectionID = item.SectionID })"><i class="fa fa-xs fa-edit" style="cursor:pointer; color:orange"></i></a> <a title="Renomear" ng-click="Rename(#item.SectionID)"><i class="fa fa-xs fa-clipboard" style="cursor:pointer"></i></a> <a title="Baixar arquivo da seção" ng-click="DownloadFiles(#item.SectionID, false)"><i class="fa fa-xs fa-download" style="cursor:pointer; color:green"></i></a> <a title="Apagar seção" ng-click="Delete(#item.SectionID)"><i class="fa fa-xs fa-trash" style="cursor:pointer; color:red"></i></a>
</div>
}
<div class="card-body">
#foreach (var chievo in item.GameAchievements.OrderBy(f => f.SectionOrder.HasValue ? f.SectionOrder : f.AchievementID))
{
<div class="achievement" id="#chievo.AchievementID" style="margin-top:10px; margin-bottom:10px; z-index:1; height:60px">
<ul style="list-style:none; margin-top:20px; padding-left:0px" id="#chievo.AchievementID">
<img src="#chievo.Icon" style="float:left" />
<b> #chievo.DisplayName</b>
<br />
#if (string.IsNullOrEmpty(chievo.Description))
{
<i class="fa fa-edit" style="cursor:pointer" ng-click="OpenModal(#chievo.AchievementID)"></i>
}
else
{
<i>#chievo.Description</i>
}
<div style="float:right" class="text-center">
<a title="Alterar Dificuldade" ng-click="ChangeDifficulty(#chievo.AchievementID)"><i class="fa fa-xs fa-star" style="cursor:pointer; margin-left:10px; color:orange"></i></a>
<a title="Remover da Seção" ng-click="RemoveFromSection(#chievo.AchievementID)"><i class="fa fa-xs fa-trash-alt" style="cursor:pointer; margin-left:10px; color:red"></i></a>
</div>
#if (chievo.Difficulty != null)
{
<img src="#chievo.Difficulty.DifficultyImage" style="float:right; width:32px" />
}
</ul>
</div>
if (item.SectionDivisor != null && (item.IndividualDivisor.HasValue && item.IndividualDivisor.Value == true))
{
<div class="text-center">
<img src="#item.SectionDivisor.DivisorImageURL" />
</div>
}
}
#if (item.SectionDivisor != null && (item.IndividualDivisor.HasValue && item.IndividualDivisor.Value == false))
{
<div class="text-center" style="margin-top:20px">
<img src="#item.SectionDivisor.DivisorImageURL" />
</div>
}
</div>
</div>
</div>
}
</div>
So, basically, I want help making the columns auto-align and auto-fill.
I'm using sb admin 2 free template version.
In this case that won't work as desired, because the elements follow a row column distribution and when two elements fill a row, the next element goes all the way down to the space the longest element of the first two occupies and starts there.
What you could use in this case is something like Isotope using the horizontal masonry layout. You can check more on this on Isotope's docs.
If you still prefer to use the bootstrap option I would recommend you define a height for each column and make it scrollable. That would be the easiest way to order them visually.
I have this html
<body aurelia-app="main">
<section class="section is-small">
<nav-bar class="au-target" au-target-id="5">
<div class="container">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item au-target" route-href="route: home" au-target-id="1" href="#/">
<span class="icon is-medium">
<i class="fas fa-lg fa-home" aria-hidden="true"></i>
</span>
</a>
<a role="button" click.delegate="burgerClicked()" aria-label="menu" aria-expanded="false" data-target="myNavBar" class="au-target navbar-burger burger" au-target-id="2">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="myNavBar" class="au-target navbar-menu" au-target-id="3">
<div class="navbar-start">
<div class="navbar-item">
<a route-href="route: games" class="au-target" au-target-id="4" href="#/games">My Games</a>
</div>
</div>
</div>
</nav>
</div>
</nav-bar>
<router-view name="main" class="container au-target" au-target-id="6">
<available-games games.bind="games" class="au-target" au-target-id="11" bindable="games">
<div class="columns">
<ul class="column level">
<li class="level-item">
<game-button game.bind="game" is-available.call="isAvailable( $game )" class="au-target container" au-target-id="9" bindable="game,isAvailable">
<button class="button is-fullwidth is-success au-target" click.delegate="addToMyGames()" disabled.bind="!available" au-target-id="7">
Warhammer 40k
</button>
</game-button>
</li><li class="level-item">
<game-button game.bind="game" is-available.call="isAvailable( $game )" class="au-target container" au-target-id="9" bindable="game,isAvailable">
<button class="button is-fullwidth is-success au-target" click.delegate="addToMyGames()" disabled.bind="!available" au-target-id="7">
Age of Sigmar
</button>
</game-button>
</li><!--anchor-->
</ul>
</div>
</available-games>
</router-view>
</section>
</body>
it looks fine, until I expand it all the way, and then there is no space (height wise) between the full width buttons. I presume, I'm misunderstanding something about how I should be using bulma.
good
bad
note: this is the extent of my scss
#import "~bulma";
#import "~#fortawesome/fontawesome-free/scss/fontawesome.scss";
$fa-font-path: "~#fortawesome/fontawesome-free/webfonts";
#import "~#fortawesome/fontawesome-free/scss/regular.scss";
#import "~#fortawesome/fontawesome-free/scss/solid.scss";
First off, a tip: fix formatting a bit to make it more consistent to readers - more clarity to the HTML hierarchy.
Possible steps:
1) It looks like you might need some padding between each <button> element inside some <style> tags or in your scss file that target the specific class attribute/element you need.
2) I'm confused about your <game-button> element. Is it a custom element you created? If it's not, see the MDN Web Docs for examples of how to create custom HMTL elements if you need it.
3) If <game-button> is not a custom element you created, see Bulma's documentation for buttons because Bulma only requires a <button> element to work (and spacing wouldn't be an issue).
4) Check out this GitHub post regarding spacing between buttons. Although their implementation is different, you may still need to wrap your buttons in a <div class="buttons"></div> element. If there are issues after with inconsistent vertical alignment, I'd suggest using CSS display: flex;, align-items: center, and justify-content: center for centered alignment.
I am working with angular, html and css.
I build a widget that includes a table of 3*3.
For some reason, in the first upload - the table takes only 50 percent from the widget width.
It looks OK only after reload.
Does someone have an idea what could be the problem?
<div widget class="card">
<div class="card-header">
<span>Select service(s)</span>
<div class="widget-controls">
<a data-widgster="expand" href="#" class="transition"><i class="fa fa-chevron-down"></i></a>
<a data-widgster="collapse" href="#" class="transition"><i class="fa fa-chevron-up"></i></a>
<a data-widgster="fullscreen" href="#" class="transition"><i class="fa fa-expand"></i></a>
<a data-widgster="restore" href="#" class="transition"><i class="fa fa-compress"></i></a>
</div>
</div>
<table id="serviceTable">
<tr *ngFor="let eachService of [0,1,2]; let i = index">
<td *ngFor="let j of [0,1,2]" class="service-td" >
<div>
<input name="checkboxes" type="checkbox" (change)="changeListener($event, i+j)">
<span>osnat11111111</span>
</div>
</td>
</tr>
</table>
<br>
</div>
</div>
The css is:
.service-td
{
table-layout:fixed;
width:10vw;
overflow:hidden;
padding: 0.5vw;
}
Thanks,
Osnat
You can just try,
...
<div style = "width: 100%">
<table> ... </table>
</div>
width: 100% gives the same width of the CSS component to the child
I have an accordion with links in the header. It is in such a way that the accordion can be opened when clicked anywhere on the header. Because of this when clicked on the link, instead of going to that link (href) the accordion is opened.
Desired behaviour:
I want the accodion to be opened when clicked anywhere in the header except the link. (i.e when clicked on the link, the user must be redirected and accordion must not be opened)
<div>
<accordion close-others="false">
<accordion-group is-open="isopen" ng-repeat="ele in arr">
<accordion-heading>
<div>
<i class="pull-right glyphicon"
ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
<div style="width: 50%; float: left; padding-left: 6cm;">{{ele.a}}
<span >
link
</span>
</div>
<div style="text-align: center;">
<span>{{ele.b}}</span>
</div>
</div>
</accordion-heading>
</accordion-group>
</accordion>
</div>
Plnkr
You need to call $event.stopPropagation(); in your ng-click -> ng-click="$event.stopPropagation(); fn1();"
The trick is to call Event.stopPropagation() inside ng-click handler of anchor:
link
Here's an updated plunker.
use
ng-click="$event.stopPropagation()"//this will not apply accordion click event on this link tag
instead of
ng-click="fn1()"
This Might not work on plunk try it in your code.
When using accordion-heading, everything in it will be turned into an <a> tag.
Your code will be rendered in brower
<h4 class="panel-title">
<a class="accordion-toggle ng-binding" ng-click="isOpen = !isOpen" accordion-transclude="heading">
<div class="ng-scope">
<i class="pull-right glyphicon glyphicon-chevron-right" ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
<div style="width: 50%; float: left; padding-left: 6cm;" class="ng-binding">1
<span>
link
</span>
</div>
<div style="text-align: center;">
<span class="ng-binding">2</span>
</div>
</div>
</a>
</h4>
This is solution https://stackoverflow.com/a/14202514/3901308
This has me stumped...
SEE JSBIN HERE
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
.slide-nav:nth-of-type(1) { color:red } /* this should select the number 1 */
</style>
</head>
<body>
<div class="image">
<span class="slide" data-order="4" rel="content-images/teta.jpg" ></span>
<span class="slide" data-order="3" rel="content-images/champ.jpg" ></span>
<span class="slide" data-order="2" rel="content-images/clouds.jpg" ></span>
<img class="slide initial" data-order="1" src="content-images/air.jpg" />
<span class="spinner"></span>
<!--
delete this line to comment the two arrow links -->
<a class="arrow next" href="javascript:void(0)">→</a>
<a class="arrow prev" href="javascript:void(0)">←</a>
<!-- -->
<a class="slide-nav on" href="javascript:void(0)" rel="1">1</a>
<a class="slide-nav" href="javascript:void(0)" rel="2">2</a>
<a class="slide-nav" href="javascript:void(0)" rel="3">3</a>
<a class="slide-nav" href="javascript:void(0)" rel="4">4</a>
</div>
</body>
</html>
Question
Why does the .slide-nav:nth-of-type(1) { color:red } only work when the two additional links above the numbers are removed?
In the jsbin, delete the two arrows, or delete the commented line to comment that block and you'll see that the .slide-nav:nth-of-type(1) selector works magically.
For the life of me, it appears that it should just work regardless. What am I missing here?
There is no filter by class in CSS because it does not have a :nth-of-class() selector. :nth-of-type filter has to be on a tag.
A workaround is to wrap your slide-nav links inside a span and filter for all as inside in CSS.
<span class="numbers">
<a class="slide-nav on" href="javascript:void(0)" rel="1">1</a>
<a class="slide-nav" href="javascript:void(0)" rel="2">2</a>
<a class="slide-nav" href="javascript:void(0)" rel="3">3</a>
<a class="slide-nav" href="javascript:void(0)" rel="4">4</a>
</span>
And the CSS
span.numbers a:nth-of-type(1) { color:red; } /* this should select the number 1 */
For an example see http://jsfiddle.net/3J4K6/