In the HTML shown below, I want to have the following appearance of the tags
label1: input1
label2: input2
label3: input3
but what I am getting is something like this:
label1:
input1
Please let me know how to modify the HTML to achieve the desired results.
HTML:
<div class="modal-body">
<form #form="ngForm" class="clr-form clr-form-horizontal" autocomplete="off">
<div>
<clr-input-container>
<label>{{ "DISTANCE_MEASUREMENT.START_LONGITUDE" | translate }}</label>
<input
required
maxlength="25"
clrInput
[(ngModel)]="selectedSite.name"
type="text"
name="name"
/>
</clr-input-container>
</div>
<div>
<clr-input-container>
<label>{{ "DISTANCE_MEASUREMENT.START_LONGITUDE" | translate }}</label>
<input
required
maxlength="25"
clrInput
[(ngModel)]="selectedSite.name"
type="text"
name="name"
/>
</clr-input-container>
</div>
</form>
</div>
Please have a look at the following jsFiddle and see if that helps you find a solution
https://jsfiddle.net/n5m43h8b/3/
All I added was some simple css:
clr-input-container {
position: relative;
display: block;
}
Just add display: block; to your style/css
clr-input-container {
display: block;
}
Use the following:
clr-input-container {
display: block
}
clr-input-container > label,
clr-input-container > input {
display: inline-block;
}
If this doesn't work. Remove any prior css or add !important with inline-block.
Add it to your global styles.css, if you are adding it in component css then add encapsulation: ViewEncapsulation.None in your #component declarator as shown in the following image.
Check this out,
HTML
<div class="flex-container">
<div class="row">
<div class="flex-item">
<div>
<label>{{ "D.START_LONG" | translate }}</label> <input
required
maxlength="25"
clrInput
[(ngModel)]="s.name"
type="text"
name="name"
/>
</div>
</div>
<div class="flex-item">
<div>
<label>{{ "DT.START_LAT" | translate }}</label><input
required
maxlength="25"
clrInput
[(ngModel)]="s.name"
type="text"
name="name"
/>
</div>
</div>
</div>
and CSS
html, body {
height: 100%;
}
body {
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
border: 1px solid blue;
}
.flex-item {
padding: 5px;
margin: 10px;
line-height: 20px;
color: Red;
font-weight: bold;
font-size: 2em;
text-align: center;
}
Related
I have just started training with Vue3 and really like it a lot. But I am stuck at some issues which seemed much easier (intuitive) with vanilla JS.
I have this group of radio buttons which have same name value
<template>
<div class="container">
<div class="inputs">
<div class="input">
<input
id="01-01"
v-model="voted"
type="radio"
name="VP-01"
#change="showCheckedValue"
/>
<label for="01-01">1</label>
</div>
<div class="input">
<input
id="01-02"
v-model="voted"
type="radio"
name="VP-01"
#change="showCheckedValue"
/>
<label for="01-02">2</label>
</div>
<div class="input">
<input
id="01-03"
v-model="voted"
type="radio"
name="VP-01"
#change="showCheckedValue"
/>
<label for="01-03">3</label>
</div>
<div class="input">
<input
id="01-04"
v-model="voted"
type="radio"
name="VP-01"
#change="showCheckedValue"
/>
<label for="01-04">4</label>
</div>
<div class="input">
<input
id="01-05"
v-model="voted"
type="radio"
name="VP-01"
#change="showCheckedValue"
/>
<label for="01-05">5</label>
</div>
</div>
<div class="checked">
<div class="one">Checked value of 1 : {{ voted }}</div>
<div class="one">Checked value of 2 : {{ voted }}</div>
<div class="one">Checked value of 3 : {{ voted }}</div>
<div class="one">Checked value of 4 : {{ voted }}</div>
<div class="one">Checked value of 5 : {{ voted }}</div>
</div>
<div class="voted">
{{ voted }}
</div>
</div>
</template>
I am able to output the value with v-model and that's fine... and I can also get the checked value for CSS styling... so that's fine..
But when one input field (radio button) is checked then I would assume that the ON value for that button defines the status (Maybe I am wrong in this assumption)... but in my code if I click on any button it converts to ON but the other buttons too stay as ON.. I would assume that if the button is checked then it would be ON and if not then it would be ... maybe null? or false? I am not sure...
I have added a show showCheckedValue function to be called #change but didn't know how to make it work...
Here's my script and styles setup to test... I even tried to change the v-model= "voted" to have a different one for each button like v-model="voted1" and v-model="voted2" and so on.. but that didn't work either..
So here's the question
How do I output or replicate the checked value of a group of radio buttons? If one of them is checked it should be true or on and the others should be false or null?
Here's a link to my test on codepen.. https://codepen.io/alimbolar/pen/OJvmNQB
<script setup>
import { ref } from "vue";
const voted = ref(null);
// const voted2 = ref(null);
// const voted3 = ref(null);
// const voted4 = ref(null);
// const voted5 = ref(null);
</script>
<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
html {
box-sizing: border-box;
}
#app {
border: 1px solid red;
margin: 50px;
display: grid;
place-items: center;
height: 100vh;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 100%;
height: 100%;
}
.inputs {
border: 1px solid green;
padding: 20px;
width: 100%;
display: flex;
justify-content: space-evenly;
}
.checked {
border: 1px solid red;
width: 100%;
display: flex;
}
.checked > * {
text-align: center;
font-size: 0.8rem;
padding: 1rem;
}
.voted {
text-align: center;
text-transform: uppercase;
border: 1px solid orange;
padding: 10px;
}
input:checked + label {
color: red;
}
</style>
You need to give a value for each radio button so the voted ref can bind with it.
Please check the codepen
I am attending to have 2 input boxes next to each other with text in between them. Something like this
[0... ] < Ranking < [1000...]
However, the most I've been able to get is the two input boxes with no text in between.
This is my code so far attending to put the text in between them.
return(
<div className="two-col">
<div className="col1">
<input type={"text"} required={true} placeholder={"0..."} name={"id"} onChange={update} />
</div>
<text> < Ranking < </text>
<div className="col2">
<input type={"text"} required={true} placeholder={"1000..."} name={"id"} onChange={update} />
</div>
</div>
);
And my CSS file
.two-col {
overflow: hidden;/* Makes this div contain its floats */
}
.two-col .col1,
.two-col .col2 {
width: 50%;
background: #f2f2f2;
}
.two-col .col1 {
float: left;
}
.two-col .col2 {
float: right;
}
Any help is much appreciated.
<div className={'container'}>
<div className={'col'}>
<input type={'text'} required={true} placeholder={'0...'} name={'id'} onChange={update} />
</div>
<div className={'col'}> < Ranking < </div>
<div className={'col'}>
<input type={'text'} required={true} placeholder={'...1000'} name={'id'} onChangeonChange={update} />
</div>
</div>
Using flex
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
You can have more control over the row using display: grid (not as well supported as flexbox).
EDIT: graph container
<div className={"container"}>
<div className={"container inputs"}>
<div>
<input
type={"text"}
required={true}
placeholder={"0..."}
name={"id"}
onChange={"update"}
/>
</div>
<div> < Ranking < </div>
<div>
<input
type={"text"}
required={true}
placeholder={"...1000"}
name={"id"}
onChange={"update"}
/>
</div>
</div>
<div className={"graphview"}>
graph view
</div>
</div>
CSS
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.container.inputs {
width: 50%;
}
.graphview {
width: calc(50% - 10px);
border: 5px solid rgba(0, 0, 0, 1);
}
When using percents and borders, you have to calculate the width.
Try to use flexbox
.two-col {
display: flex;
}
.two-col .col1,
.two-col .col2 {
background: #f2f2f2;
}
and remove other css
Please I need help finding out why the calculation isn't working.
My console log does not show any error.
I want the third disabled input to just show an addition of the first two inputs. please see my code below. Is there something i am not including or adding?
var yearlyMB = document.getElementById('yearlyMB').value;
var yearlyDB = document.getElementById('yearlyDB').value;
document.getElementById('totalBudget').value = yearlyMB + yearlyDB;
.container {
display: flex;
flex-direction: row;
gap: 20px;
justify-content: center;
/*margin-top: 200px;*/
}
.block-title {
border: 2px solid green;
background-color: gray;
width: 300px;
height: 50px;
text-align: center;
}
.block-answer {
border: 2px solid red;
background-color: yellow;
width: 300px;
height: 50px;
}
<div class="container">
<div class="block-title">Yearly Marketing Budget</div>
<input type="text" class="block-answer" id="yearlyMB">
</div>
<div class="container">
<div class="block-title">Yearly Donation Budget</div>
<input type="text" class="block-answer" id="yearlyDB">
</div>
<div class="container">
<div class="block-title">Total Budget</div>
<input type="text" readonly="readonly" disabled="disabled" class="block-answer" id="totalBudget">
</div>
You have most of the elements in place, but your code currently only runs once when the page is first loaded.
In order to constantly update the value in the 'totals' input you need to add listeners to your inputs watching for changes. See: addEventListener() and input event
You also need to account for the fact that input values are always strings, the snippet below uses the unary plus (+) operator to convert the input values to numbers before adding them together. If you don't do this you will simply concatenate the two strings.
const yearlyMB = document.getElementById('yearlyMB');
const yearlyDB = document.getElementById('yearlyDB');
const totalBudget = document.getElementById('totalBudget');
function updateTotalBudget() {
totalBudget.value = +yearlyMB.value + +yearlyDB.value;
}
[yearlyMB, yearlyDB].forEach(input =>
input.addEventListener('input', updateTotalBudget));
.container {
display: flex;
flex-direction: row;
gap: 20px;
justify-content: center;
/*margin-top: 200px;*/
}
.block-title {
border: 2px solid green;
background-color: gray;
width: 300px;
height: 50px;
text-align: center;
}
.block-answer {
border: 2px solid red;
background-color: yellow;
width: 300px;
height: 50px;
}
<div class="container">
<div class="block-title">Yearly Marketing Budget</div>
<input type="text" class="block-answer" id="yearlyMB">
</div>
<div class="container">
<div class="block-title">Yearly Donation Budget</div>
<input type="text" class="block-answer" id="yearlyDB">
</div>
<div class="container">
<div class="block-title">Total Budget</div>
<input type="text" readonly="readonly" disabled="disabled" class="block-answer" id="totalBudget">
</div>
I'm a beginner and I'm struggling with a javascript document.
I want to toggle from 'hidden' to 'visible' a block that thanks after submiting a form. But the thing is that my 'thanks block' only appear for a second then disappear.
I've tried it by changing the 'submit' evenement by 'click' and it's working but then the form is not validate. I don't know if know what I mean. Thanks a lot
Here is my JS code:
let merci = document.getElementById('merci');
let button = document.getElementById('frmContact');
button.addEventListener('submit', submit, false);
function submit(){
merci.classList.toggle('visible');
}
merci.addEventListener('click', closeMerci, false);
function closeMerci(){
merci.classList.toggle('visible');
};
Here is the css
#merci{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.9);
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
visibility: hidden;
opacity: 0;
}
#merci #cadreMerci{
background-color: white;
padding: 50px;
margin: 20px 50px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: center;
}
#merci.visible{
opacity: 1;
visibility: visible;
}
and here is the HTML document :
<form id="frmContact">
<div>
<div>
<label for="fName">Prénom</label>
<input name="fName" id="fName" required autofocus />
</div>
<div>
<label for="lName">Nom</label>
<input type="text" name="lName" id="lName" required />
</div>
<div>
<label for="email">Votre e-mail</label>
<input type="email" name="email" id="email" required />
</div>
</div>
<div>
<div>
<label for="message">Votre message</label>
<textarea name="message" id="message" required></textarea>
</div>
</div>
<button id="buttonSubmit" type="submit">Envoyer</button>
</form>
Heads up only been doing this for a couple days.
I have a form with one text field and one button. Trying to center the text field and button side by side inside of my form.
.row {
width: 100%;
margin-bottom: 20px;
display: flex; flex-wrap: wrap;
}
.col-6 {
width: 50%;
}
.form {
margin 0 auto;
display: block;
}
<div class='grid'>
<div class='row'>
<div class='col-6'>
<form class='form'>
<input type ='text' name='userGuess' class='userGuess'/>
<button type='button' name='submitBtn' value='Submit' class='submitBtn'>Submit</button>
</form>
</div>
</div>
</div>
I tried a lot of different things and nothing seems to work how I want it too.
Note: Not entire CSS code, just basic framework so I didn't paste all of it.
thanks.
Add justify-content: center; to your .row. Then read this article.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I added a Div to Contain the two.
Here is the updated CSS with class Container.
.row {
width: 100%;
margin-bottom: 20px;
display: flex; flex-wrap: wrap;
}
.col-6 { width: 50%; }
.form {
margin 0 auto;
display: block;
}
.container{
width:100%;
padding:1%;
}
Here is your updated HTML with the new Div in it.
<div class='grid'>
<div class='row'>
<div class='col-6'>
<form class='form'>
<div class="container">
<input type ='text' name='userGuess' class='userGuess'/>
<button type='button' name='submitBtn' value='Submit' class='submitBtn'>Submit</button>
</div>
</form>
</div>
</div>
</div>