extra option causing button to move up and down - html

How do you position a button so it stays fixed?
I have an Angular app and when the 3rd option is displayed for a multiple choice, the next and back buttons move down.
Some of the questions only have 2 options and some have 3.
Is there a way to make it so that the buttons stay at one position? I tried using position property in css and margin-bottom, but no luck.
2 Options
3 Options
CSS
button {
background-color: #004273;
font-family: 'Roboto';
color: white;
border: 2px solid #93b9dd;
border-radius: 8px;
padding-top: 2%;
padding-bottom: 2%;
font-size: 1em;
}
.buttons2 {
width:48%;
float: right;
}
.buttons1 {
width: 48%;
float: left;
}
HTML
<h2 style="color: white;" align="center">{{statement}}</h2>
<h2 style="color: white;" align="center">{{question}}</h2>
<div class="radio-{{questionType}} col-sm-4 col-sm-offset-4 col-xs-offset-4">
<div class="form-check">
<mat-radio-group [(ngModel)]="selectedValue" class="options">
<mat-radio-button value="{{radio1}}">{{radio1}}</mat-radio-button> <br>
<mat-radio-button value="{{radio2}}">{{radio2}}</mat-radio-button> <br>
<span *ngIf="radio3">
<mat-radio-button value="{{radio3}}">
{{radio3}}
</mat-radio-button>
</span>
</mat-radio-group>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3" style="padding-top: 2%;">
<button *ngIf="state !== 1; else disabled_btn" class="buttons1 btn btn-primary" (click)="onClickedBack.emit(selectedValue)">BACK</button>
<ng-template #disabled_btn>
<button class="buttons1 btn" (click)="onClickedBack.emit(selectedValue)" disabled>BACK</button>
</ng-template>
<button class="buttons2 btn btn-primary" (click)="onClickedNext.emit(selectedValue)">NEXT</button>
</div>
</div>

You can use the :nth-child() CSS selector to modify the behavior of the options.
.options > :nth-child(3) {
height: 0;
overflow-y: visible;
}
The above selects the 3rd direct child of .options class element group, removes the height, but ensures that it still shows. You may have to adjust this based on other CSS.

Related

Keep Accessibility Behaviour With `tabindex` (or similar) When Tabbing Through Elements

I have a form with some <button> elements in that I'm trying to get to work with the tab key for accessibility reasons. Each button has to be wrapped in a wrapper item, namely .item-wrapper.
I've added tabindex="0" to the button elements and to a .close <div> element that closes the component, and everything works as expected in Chromium based browsers.
However, in Safari when you tab through the form elements the focus is only applied to the .close element and then jumps outside of the form, and doesn't even get to the button elements. In Firefox the buttons tab as expected however the .close element doesn't take focus.
Is there no standard cross-browser behaviour for this in 2022 bearing in mind as humans we can also send rockets to Mars? And if not how do I have it so the when tabbing through the form, the focus goes from the .close through to each button in order as desired?
Codepen link: https://codepen.io/thechewy/pen/oNyzbJW
body {
margin: 0;
padding: 1rem;
display: flex;
justify-content: center;
}
form {
padding: 1rem;
background: #f7f7f7;
display: inline-block;
}
.close {
padding: 0.5rem;
background: lightblue;
display: inline-flex;
}
.item-wrapper {
margin: 1rem 0;
}
<form method="POST">
<div tabindex="0" class="close">X</div>
<div class="board-list">
<div class="item-wrapper">
<button tabindex="0" class="item" name="board-name">ITEM NAME 1</button>
</div>
<div class="item-wrapper">
<button tabindex="0" class="item" name="board-name">ITEM NAME 2</button>
</div>
<div class="item-wrapper">
<button tabindex="0" class="item" name="board-name">ITEM NAME 3</button>
</div>
<div class="item-wrapper">
<button tabindex="0" class="item" name="board-name">ITEM NAME 4</button>
</div>
</div>
</form>

Get button below each image in Angular *ngFor

I tried lots of methods to get the button below each image from ngFor loop in angular 10 but it populates the button next to the image not in each image it's showing as a list I attached the image output also. This is the code that I tried.
CSS
.container {
position: relative;
text-align: center;
}
.original {
width: 250px;
height: 250px;
float: left;
margin: 1.66%;
transition-duration: 0.3s;
border-radius: 15px;
}
Html
<ng-container *ngFor="let img of imageData">
<div class="container">
<img class="original" [alt]="img.Name"
src="https://localhost:44349/{{img.ImagePath}}"
width="350" height="350"/>
</div>
<button type="submit" (click)="deleteImage(img.Id)" class="btn btn-danger"><i
class="far fa-trash-alt"></i>
Remove
</button>
</ng-container>
Try this markup, move the closing div after the button element:
<ng-container *ngFor="let img of imageData">
<div class="container card">
<img class="original" [alt]="img.Name"
src="https://localhost:44349/{{img.ImagePath}}"
width="350" height="350"/>
<button type="submit" (click)="deleteImage(img.Id)" class="btn btn-danger"><i
class="far fa-trash-alt"></i>
Remove
</button>
</div>
</ng-container>
with new css class using flexbox:
.card {
display: flex;
flex-direction: column;
}
UPDATE
according to some css classes like btn, btn-danger I presume bootstrap used.
You can wrap the whole thing inside a div with these classes:
<div class="d-flex flex-wrap">
General info and docs
Stackblitz demo

How can I disable it so that when I open the download-popup the background doesn't move with it? - Chrome

