I am currently working on this website and as you can see I have 2 modals, one on the left and one on the right (the i icons).
What I want to do is to keep the modal buttons in the same position but make the whole section (the pictures with the girl and the texts) clickable.
Infos: I can only use that "i" icon as modal button :/ and I can only edit the CSS not the HTML.
Is this possible to open the modal window by clicking on the whole section?
Here some code:
HTML:
<div id="ts-vcsc-modal-5397504-container" class="ts-vcsc-modal-container">
<div id="ts-vcsc-modal-5397504-trigger" style="" class="ts-vcsc-modal-5397504-parent nch-holder ts-vcsc-font-icon ts-font-icons ts-shortcode ts-icon-align-center ">
<a href="#ts-vcsc-modal-5397504" class="nch-lightbox-modal no-ajaxy" data-width="1024" data-title="" data-open="false" data-delay="0" data-type="html" rel="" data-effect="slideUp" data-share="0" data-duration="5000" data-color="rgba(255,255,255,0.01)" data-lightbox-init="true">
<i class="ts-font-icon ts-awesome-info-circle" style="color: #ffffff; width:80px; height:80px; font-size:80px; line-height:80px;"></i></a></div>
<div id="ts-vcsc-modal-5397504" class="ts-modal-content nch-hide-if-javascript " style="display: none; padding: 15px; background: #0076bc;">
<div class="ts-modal-white-header"></div><div class="ts-modal-white-frame" style=""><div class="ts-modal-white-inner"><p></p>
<h2 style="text-align: left;"><span style="color: #ffffff;"><b>Wer seinen Mietvertrag im AQUILA bis 31.12.2016 unterzeichnet, erhält</b></span></h2>
<p><span style="color: #ffffff;">1 Nettomietzins geschenkt bei Einzug innert 3 Monaten</span><br>
<span style="color: #ffffff;"> 2 Nettomietzinse geschenkt bei Einzug per Dezember 2016</span></p>
<p><span style="color: #ffffff;">Zusätzlicher Weihnachtsgutschein von Sutter Begg oder AJ Salon hair & make up im Wert von CHF 1000.–</span></p>
</div>
</div>
</div>
</div>
Thanks in advice for your help.
.nch-lightbox-modal.no-ajaxy {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
}
.ts-font-icon.ts-awesome-info-circle {
color: #ffffff;
width: 80px;
height: 80px;
font-size: 80px;
line-height: 80px;
position: absolute;
bottom: 25px;
right: 0;
}
Try this to your anchor tag and icon
Related
disclaimer: sorry if my answer is somwhere in stackoverflow... Did not find and starting being a little frustrating...
I'm working with Angular 10 and in my app.component.html, have this snippet :
<div class="chats">
<app-friend-chat *ngFor="let friend of friends" [inputFriend]="friend" (close)="closeChat($event)">
</app-friend-chat>
<app-friend-list (friend)="openChat($event)"></app-friend-list>
</div>
The component app-friend-chat is dynamic and at the started time of the site, there is no instances of it so only app-friend-list is display.
Here is the css of app.component.css :
app-friend-chat{
position: relative;
margin: 0 !important;
width: 50vh;
}
.chats{
position: absolute;
bottom: 0;
right: 5px;
z-index: 9999;
display: flex;
flex-direction: row;
}
The thing is app-friend-list's height is moving up to creation of a new app-chat-friend's instance.
When closing all app-chat-friend's instances, app-friend-list get height back to its first value.
I want my app-friend-list keep its height.
Here is app-friench-chat'html :
<div *ngIf="friend">
<div class="chatHead" fxLayout="row" fxLayoutGap="5px">
<p class="friend">{{ friend.name }}</p>
<span fxFlex="auto" (click)="minimize()"></span>
<p class="close" (click)="closeChat(friend.name)">X</p>
</div>
<div *ngIf="!mini">
<div id="messages-box">
<div *ngFor="let message of messages" class="message">
<div [ngClass]="classForParagraphe(message)" class="paragraphe"
[innerHTML]="sanitizer.bypassSecurityTrustHtml(message.message)">
</div>
<div *ngIf="user.name === message.user" class="trash">
<span class="far fa-trash-alt" (click)="deleteMessage(message)"></span>
</div>
</div>
</div>
<emoji-mart class="emoji-mart" *ngIf="isEmojiPickerVisible" (emojiSelect)="addEmoji($event)"></emoji-mart>
<div fxLayout="row" fxLayoutGap="15px">
<div class="container">
<input [(ngModel)]="message" type="text" #input (keyup)="enter($event)" />
<button (click)="isEmojiPickerVisible = !isEmojiPickerVisible;">😀</button>
</div>
<button (click)="sendMessage()">
<svg width="20px" height="20px" viewBox="0 0 24 24">
<path
d="M16.6915026,12.4744748 L3.50612381,13.2599618 C3.19218622,13.2599618 3.03521743,13.4170592 3.03521743,13.5741566 L1.15159189,20.0151496 C0.8376543,20.8006365 0.99,21.89 1.77946707,22.52 C2.41,22.99 3.50612381,23.1 4.13399899,22.8429026 L21.714504,14.0454487 C22.6563168,13.5741566 23.1272231,12.6315722 22.9702544,11.6889879 C22.8132856,11.0605983 22.3423792,10.4322088 21.714504,10.118014 L4.13399899,1.16346272 C3.34915502,0.9 2.40734225,1.00636533 1.77946707,1.4776575 C0.994623095,2.10604706 0.8376543,3.0486314 1.15159189,3.99121575 L3.03521743,10.4322088 C3.03521743,10.5893061 3.34915502,10.7464035 3.50612381,10.7464035 L16.6915026,11.5318905 C16.6915026,11.5318905 17.1624089,11.5318905 17.1624089,12.0031827 C17.1624089,12.4744748 16.6915026,12.4744748 16.6915026,12.4744748 Z">
</path>
</svg>
</button>
</div>
</div>
</div>
And css :
.chatHead {
background: rgb(210, 206, 206);
border-radius: 10px;
height: 5vh;
}
#messages-box {
height: 45vh;
background-color: white;
padding-left: 0;
overflow-y: scroll;
}
app-friend-list'html:
<div *ngIf="user && user.name !== undefined">
<h6 (click)="showList()">Discussions</h6>
<div class="list" *ngIf="show">
<ul *ngFor="let ami of user.amis">
<li (click)="addChat(ami)">{{ ami }}</li>
</ul>
</div>
</div>
app-friend-list'css:
h6{
padding: 10px;
border: solid 1px black;
height: 5.5vh;
}
ul {
padding-right: 20px;
}
li {
list-style: none;
cursor: pointer;
}
I give you only relevant code (according to me).
The other probleme I can't get ride of is that when clicking on chatHead of app-friend-chat for minimize, the component get same size of app-friend-list and so let empty space at the bottom which is very dirty (should get only size of head part)
Feel free to ask me any code I forgot to give you.
I have no way of explaining this better.
Please see this fiddle: https://jsfiddle.net/4vosLvxg/3/
<div class="col-md-12 " style="display: flex;">
<div class="checkbox">
<label class="tooltips">
<input type="checkbox"> Système d'avertissement de collision
et frein de secours automatique
</label>
</div>
<a class="tool-tip"></a>
</div>
The CSS is irelevant since I've tried all known combinations.
What I (my client) want(s) is to make the infobutton appear near the text (label) but not inside the label.
To reproduce the issue one must resize the window till the last word goes on a new line. Then he will see that the label's width won't be as long as the longest line.
Hours wasted: ~14
Any suggestion/hack will do.
EDIT:
This explains it better:
Here's what I think you are asking for. Please note the change in html markup:
.checkbox {
display: inline-block;
position: relative;
padding-left: 15px;
}
.checkbox input[type=checkbox] {
float: left;
margin-left: -15px;
}
.checkbox label {
text-align: justify;
display: inline-block;
}
.checkbox a.tool-tip {
width: 14px;
background: url("http://www.chromachklist.com/wp-content/uploads/2012/06/InfoButton0.png") right no-repeat;
padding: 10px;
position: absolute;
right: 0;
top: 0;
}
.tooltips a.tool-tip {
visibility: hidden;
position: initial;
float: right;
}
<div class="col-md-12 " style="display: flex;">
<div class="checkbox">
<a class="tool-tip"></a>
<label class="tooltips">
<a class="tool-tip"></a>
<input type="checkbox"> Système d'avertissement de collision et frein de secourssssssssss automatique
</label>
</div>
</div>
I'm using bootstrap 2.3.2, and I have a form that contains an input text.
In the right of the input text I have an icon.
And this is the html for that input text :
<div class="right-inner-addon">
<input type="text" placeholder="Recherche un article" class="search-query">
<i class="fa fa-search"></i>
</div>
And this is it's style :
.right-inner-addon input {
padding-right: 30px;
}
.right-inner-addon i {
position: absolute;
right: 0px;
padding: 7px 12px;
padding-left: 10px;
}
The problem is that when I type some long text, this text is written under that search icon :
I want when I write a long text to not be written under the search icon, how can I do that ?
I've used the Bootstrap 2.3.2 version and use below CSS code to place the search icon at right side.
.right-inner-addon{position:relative;}
.right-inner-addon input {
padding-right: 30px;
height:30px;
}
.right-inner-addon i {
padding: 7px 12px;
padding-left: 11px;
position: absolute;
top: 10px;
right:0
}
.icon-search {
background-position: -36px 3px;
}
and the HTML code look like this.
<form class="navbar-form pull-left form-search">
<div class="right-inner-addon">
<input type="text" placeholder="Recherche un article" class="search-query">
<i class="icon-search"></i>
</div>
</form>
Here is the working Demo. https://refork.codicode.com/351.cod
I've been trying to insert a clickable image into the header to sit on the right bottom. I've been scouring your past questions, and have gotten this far by navigating what is already posted. However, I can get either the style to work with this code without correct linkage:
header {
<style>
div#button
{
position:relative;
align:right;
top:111px;left:640px; margin:0;width:100%;
padding-bottom:25px;
}
</style>
***position is right, but linkage is wrong***
<div id="button">
<a href="0379a5a.netsolhost.com/wordpress1/products/products-page/" >
<img src="http://0379a5a.netsolhost.com/wordpress1/wp-content/uploads/2013/07/shop_now2.png" height="80.5x" width="163.5px"
<div style="float:right;margin-top: 111px; margin-right: 50px; padding-bottom:16px;"
/></a>
</div>
But The link will not work. I can get the link to work, but then the style goes away with this code:
<style>
div#shop_now_button
{
position: relative;
float: right;
margin-top: 111px;
margin-left: 640px;
margin-right: 50px;
width:100%;
padding-bottom:25px;
}
</style>
<div id="shop_now_button">
<div style="float:right;margin-top: 111px; margin-right: 50px; padding-bottom:16px;">
<a s href="http://0379a5a.netsolhost.com/wordpress1/product/products-page/" target="_blank">
<img src="http://0379a5a.netsolhost.com/wordpress1/wp- content/uploads/2013/07/shop_now2.png"
height="80.5px"
width="163.5px"
float="right"
margin-top="111px"
margin-right="50px"
padding-bottom="16px" />
</div>
I just wish I knew what was going on. I've been trouble shooting for hours now... (I apologize if its a simple solution--I'm new at this) this is my vanity domain... http://0379a5a.netsolhost.com/wordpress1/
use:
.header {position: relative;}
.header img {positon: absolute; bottom: 0; right: 0;}
I'm using twitter bootstrap for my css and the following code has an issue with the alignment:
see jsfiddle here: http://jsfiddle.net/graphicsxp/99rhF/ (make sure you enlarge the html view)
<div class="view-header">
<span class="view-title">Recherche de mandats</span>
<div class="pull-right">
<a style="line-height: 30px; margin-right: 20px; vertical-align: bottom; float: left;">
<span class="pointer">more options</span>
</a>
<form class="form-inline pull-left" placeholder="N° de contrat, nom/numéro de client" css-class="input-xxlarge">
<input class="input-xxlarge ng-dirty" type="text" placeholder="N° de contrat, nom/numéro de client" ng-model="model">
<button disabled="disabled" class="btn btn-info" type="submit"><i class="icon-search"></i> Rechercher</button>
</form>
</div>
<div class="clearfix"></div>
<div class="pull-right">
</div>
<div class="clearfix"></div>
</div>
as you can see the button with the label 'Rechercher' is too far right. What am I doing wrong ?
There is nothing wrong with your button, its the containing element.
Update the css with:
.view-header {
background-color: #F5F5F5;
border-bottom: 1px solid #BBBBBB;
margin-bottom: 20px;
padding: 10px 20px;
}
Removing width: 100%; Div's are block line elements, meaning they will fill their parent. This should solve your problem.
See:
http://jsfiddle.net/99rhF/2/
The parent element has a width of 100%, but padding isn't included in width calculations, so it ends up being 100% + 40px. You fix this by wrapping the contents in a container, and padding that instead.
http://jsfiddle.net/ndTuL/
.view-header {
background-color: #f5f5f5;
width: 100%;
margin-bottom: 20px;
border-bottom: solid 1px #bbbbbb;
}
.content-wrap {
padding: 10px 20px 10px 20px;
}
First of all, I know I'm late to the party :)
Second - #Jamie Hutber has a very good and valid answer. No arguments here at all - it should remain the accepted answer for sure.
Third - Here's what I ran in to, and how I fixed it:
HTML:
<!DOCTYPE html>
<html>
<head>
<?php echo $str->head; ?>
</head>
<body>
<footer>
© Copyright 2021-$currentYear | All Rights Reserved | No Unauthorized Use Permitted | JPeG Web Development
</footer>
</body>
</html>
<footer> is also a Block Line Element, so width is not needed. Here's what I did instead:
CSS
body {
background-color: #f8f3ed;
max-width: 1200px;
display: flex;
flex-direction: column;
margin-bottom: 2rem;
}
footer {
display: flex;
flex-direction: row;
height: 1.5rem;
font-size: 1rem;
position: absolute;
bottom: 0px;
right: 0px;
overflow: hidden;
max-width: 1200px;
padding: 5px;
}
Things to note is that the position: absolute; will mess up any text-direction and make it overflow, especially if you try and add a width: 100% to it. The right and bottom stick it on the bottom right corner no matter how much you scroll.
It's not exactly what the question was asking, but I thought it might be nice for people to see some alternate ways to have this issue, and resolve it.