I have a problem applying CSS to <form> element and all nested elements inside. I do it by class .header_navbar_form and .header_navbar_form_input in stylesheet header.css, but only bootstrap takes effect. For some reason, other elements, such as <div>, <p>, <h1> are affected by the same stylesheet
Once again: div with id header_navbar_div is affected by the same stylesheet
cshtml:
<div id="header_navbar_div">
<form class="header_navbar_form" action="/Home/Index">
<input class="header_navbar_form_input" type="submit" value="Uvod">
</form>
<form class="header_navbar_form" action="/Home/Locations">
<input class="header_navbar_form_input" type="submit" value="Lokality">
</form>
<form class="header_navbar_form" action="/Home/Trips">
<input class="header_navbar_form_input" type="submit" value="Nase vandry">
</form>
<form class="header_navbar_form" action="/Home/Equipment">
<input class="header_navbar_form_input" type="submit" value="Vybava">
</form>
<form class="header_navbar_form" action="/Home/Recipes">
<input class="header_navbar_form_input" type="submit" value="Kucharka">
</form>
<form class="header_navbar_form" action="/Home/Tips">
<input class="header_navbar_form_input" type="submit" value="Navody a rady">
</form>
<form class="header_navbar_form" action="/Home/Nature">
<input class="header_navbar_form_input" type="submit" value="O Prirode">
</form>
<form class="header_navbar_form" action="/Home/Songbook">
<input class="header_navbar_form_input" type="submit" value="Zpevnik">
</form>
<form class="header_navbar_form" action="/Home/Partners">
<input class="header_navbar_form_input" type="submit" value="Partneri">
</form>
</div>
CSS:
#header_navbar_div {
padding-top: 2px;
display: flex;
justify-content: center;
}
.header_navbar_form {
width: 50%;
background-color: red;
}
.header_navbar_form_input {
width: 11%;
padding-bottom: 10px;
padding-top: 10px;
border-color: darkolivegreen;
background-color: lightgoldenrodyellow;
color: darkolivegreen;
font-weight: bold;
}
I openned the application in Edge instead of Firefox and the CSS took effect, so i cleared a cache of Mozzila and it works. Kind of noobie but, solved the problem. Thanks for efforts.
Jackob
Related
I want to style Forget Password element so that it appears in the right side. This is possible with width set to 100% but I'm also observing that the empty space before the text is also carrying the link property. I tried using width as 50%, but this pushes the text back to the left side. How can I achieve what I want?
#forgotP {
color: blue;
text-decoration: none;
display: block;
width: 50%;
text-align: right;
font-size: 12px;
font-weight: 300;
}
<div class="box">
<form autocomplete="off">
<input type="text" id="username" name="username" placeholder="Username"><br>
<p>Forgot Password?</p>
<input type="password" id="password" name="password" placeholder="Password"><br>
<input type="button" value="Register" id="register" class="inline">
<input type="button" value="Login" id="login" class="inline">
</form>
</div>
You can use CSS flexbox to get it done.
.box {
width: max-content;
}
p {
display: flex;
justify-content: flex-end;
}
#forgotP {
color: blue;
text-decoration: none;
font-size: 12px;
font-weight: 300;
}
<body>
<div class="box">
<form autocomplete="off">
<input type="text" id="username" name="username" placeholder="Username"><br>
<p>Forgot Password?</p>
<input type="password" id="password" name="password" placeholder="Password"><br>
<input type="button" value="Register" id="register" class="inline">
<input type="button" value="Login" id="login" class="inline">
</form>
</div>
</body>
EDIT
add CSS code
p {
display: flex;
justify-content: flex-end;
}
I am have the following form:
<form>
<input type="text" id="search_bar" name="search_bar" value="" placeholder="Zip Code or City">
<input type="submit" id = "search_bar_submit_button" name="search_bar_submit_button" value="Search">
</form>
and the following css:
#search_bar, #search_bar_submit_button{
height: 5em;
}
The search bar is now 5em but the submit button's height has not changed. I have seen answers that suggest using <input type="submit" height = "x">, but feel there has to be a way to do this with CSS?
input[type=submit] {
font-size: 5em;
}
<input type="submit" value="Submit">
Please replace <input type='submit' with <button type='submit'.
This will also allow you to apply proper CSS. Please see example below.
input[type='submit'] {
height: 5em;
}
button[type='submit'] {
height: 5em;
}
<input type='submit' value='Search'/>
<button type='submit'>Search</button>
Please go through following link for more details on it.
input type="submit" Vs button tag are they interchangeable?.
This may help CSS
#search_bar_submit_button{
max-height: 50px;
}
You can try below code.
#search_bar_submit_button {
width: 10em;
height: 4em;
}
<form>
<input type="text" id="search_bar" name="search_bar" value="" placeholder="Zip Code or City"><br/><br/>
<input type="submit" id = "search_bar_submit_button" name="search_bar_submit_button" value="Search">
</form>
So I have a simple login prompt like this:
<form id="login">
<legend>Login</legend>
<span>
<input type="text" value="Username">
<input type="password" value="Password"><br>
<input type="checkbox">Remember
Forgot?
Register
<input type="submit" value="Login">
</span>
</form>
and the css:
#login {
display: inline;
float: right;
line-height: 1.5em;
margin-right: 0.5em;
}
https://jsfiddle.net/tzc6Lpur/
What I would like is that the bottom items are stretched over the entire width of the element so that login button would be lined up to the right end of the password box. Something like text-align: justify; would to that for text but I can't find an easy way to do this. Ofcourse I could manually position the elements but that just seems to be a lot redundant code.
any help is appreciated!
The easy way would be to change your markup accordingly:
<form id="login">
<legend>Login</legend>
<div>
<input type="text" value="Username">
<input type="password" value="Password"><br>
<div class="flex-wrap">
<label for="myCheckbox"><input name="myCheckbox" type="checkbox">Remember</label>
Forgot?
Register
<input type="submit" value="Login">
</div>
</div>
</form>
and use the following CSS:
.flex-wrap{
display: flex;
flex-direction: row;
justify-content: space-between;
}
#login{
float:right; //To mantain the form on the right of the screen
}
Flex box is supported by all modern browsers, but if you need to support
JSFiddle: https://jsfiddle.net/silviagreen/hcktxgva/3/
You can Use this to align your button to the right end.
<input id = "login_button" type="submit" value="Login">
and in css add
#login_button{
float:right;
}
You can use twitter-bootstrap-3 which will help you a lot. Take a look into it.
all you have to do is, add one more span and add float:right to it.
take a look at this. https://jsfiddle.net/adityap708/sedLvLp2/
<form id="login">
<legend>Login</legend>
<span>
<input type="text" value="Username">
<input type="password" value="Password"><br>
<span style="float:right;">
<input type="checkbox">Remember
Forgot?
Register
<input type="submit" value="Login">
</span>
</span>
</form>
#login {
display: inline;
float: right;
line-height: 1.5em;
margin-right: 0.5em;
}
You can the use flexbox on the wrapper elements which, really, should be block level and not a spans.
#login {
display: inline;
float: right;
line-height: 1.5em;
margin-right: 0.5em;
}
#login div {
display: flex;
justify-content: space-between;
}
<form id="login">
<legend>Login</legend>
<div>
<input type="text" value="Username">
<input type="password" value="Password">
</div>
<div>
<input type="checkbox">Remember
Forgot?
Register
<input type="submit" value="Login">
</div>
</form>
I am trying to put my CSS code in the same file as my HTML code, but it does not display properly (I do not want to just link my CSS to my HTML, I already got that to work). I have tried copying and pasting the code, but that does not work. Do I have to do it differently when it is in the same file?
Here is the relevant code:
<head>
<title> Example </title>
<style type="text/css">
input: textarea{
resize: none;
}
input[type=button]{//set the sizes for all of the input buttons
width: 5em;
height: 2em;
font-size: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<form id = "mainForm" name="mainForm" method="get" action="" onsubmit=" return checkForm()">
Type something: <br> <textarea id="info" name="info" > </textarea>
<input type="button" value="1" id="button1"> </input>
<input type="button" value="2" id="button2"> </input>
<input type="button" value="3" id="button3"> </input>
<input type="submit" id="submit" name="submit" class="btn" value="Submit" />
<input type="reset" id="reset" name="reset" class="btn" value="Clear" />
</form>
</body>
Here is a pic of how it looks when I link it
And here is a pic of how it looks when I try putting the CSS in the HTLM file
no need to specify input just textarea . you can even use inline css for textarea.
<style type="text/css">
textarea{
resize: none;
}
input[type=button]{
width: 5em; height: 2em;
font-size: 15px;
font-weight: bold;
}
</style>
Works for me. Only problem I see is input: textarea is invalid. Just use textarea instead.
<head>
<title> Example </title>
<style type="text/css">
textarea{
resize: none;
}
input[type=button]{ //set the sizes for all of the input buttons
width: 5em;
height: 2em;
font-size: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<form id="mainForm" name="mainForm" method="get" action="" onsubmit="return checkForm()">
Type something: <br> <textarea id="info" name="info" > </textarea>
<input type="button" value="1" id="button1">
<input type="button" value="2" id="button2">
<input type="button" value="3" id="button3">
<input type="submit" id="submit" name="submit" class="btn" value="Submit">
<input type="reset" id="reset" name="reset" class="btn" value="Clear">
</form>
</body>
I have a form and I want to centre the text boxes and label to the middle. How can I do this? (I would have thought aligning the left and right to auto would do it but it doesn't work). This is my code:
<body>
<div id="formWrapper">
</center>
<form method ="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name"/>
<label for="password">Password:</label>
<input name="password"/>
<label for="email">Email:</label>
<input name="email"/>
<p>
<fieldset>
<input class="btn" name="submit" type="Submit" value="Register"/>
<input class="btn" name="reset" type="reset" value="Clear Form">
</fieldset>
</form>
</div>
</body>
The style:
#formWrapper{
width:550px;
padding: 2em 0 2em 0;
border:solid 5px #F1F1F1;
margin-top: 100px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: #AFC8DE;
}
If you apply text-align: center to the form it will place the fields in the center.
Semantics are important here, so take a look at an accessible approach to forms. http://www.alistapart.com/articles/prettyaccessibleforms
take a look at this: http://jsfiddle.net/7auS8/
add align="center" to your form
div id="formWrapper">
<form method ="post" action="addMember.php" align="center">
<label for="name" >Username:</label>
<input name="name"/>
<p>
<label for="password">Password:</label>
<input name="password"/>
<p>
<label for="email">Email:</label>
<input name="email"/>
<p>
<fieldset>
<input class="btn" name="submit" type="Submit" value="Register"/>
<input class="btn" name="reset" type="reset" value="Clear Form">
</fieldset>
</form>
</div>
border: 1px solid gray;
border-radius:5px;
color: #393939;
height: 30px;
padding: 0px 6px 0 6px;
width: 186px;
I took this code and tried out adarshr answer and it does center the form. Chris is also right the semantics are very important here because after seeing it I feel like this might not be exactly what you were looking for. Another point I wanted to add to this to someone reading this who is probably a beginner is that when you add text-align: center; it needs to go in the css file and end with a ;