Whenever the download-popup gets open my chat-box stays static but the background size is moving with the messages dynamically.
so if the curser is at the bottom it moves a little high as soon as the download popup is open
I tried to make the position:fixed, height:100% or the z-index +/-10
Unfortunately, I had to cut a few lines of code away so I could post it.
HTML:
<div id="chatContent{{i}}" class="row chat-content">
</div>
<hr>
<div class="row mb-3 mt-2">
<div class="col-12 input-group">
<input id="userInput{{i}}" #userInput (keyup.enter)="sendMessage(userInput)"
class="form-control form-control-lg"
type="text" placeholder="Ask me something">
<div class="input-group-append">
<button mat-button
class="c-white bc-darkgreen bgc-darkgreen w-px-100 btn-left-no-round"
(click)="sendMessage(userInput);">
<i *ngIf="sendBlock;then loader else send"></i>
<ng-template #loader>
<fa class="fa fa-spin fa-2x" name="spinner"></fa>
<span class="sr-only">Sent!</span>
</ng-template>
<ng-template #send>
Send
</ng-template>
</button>
</div>
</div>
</div>
CSS:
.chat-block {
background-color: white !important;
border-radius: 5px;
}
.chat-content {
overflow-y: auto;
max-height: 75vh;
height: calc(75vh - 100px);
min-height: calc(75vh - 100px);
box-sizing: border-box;
order: -10;
}
.chat-margin {
margin-left: 5px;
margin-right: 15px;
}

To make whole div clickable?

I have a template of handlebars in which there are multiple div which i need to make clickable.
However, in my div the text is dynamic, how will i be able to make whole div clickable. Here is the code
<div class="row">
{{#each event}} {{#is this.event ../eventName }}
<div class="col s12 m3 13 al">
<div class="card ">
<div class="card-image">
<img src="/Small/{{this.imageId}}.JPG">
<span class="imageClick"></span>
</div>
<div class="card-action sp1">
<div class="action-time">
<a href="/{{this.imageId}}/love" class="like sp">
<i class="material-icons fav">favorite</i>
</a>
<span id="{{this.imageId}}" class="like-text">{{this.love}}</span>
</div>
<div class="action-time">
<a href="/{{this.imageId}}/laugh" class="haha sp">
<i class="material-icons laugh">sentiment_very_satisfied</i>
</a>
<span id="{{this.imageId}}laugh" class="haha-text">{{this.laugh}}</span>
</div>
<div class="action-time">
<a href="/{{this.imageId}}/sad" class="downvote sp">
<i class="material-icons down">trending_down</i>
</a>
<span id="{{this.imageId}}sad" class="downvote-text">{{this.sad}}</span>
</div>
{{!-- {{this.imageId}} --}}
</div>
<div class="card-action">
<a class="waves-effect waves-light btn share">button</a>
</div>
</div>
</div>
{{/is}} {{/each}}
I want to make my div action-time clickable with the link in the a tag. I tried to use the popular <span> solution like this but no use. It works for the last action-time making first two not working. How can i solve this.
Css code for action-time and card is:
.action-time{
display: inline-block;
border: 1px solid rgba(202, 202, 202, 0.733);
width: 32%;
padding-top:2px;
padding-left: 4px;
border-radius:8px;
}
and for card :
.card {
margin: 10px;
padding: 5px;
border-radius: 8px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card-action {
padding: 5px 0px !important;
/* padding-right: 5px !important; */
}
Here is what my webpage looks like, I have multiple of those cards
I want to make the whole area in border of heart clickable, rather than just the image to heart.
You can update your html so that the <span> is inside your <a>.
<a href="/{{this.imageId}}/laugh" class="haha sp">
<i class="material-icons laugh">sentiment_very_satisfied</i>
<span id="{{this.imageId}}laugh" class="haha-text">{{this.laugh}}</span>
</a>
Displaying your <a> as a block element will have it fill up the entire <div>. Then you can float your <span> to the right and style it accordingly until it's where you want it exactly.
.action-time a {
display: block;
}
.action-time span {
float: right;
}
You can write some javascript to handle the operation
$(" .action-time").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
Looks for a link inside div with class of "action-time". Redirects to that links value when anywhere in div is clicked.

How to span elements without making CSS moving them?

I have some centered input boxes.
I am trying to add text to the right side of the bet box. Here is what happens when I do:
How can I fix this? I am using the span element to put them on the same line. What CSS property can fix this?
CODE:
HTML:
<div class="paper">
<h2>Play</h2>
<div class="gamebox">
<h1><i class="fa fa-btc" aria-hidden="true"></i>itcoin dice game</h1>
<div class="error" id="error">You don't have anymore bitcoins left. Why not deposit some?</div>
<h3 id="balance">Balance: 1000BTC</h3>
<form>
Bet
<br>
<span>
<input id="userbet" onchange="checkBet()" value="1" type="text" name="bet">Error, that bet is not valid.
</span>
<br>
Chance<br>
<input id ="userchance" value="50" type="text" name="chance">
<br>
<h3>Payout: 0BTC</h3>
<button type="button" id="dicebutton" onclick="prepareRoll()" style="vertical-align:middle"><img src="Images/dice.png"> Roll dice!</button>
</form>
<button type="button" id="autobet">Autobet</button>
</div>
</div>
CSS:
input[type=text] {
width: 20%;
padding: 12px 20px;
margin : 0 auto;
box-sizing: border-box;
border: 1px solid #555;
text-align: center;
display: inline-block;
}
Make a span around the other text and set it's position to absolute.
https://jsfiddle.net/xuhdy7Lc/