I am creating a dashboard in react with FLuentUI. I have a row of textBoxes and they are just not lining up - as you can see. Can someone give me a starter please on how to line these up :
As you can see the 'Enter text here is not straight with the others. here is my react code.
return (
<div style={{ fontSize: FontSizes.size42 }} className="ms-Grid" dir="ltr">
<ProducingBroker currency={currency} setCurrency={setCurrency} />
<BrokerContact currency={currency} setCurrency={setCurrency} />
<OriginalInsured currency={currency} setCurrency={setCurrency} />
<ReinsuredName currency={currency} setCurrency={setCurrency} />
<label>{mailboxitem.itemId}</label>
</div>
I know I need to put some styling around it, just need a starter please.
Related
I am trying to learn Tailwind CSS and generally working better with CSS. In this case, I am trying to make my search icon appear inside of my search input field.
I found some tutorials online but they mostly use plain CSS.
Is there any simple way to achieve this using Tailwind?
import React from "react";
import { FaSearch } from "react-icons/fa";
const SearchBar = () => {
return (
<div>
<input className="bg-slate-50 hover:bg-red-200 rounded-3xl h-12 w-56" />
<FaSearch />
</div>
I also tried to wrap the input elment in a <div> and <form> tags, but none of those worked.
This should do it:
<div className='flex items-center'>
<input className='bg-slate-50 hover:bg-red-200 rounded-3xl h-12 w-56' />
<SearchIcon className='-ml-9' />
</div>
Docs:
align items | MDN
using negative margins | MDN
I would like to apply the style to Formik's tag for react. How can I do?
<ErrorMessage name="email"></ErrorMessage>
I try with component={Custom} but don't work.
I use Tailwindcss.
Thanks if you want to help me.
To add a class to a React component, use className="theClass". Formik's ErrorMessage.component property takes a value of a custom component, e.g. component={Custom} as you have, or it can take an HTML container, e.g. component="div". Assuming this is not a Tailwind port to React, "div" is appropriate. Putting these two together, you can apply Tailwind-style invalid message styling thus:
<ErrorMessage name="emailAddress" component="div" className="text-red-500 text-xs italic" />
<ErrorMessage name="field name" component="div" className="some classes" />
add "component" field for ErrorMessage component
This method worked for me in react..
<ErrorMessage name='email' render={msg => <div className="error">{msg}</div>}/>
then, call that className in the CSS file
.error{
color: red;
}
I am trying to get my text area to display with row height recognition. I've followed several of the suggestions that have been made on this board.
I currently import componentClass from react-bootstrap and in my form field, I have:
<div className="form-group">
<label htmlFor="overview">Outline your proposal</label>
<Field
name="overview"
componentClass="textarea"
rows={4}
className={
"form-control" +
(errors.overview && touched.overview ? " is-invalid" : "")
}
/>
<ErrorMessage name="overview" component="div" className="invalid-feedback" />
</div>
It still renders in a single line.
What is the hidden secret about making this work with row numbers for text area?
I have 2 strange problems. I have a large form with lots of input fields. That works fine. I want to add a slide toggle at the bottom which changes a variable that will affect styles on the whole form.
My first problem is that the variable will not display until the slide toggle is clicked.
HTML
<mat-slide-toggle [(ngModel)]="ifPrint" name="ifPrint" id="ifPrint" ></mat-slide-toggle>
<div>
{{ifPrint}}
</div>
COMPONENT
export class PrintReviewDetailsComponent implements OnInit {
ifPrint = true;
}
the ifPrint variable is blank on page load
The second problem is
when the slide toggle is clicked the div containing the variable shows as true but when I click the toggle to the off position the ifPrint variable stays as true and does not change.
I have created a blitz and it is working fine there with the same code so I am unsure as why I am having these issues on my page.
The console says:
Error: No value accessor for form control with name: 'ifPrint'
EDIT: I updated the stackblitz to include the html of the form and now it is not working.
Your updated stackblitz couldn't recreate the issue which you shared... But from your question, the following 2 issues are addressed for a form and styling is also done:
the toggle value was not displayed by-default until the toggle was clicked
the toggle value didn't change when you toggled it
the style is now being updated based on the toggle value
relevant TS:
model:any;
constructor(){
this.model = {name: '' , age: null, ifPrint: false};
}
relevant HTML:
<form (ngSubmit)="formSubmit()" #demoForm="ngForm" >
<div [ngClass]="model.ifPrint === true ? 'trueClass' : 'falseClass'">
<input type="text" placeholder="Enter Name" #name="ngModel" [(ngModel)]="model.name" name="name" />
<br/>
<input type="number" placeholder="Enter Age" #age="ngModel" [(ngModel)]="model.age" name="age" /> <br/>
<mat-slide-toggle #ifPrint #age="ngModel" [(ngModel)]="model.ifPrint" name="ifPrint"></mat-slide-toggle> {{model.ifPrint}} <br/>
</div>
<button type="submit"> Submit </button>
</form>
check a minimal, working demo here for what you're trying... hope it helps...
I removed everything in your template except the mat-slide-toggle and it works as expected.
I believe the issue is because your html template is referencing methods or properties that your component does not have, or trying to access a property of null or undefined somewhere is causing the issue.
Check your console for the errors and if you fix those up, the slide toggle should work as expected.
Hey everyone I know this question has been asked timelessly but I am a complete newbie to HTML, CSS and Javascript. I literally am on my fourth day of self learning how to code so please forgive me.
I want to test a page where if you click on a button it will display a picture, if you click on the other button it will display a different picture. Here is what I got so far, what would be by next steps and why? Thank you!
<!doctype html>
<html>
<head>
<title> Just Two Buttons </title>
</head>
<body>
<h1><center> Pick a button! </center></h1>
<img id="dog" src="https://i.ibb.co/x24nhsc/dog-image.jpg" style="display:none;>
<img id="cat" src="https://i.ibb.co/CsGsxJ5/cat-217679.jpg">
<button> Woof! </button>
<button> Meow! </button>
<script>
</body>
</html>
There are many ways to achieve this. The solution below uses onclick combined with data-* to reference which image a button should show or hide. Further, visibility requires the CSS class "visible" to be shown (try to avoid styling directly on the style attribute).
When an image should be shown, the existing visible image should be invisible. You could either store which one is shown, and only remove the class from that element - or as I have done, by removing it from all images.
To get the button we clicked, this is passed to the function in onclick=myclick(this). That means that we can access the clicked buttons attributes, specifically the data-href="dog". This is accessed as element.dataset.href.
var dog = document.getElementById("dog");
var cat = document.getElementById("cat");
function myclick(element) {
dog.classList.remove("visible");
cat.classList.remove("visible");
document.getElementById(element.dataset.href).classList.add("visible");
}
.myimage {
display: none;
}
.visible {
display: block;
}
<!doctype html>
<html>
<head>
<title> Just Two Buttons </title>
</head>
<body>
<h1><center> Pick a button! </center></h1>
<img class="myimage" id="dog" src="https://i.ibb.co/x24nhsc/dog-image.jpg">
<img class="myimage visible" id="cat" src="https://i.ibb.co/CsGsxJ5/cat-217679.jpg">
<button onclick="myclick(this)" data-href="dog"> Woof! </button>
<button onclick="myclick(this)" data-href="cat"> Meow! </button>
</body>
</html>