How can i remove the html tags because whenever i hover my house to a specific part, the data will be displayed but the html tags were also included. maybe theres something that needs to be changed.
html snippet
<div class="row " id="record_block" style='margin-left:4px;margin-top:20px'>
#foreach ($infomodel as $applicant)
<div class="col-md-4 col-lg-4 col-xlg-4 mb-3">
<div class="card card-body" style="background: #ebefff;">
<div class="row">
<div class="col-md-4 col-lg-3 text-center">
<a href="app-contact-detail.html">
<img src="storage/image/<?php echo $applicant['photo_filename'];?>" alt="user" style="width: 85px; height: 80px;" class="img-circle img-responsive">
</a>
</div>
<div class="col-md-8 col-lg-9">
<h5>
<span style="z-index: 0;">
<span data-toggle="tooltip" data-placement="top" data-original-title="" style="background: transparent; color: #0b719c; margin-left: 0px; z-index: 0;">
{{ Str::limit($applicant->last_name . ', ' . $applicant->first_name . ' ' . $applicant->middle_name, 17) }}
<i class="flag-icon flag-icon-af" title=""></i><br>
<i>Doctor of Medicine</i><br>
</span>
<span class='tooltip-content' style="display: none;">
<span style="margin-left: 15px;">
<u><b>Fullname: {!! $applicant->last_name!!}, {!! $applicant->first_name!!} {!! $applicant->middle_name!!}</b></u><br/>
Birthdate: {!! $applicant->birthdate !!}<br/>
Country: {{ $applicant->country_name }}<br>
Gender/CS: {!! $applicant->gender !!}/Single<br>
Cellphone: <br>{!! $applicant?->country_code !!}{!! $applicant?->area_code !!}{!! $applicant?->tel_no !!}<br>
Email:{{ $applicant?->email }}<br>
Application ID:{!! $applicant?->app_id !!}<br>
Date Last Updated: {!! $applicant->date_updated !!}
</span>
</span>
</span>
</h5>
</div>
</div>
<div class="row">
<div class="col-md-8 col-lg-12">
<address style="color: black; margin-left: 10px;">
<abbr title="Email Address">Email:</abbr> <b>{{ $applicant?->email }}</b><br>
<abbr title="Cellphone">Cellphone:</abbr> <b>{!! $applicant?->country_code !!}{!! $applicant?->area_code !!}{!! $applicant?->tel_no !!}</b><br>
<abbr title="Application ID">Application ID:</abbr> <b>#{!! $applicant?->app_id !!}</b><br>
<div style="height: 8px;"></div>
<button type="button" class="btn btn-rounded btn-outline-primary" style="position: relative; z-index: 0;" title="Click to Manage" onclick="location.replace('manage_applicant-set_sessionvars.php?lnk=fi&purpose=2&a=2716');"><i class="fa fa-address-card-o"></i> Manage</button>
</address>
</div>
</div>
</div>
</div>
#endforeach
</div>
screenshot
Add the attribute data-html="true" to this span :
<span data-toggle="tooltip" data-placement="top" data-original-title="" style="background: transparent; color: #0b719c; margin-left: 0px; z-index: 0;">
As per the documentation, it allows HTML in the tooltip.
Related
I have a website that displays several articles on a page. Here is the code for one of them.
<article class="post post-large ">
<div title="Contest start date" class="post-date">
<span class="day">14</span>
<span class="month">Jul</span>
</div>
<div class="post-content">
<h2 class="font-weight-semibold text-6 line-height-3"><a class="contest_title" target="_blank" href="go/123456">TITLE <i class="fas fa-external-link-alt"></i></a></h2>
<h4 class="mb-1 text-4 font-weight-bold">Ends in <span class="text-color-secondary">7 Days 8 Hours</span></h4>
<div class="scrollable visible-slider colored-slider has-scrollbar" data-plugin-scrollable="" style="max-height: 15em; height: 52px;">
<div class="scrollable-content" tabindex="0" style="right: -17px;">
DESCRIPTION
</div>
<div class="scrollable-pane" style="opacity: 1; visibility: visible; display: none;"><div class="scrollable-slider" style="height: 39px; transform: translate(0px, 0px);"></div></div></div>
<div class="post-meta">
<span title="Platform: Gleam"><img src="img/platforms/gleam.png"> </span>
<span title="Author"><i class="far fa-user"></i> By SweepsDB </span>
<span><i title="Contest has referral option" class="fas fa-share-alt-square fa-lg text-primary"></i></span>
<span title="End Date"><i class="far fa-calendar-alt"></i> July 21, 2022 </span>
<span title="Countries"><i class="fas fa-globe-americas"></i> Canada</span>
<span title="Report contest"><i class="far fa-flag"></i> <a data-id="123456" data-bs-toggle="modal" data-bs-target="#reportModal" class="report" href="#">Report</a></span>
<span style="float: right;" class="d-block d-sm-inline-block float-sm-right mt-3 mt-sm-0"><a target="_blank" href="go/123456" class="btn btn-xs btn-light text-1 text-uppercase">Visit Contest</a></span>
<span style="float: right;" class="d-block d-sm-inline-block float-sm-right mt-3 mt-sm-0">More Details</span>
</div>
</div>
</article>
which looks something like this:
However sometimes on mobile layouts, the More Details and Visit Contest links are below the bottom border, like this:
The relevant CSS for border-bottom is:
article {
border-bottom: 2px solid rgba(0, 0, 0, 0.075);
margin-bottom: 20px;
padding-bottom: 8px;
}
What do I need to change to have the bottom border show up at the true bottom of the <article>, even if there is overflow from other elements within the article?
it shows up like that because my photo is not the same size, is there a solution for this problem?
enter image description here
here is the code:
<div class="features_items"><!--features_items-->
<h2 class="title text-center">Features Items</h2>
#foreach($products as $product)
<div class="col-sm-4 h-100">
<div class="product-image-wrapper ">
<div class="single-products h-100">
<div class="productinfo h-100 text-center">
<img src="{{$baseUrl . $product->feature_image_path}}" alt="" />
<h2>{{ number_format($product->price )}} VNĐ</h2>
<p>{{ $product->name }}</p>
<a href="#"
data-url="{{route('addToCart',['id'=> $product->id])}}"
class="btn btn-default add_to_cart">
<i class="fa fa-shopping-cart"></i>
Add to cart
</a>
</div>
<div class="product-overlay">
<div class="overlay-content">
<h2>{{ number_format($product->price )}} VNĐ</h2>
<p>{{ $product->name }}</p>
<button
data-url="{{route('addToCart',$product->id)}}"
class="btn btn-default add_to_cart"><i class="fa fa-shopping-cart"></i>Add to cart</button>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div><!--features_items-->
I am trying to show a modal on a button click, however, after I click on the modal it does not show the modal, I do not know what seems to be the issue since I followed the exact tutorial on bootstrap and W3Schools. Here, is my template:
{% for comment in comments %}
<div class="border-bottom">
<div class="row pt-1 pl-4">
<div class="col-xs">
<img class="img-create-post rounded-circle mr-1" style="width: 2.1rem;height: 2.1rem;" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="Profile image">
</div>
<div class="col-xs" style="margin-bottom: 0;">
<span class="text-dark font-size-smaller" href="#" style="font-weight: 500;">{{ comment.name.first_name }}</span>
<span class="text-muted small">•</span>
<a class="text-muted small" href="#">#{{ comment.name.username }}</a>
<span class="text-muted small">•</span>
<span class="text-muted small">{{ comment.get_created_on }}</span>
<p class="font-weight-light pl-1">{{ comment.body }}</p>
</div>
</div>
<div class="d-flex justify-content-between">
<div>
<span class="text-muted small view-replies">view {{ comment.replies.count }} replies <i class="fas fa-caret-down"></i></span>
</div>
<div>
<!-- button to show modal -->
<button class="btn btn-sm small float-right text-muted button-outline-light reply-btn" type="button" data-toggle="modal" data-target="modal-comment-reply">Reply</button>
</div>
</div>
<div class="comment-replies">
{% for reply in comment.replies.all %}
<div class="row pt-1 pl-4">
<div class="col-xs">
<img class="img-create-post rounded-circle mr-1" style="width: 2.1rem;height: 2.1rem;" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="Profile image">
</div>
<div class="col-xs" style="margin-bottom: 0;">
<span class="text-dark font-size-smaller" href="#" style="font-weight: 500;">{{ comment.name.first_name }}</span>
<span class="text-muted small">•</span>
<a class="text-muted small" href="#">#{{ comment.name.username }}</a>
<span class="text-muted small">•</span>
<span class="text-muted small">{{ comment.get_created_on }}</span>
<p class="font-weight-light pl-1">{{ comment.body }}</p>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="modal fade" id="modal-comment-reply">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<p class="font-size-smaller">{{ request.user.first_name }} replying to {{ comment.name.username }}</p>
</div>
<div class="modal-body">
<form method="POST" action="{% url 'home:post-detail' post.guid_url %}" class="post-comment-form" style="height: 1rem;">
{% csrf_token %}
<input type="hidden" name="comment_id" value="{{ comment.id }}"/>
{{ form }}
<button class="btn btn-sm small btn-outline-primary ml-1" style="border-radius: 20px;" type="submit">Reply</button>
<button type="button btn-sm small btn-outline-secondary" class="btn btn-secondary" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
{% empty %}
<div class="d-flex justify-content-center">
<p class="font-weight-lighter text-muted">No comments to show</p>
</div>
{% endfor %}
<style>
.view-replies:hover {
cursor: pointer;
text-decoration: underline;
}
</style>
<script>
$(document).ready(function () {
$('.reply-btn').on("click", function () {
$('#modal-comment-reply').modal("show");
});
})
</script>
I have even tried jQuery to open it but it does not seem to open, my other modals work fine I do not know why this does not open.
Thanks for all the help in advance!
EDIT: SOLVED - Typo in jquesry function!
I am trying to align the controls in my angular 8 application. Basically I need to align the Amount column like shown in the screenshot below. Could somebody tell me how to achieve that. Currently using col-sm-5 for Amount column. If I do col-sm-6 it would push the edit button further out which i don't want.I need to get the textbox upto the red line shown in screenshot 1
screenshot 1
Screenshot 2
<form [formGroup]="settlementForm" (ngSubmit)="addAccount()" class="form-horizontal argentex-form" novalidate>
<div class="modal-body">
<div *ngIf="messageViewerModel.messages.length > 0" class="viewer">
<app-message-viewer [messageViewer]="messageViewerModel"></app-message-viewer>
</div>
<!-- Remaining balanace input -->
<div class="form-group has-feedback">
<label class="col-sm-4 control-label">Remaining Balance</label>
<div class="col-sm-6">
<currency class="form-control" [stringModel]="remainingBalance()" [isDisabled]="true"></currency>
</div>
</div>
<!-- Dropdown Accounts -->
<div class="form-group">
<label class="col-sm-4 control-label">Account</label>
<div class="col-sm-6">
<div class="selectdiv">
<select class="form-control" id="selectedAccount" #selectedAccountID
name="selectedAccountFormControl" formControlName="selectedAccountFormControl">
<option *ngFor="let account of accounts; let ind=index;" value="{{ ind }}"
ngDefaultControl>
{{ account.accountName }}
</option>
</select>
</div>
</div>
</div>
<!-- Amount in the traded currency -->
<div class="form-group has-feedback">
<label class="col-sm-4 control-label">Amount ({{settlement.tradedCurrency}})</label>
<div class="col-sm-5">
<currency class="form-control" [isDisabled]=editMode [(numModel)]="settlement.amount" [stringModel]="settlement.amount"
[required]="true" [readonly]="settlement.isPayTotal"></currency>
</div>
<div class="col-sm-1" style="padding-top: 5px">
<!-- settlement?.isPayTotal -->
<div *ngIf="editMode">
<a href="javascript:;" class="btn-edit" (click)="editAmount()">
<img src="../../assets/images/icon-sp-edit.png" alt=""/>
</a>
</div>
<div *ngIf="!editMode">
<a href="javascript:;" class="btn-edit" (click)="cancelAmount()">
<img src="../../assets/images/icon-sp-cancel.png" alt=""/>
</a>
</div>
</div>
</div>
<!-- Value Date -->
<div class="form-group has-feedback">
<label class="col-sm-4 control-label">Value Date</label>
<div class="col-md-6">
<input type="text"
name="valueDate"
formControlName="valueDate"
class="form-control"
[(ngModel)]="settlement.valueDate"
bootstrapDatepicker />
</div>
</div>
<!-- Reference -->
<div class="form-group">
<label class="col-sm-4 control-label">Reference</label>
<div class="col-sm-6">
<input type="text" formControlName="reference" name="reference" class="form-control"
[(ngModel)]="settlement.reference" />
</div>
</div>
</div>
<div class="modal-footer">
<hr>
<button type="submit" class="btn" [disabled]="settlementForm.disabled || !settlementForm.valid || selectedAccountID.value <= 0 || !settlement.amount" >Save</button>
<button type="button" class="btn btn-close" (click)="closeModal()">Cancel</button>
</div>
</form>
Proposed solution
Its near but not still what I want
screenshot
Used the folowing css
.custom-css-input {
width: 100%;
/* float: left; */
}
.icon-button {
width: 40px;
float: left;
}
p.clear {
clear: both;
margin: 0;
padding: 0;
height: 0;
}
Following html
<div class="form-group has-feedback">
<label class="col-sm-4 control-label">Amount ({{settlement.tradedCurrency}})</label>
<div class="col-sm-5" >
<currency class="form-control custom-css-input" [(numModel)]="settlement.amount" [(stringModel)]="settlement.amount"
[isDisabled]=!editMode [required]="true" ></currency>
</div>
<div style="padding-top: 5px">
<div *ngIf="!editMode" class="icon-button">
<a href="javascript:;" class="btn-edit" (click)="editAmount()">
<img src="../../assets/images/icon-sp-edit.png" alt="" />
</a>
</div>
<div *ngIf="editMode" class="icon-button">
<a href="javascript:;" class="btn-edit" (click)="cancelAmount()">
<img src="../../assets/images/icon-sp-cancel.png" alt="" />
</a>
</div>
</div>
<p class="clear"></p>
</div>
sry for not posting bootstrap solution, but if you are in hurry, simple css can work for you. I have added three custom css classes (custom-css-input,icon-button,clear), .clear is only there if floats disturb the rest of your form, but that's just in case. You can play width calc width and fixed width in order to achive your desired look. (Wrap whole input+button component in one single column and play inside with widths)
.custom-css-input {
width: calc(100% - 50px);
float: left;
}
.icon-button {
width: 40px;
float: right;
}
p.clear {
clear: both;
margin: 0;
padding: 0;
height: 0;
}
<div class="col-sm-6">
<currency class="form-control custom-css-input" [isDisabled]=editMode [(numModel)]="settlement.amount" [stringModel]="settlement.amount" [required]="true" [readonly]="settlement.isPayTotal"></currency>
<div *ngIf="editMode" class="icon-button">
<a href="javascript:;" class="btn-edit" (click)="editAmount()">
<img src="../../assets/images/icon-sp-edit.png" alt="" />
</a>
</div>
<div *ngIf="!editMode" class="icon-button">
<a href="javascript:;" class="btn-edit" (click)="cancelAmount()">
<img src="../../assets/images/icon-sp-cancel.png" alt="" />
</a>
</div>
<p class="clear" />
</div>
I've style border: 1px solid black; to determine if it is correct box, but it overlap and goes outside. This is my html
<div class="panel panel-default">
<div class="panel-body">This page is temporarily disabled by the site administrator for some reason.</div>
<div class="panel-footer clearfix">
<p>Drink whaterver jklasd jklasd jklnxm,c kasdk jj jjjjs lasd jklasd m,zxc asd kljaskd kljasd kl</p>
<div style="border: 1px solid black; display: block;" class="pull-left">
<div class="row">
<p>By Jerald Patalinghug</p>
</div>
<div class="row">
Tags: Funny, Wtf, Nice
</div>
</div>
<div style="border: 1px solid black;" class="pull-right">
<div id="votes">
<div class="row">
<a href="#" data-card_id="26" class="vote upvote btn btn-default">
<span class="fa fa-thumbs-up"></span>
</a>
<a href="#" data-card_id="26" class="vote downvote btn btn-default">
<span class="fa fa-thumbs-down"></span>
</a>
</div>
<div class="row">
<center>
<span class="vote_count">1</span> points
</center>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
and this is the image
look, the inside of div.pull-left are going outside.
EDIT1
Thanks guys, What I did was remove class="row" on every div
<div class="panel panel-default">
<div class="panel-body">This page is temporarily disabled by the site administrator for some reason.</div>
<div class="panel-footer clearfix">
<p>Drink whaterver jklasd jklasd jklnxm,c kasdk jj jjjjs lasd jklasd m,zxc asd kljaskd kljasd kl</p>
<div style="border: 1px solid black; display: block;" class="pull-left">
<div>
<p>By Jerald Patalinghug</p>
</div>
<div>
Tags: Funny, Wtf, Nice
</div>
</div>
<div style="border: 1px solid black;" class="pull-right">
<div id="votes">
<div>
<a href="#" data-card_id="26" class="vote upvote btn btn-default">
<span class="fa fa-thumbs-up"></span>
</a>
<a href="#" data-card_id="26" class="vote downvote btn btn-default">
<span class="fa fa-thumbs-down"></span>
</a>
</div>
<div>
<center>
<span class="vote_count">1</span> points
</center>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
Remove the
<div class="row">
inside each of the bordered div's - these are adding -15px to the left and right. These are only to be used when you are nesting inside .container or .col-sm-12 (for example).
This is a good read if you're not 100% sure on how the bootstrap grid works:
http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
Use class container-fluid along with pull-left/pull-right.
Solution:
<div class="panel panel-default">
<div class="panel-body">This page is temporarily disabled by the site administrator for some reason.</div>
<div class="panel-footer clearfix">
<p>Drink whaterver jklasd jklasd jklnxm,c kasdk jj jjjjs lasd jklasd m,zxc asd kljaskd kljasd kl</p>
<div style="border: 1px solid black; display: block;" class="pull-left container-fluid">
<div class="row">
<p>By Jerald Patalinghug</p>
</div>
<div class="row">
Tags: Funny, Wtf, Nice
</div>
</div>
<div style="border: 1px solid black;" class="pull-right container-fluid">
<div id="votes">
<div class="row">
<a href="#" data-card_id="26" class="vote upvote btn btn-default">
<span class="fa fa-thumbs-up"></span>
</a>
<a href="#" data-card_id="26" class="vote downvote btn btn-default">
<span class="fa fa-thumbs-down"></span>
</a>
</div>
<div class="row">
<center>
<span class="vote_count">1</span> points
</center>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
Apply padding in style to have nice look
<div style="border: 1px solid black;padding: 2%; display: block;" class="pull-left container-fluid">
<div style="border: 1px solid black;padding: 2%" class="pull-right container-fluid">