So, im actually a javascript developer and my brother asked me to design a simple page for his business. Im not to good with frontend, so im using Material UI and pasting everything with a little bit of css.
Im doing a form with the card component, that should look like this: enter image description here
my problem is, I dont know how to put the logo (i have it in svg and png) above the card. Should i do it all with css? or how could i do this with MUI? I dont even know where to begin looking
To change insert the logo, just change the relative path in "image".
<CardMedia
component="img"
height="194"
image="/static/images/cards/paella.jpg"
alt="Paella dish"
/>
See more in https://mui.com/material-ui/react-card/
With and without MUI, you will experience the same logic behind the style. In the MUI, you'll use box, cardmedia, and form. In html you will use div, img and form.
I suggest you to try using HTML and CSS. When you start with React or another framework, you start building using component libraries. It's not a rule, it's just a suggestion. I made a simple example without MUI to help you:
HTML:
<div class="formBox">
<img
src="https://logodownload.org/wp-content/uploads/2014/09/google-logo-1.png"
width="100px"
height="auto"
/>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
CSS:
.formBox {
display: flex;
flex-direction: column;
align-Items: center;
padding: 20px;
gap: 10px;
max-width: 200px;
border: 1px solid;
border-radius: 10px;
}
I suggest you to learn more reading:
https://www.w3schools.com/html/html_forms.asp
And look for Styled Components and JSS/TSS, maybe you like it.
Related
I'm having a hard time getting the labels on this form to line up beside the checkboxes. I'm using React with React-Hook-Form for validation and state management (here's the github: https://github.com/cipdv/ciprmt-mern/blob/main/client/src/components/User/HHForm/RFHHHForm.js if that helps, the file with the form is called RFHHHForm.js).
I've tried a few things:
I tried using semantic ui's library like this:
<div className='inline field'>
<div className='ui checkbox'>
<input defaultChecked={healthHistory?.epilepsy} name="epilepsy" type="checkbox" id="epilepsy" {...register('epilepsy')} />
<label>Epilepsy</label>
</div>
<div className='ui checkbox'>
<input defaultChecked={healthHistory?.diabetes} name="diabetes" type="checkbox" id="diabetes" {...register('diabetes')} />
<label>Diabetes</label>
</div>
When I used this, the label and checkboxes line up, but for some reason the checkboxes become uneditable (can't be checked or unchecked).
I tried making my own css stylesheet module like this:
input[type="checkbox"]
{
vertical-align:middle;
}
label,input{
display: inline-block;
vertical-align: middle;
}
But this didn't seem to work at lining anything up.
You can try to wrap the input inside the label
<label>Diabetes <input defaultChecked={healthHistory?.diabetes} name="diabetes" type="checkbox" id="diabetes" {...register('diabetes')} /></label>
or with your checkbox class you can
.checkbox{
display: flex;
align-items: center;
}
let me know if it worked.
I have a field in my html page like this:
<input type="text" class="form-control" readonly>
I would like it to look like normal text between <p> tags. Please help me CSS wizards.
you can try this
CSS
input[readonly]{
background-color:transparent;
border: 0;
font-size: 1em;
}
if you want to use with a class you can try this one
HTML
<input type="text" class="form-control classname" value="Demo" readonly />
CSS
input[readonly].classname{
background-color:transparent;
border: 0;
font-size: 1em;
}
if you want to make the <input> look like inline text (resizing the input element) please check this fiddle https://jsfiddle.net/Tanbi/xyL6fphm/ and please dont forget calling jquery js library
I realise the question is about Bootstrap 3, but it might be good to know that Bootstrap 4 now has this out of the box: https://getbootstrap.com/docs/4.0/components/forms/#readonly-plain-text
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email#example.com">
</div>
in addition to the accepted answer, I found that the following style works a bit better:
input[readonly] {
background-color: transparent;
border: 0;
box-shadow: none;
}
Bootstrap introduces a shadow that one may want to hide.
<input type="text" placeholder="Show your text" readonly style="border: 0px;" />
That should work
Bootstrap 5 has form-control-plaintext class for that:
<input type="text" readonly class="form-control-plaintext" id="email"/>
I am using bootstrap 3 & the issue is that label for the checkbox is overlapping the text. I have tried a few thing things but did not work, so if someone can help I will really appreciate it. This is what the code looks like, The class of the form is form-horizontal
<div class="checkbox">
<label class="checkbox-inline no_indent">I have read and agree with privacy and disclosure policy.
<input name="Terms" id="Terms" type="checkbox" ></label>
</div>
It's supposed to be like this with Bootstrap, <input> first and text after. http://jsfiddle.net/sqax02ah/
<div class="checkbox">
<label class="checkbox-inline no_indent">
<input name="Terms" id="Terms" type="checkbox">
I have read and agree with privacy and disclosure policy.
</label>
</div>
You can follow other answers if you do need the checkbox appears at the end.
In Bootstrap the styles expect thecheckbox to be first and then the text and hence a margin-left: -20px is set. For you snippet you need to add custom styles.
.radio input[type=radio], .radio-inline input[type=radio], .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox] {
margin-right: -20px;
margin-left: 0;
}
Fiddle
Try use display: inline-block for .checkbox class, its should to help. Or change position via margin margin-left: 20px;
I'm currently using following login form where I want to change the design a bit:
http://html-form-guide.com/php-form/php-login-form.html
I want to place ' Login ' into the middle of the box, instead the left:
I've also found out that you can change the textsize, font etc. in fg_membersite.css (line 17). What's interesting is that in Chrome it IS displayed in the middle, only in Firefox it's shown on the left. Since I'm a new CSS worker I wanted to ask if anybody could help me fixing this incompatiblity problems here.
Since it also contains lots of Javascript based stuff I wasn't sure if I posting source codes here would be sensible, because I'd have to post the whole source anyway then.
Thanks in advance!
EDIT: Much prettier now. Thanks:
http://rapidhdd.com/images/4013242013-10-06_1842.png
Use this for the center text part:
<form id='login' action='login.php' method='post' accept-charset='UTF-8'>
<fieldset >
<legend align="center">Login</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<label for='username' >UserName*:</label>
<input type='text' name='username' id='username' maxlength="50" />
<label for='password' >Password*:</label>
<input type='password' name='password' id='password' maxlength="50" />
<input type='submit' name='Submit' value='Submit' />
</fieldset>
</form>
I guess you've changed the HTML code but note the: <legend align="center">Login</legend>
align="center"
http://jsfiddle.net/4szBC/
EDIT:
Since it seems like align is deprecated you, can do this using by using css.
legend {
text-align: center;
}
If you want the css right in HTML, add it in a <script> tag and place it in <head>. Like this:
<script type="text/css">
legend {
text-align: center;
}
</script>
http://jsfiddle.net/4szBC/1/
add to submit button few CSS rules:
input[type=submit] {
display: inline-block;
margin: 0 auto;
padding: 10px 30px;
}
I'm trying to align my Checkbox with label to center in my little webpage I'm developing but I cannot figure out how, and yes I've googled!
You can view source on my webpage, http://www.sithhappens.net (Load the phone on your mobile though thats where all the CSS is done is for mobile view (Desktop view will come later).
And see the css at http://www.sithhappens.net/iphone.css
Not HTML5 but it works:
http://jsfiddle.net/gYCQz/
CSS:
input
{
display: inline;
}
body
{
text-align: center;
}
HTML4+:
<input type="checkbox" value="Test" /> Test
if u want check box in center use this
<div>
<input type="checkbox" value="Test" />
<div>
then u can use text-align(right,left,center) whatever u want.
also u can use
<div align="center">
</div>
and remove margin-bottom from all tag give width and height.