<!DOCTYPE html>
<html>
<head>
<title>Web Ui</title>
<style>
.center{
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<form >
<div>
<label for="fname">Requestor-Name:</label>
<input type="text" id="Rname" name="Rname"><br><br>
</div>
<label for="lname">Namespace-Name:</label>
<input type="text" id="Nname" name="Nname"><br><br>
<label for="Pname">Project_ID:</label>
<select id="select">
<option value="default">default</option>
</select>
<br>
<br>
<input type="submit" value="Submit">
</form>
<script>
var select=document.getElementById("select"),
arr=["ai-apps-utils-prod","daa-shared-gcr-prod-71bc","da-dm-aidq-dev-607c","da-dm-aidq-lz-dev-ec8c","da-dm-aidq-lz-prod-ce88"];
for(var i=0;i<arr.length;i++)
{
var option=document.createElement("OPTION"),
txt=document.createTextNode(arr[i]);
option.appendChild(txt);
option.setAttribute("value",arr[i]);
select.insertBefore(option,select.lastChild);
}
</script>
</body>
</html>
From the above code I'm getting three input text boxes and I want to make the above input text boxes & submit buttons to the center. I have added css to align the center but it looks like it's not working. Thanks in advance!.
You have not used the css style in the html. also add text-align: center; to the center class.
var select = document.getElementById("select"),
arr = ["ai-apps-utils-prod", "daa-shared-gcr-prod-71bc", "da-dm-aidq-dev-607c", "da-dm-aidq-lz-dev-ec8c", "da-dm-aidq-lz-prod-ce88"];
for (var i = 0; i < arr.length; i++) {
var option = document.createElement("OPTION"),
txt = document.createTextNode(arr[i]);
option.appendChild(txt);
option.setAttribute("value", arr[i]);
select.insertBefore(option, select.lastChild);
}
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
text-align: center;
}
<form>
<div class="center">
<label for="fname">Requestor-Name:</label>
<input type="text" id="Rname" name="Rname"><br><br>
<label for="lname">Namespace-Name:</label>
<input type="text" id="Nname" name="Nname"><br><br>
<label for="Pname">Project_ID:</label>
<select id="select">
<option value="default">default</option>
</select>
<br>
<br>
<input type="submit" value="Submit">
</div>
</form>
I think I would structure your whole code differently.
I'm not entirely sure what needs to be centered nor where you want the green border. But hopefully, with this new structure, you can move that around yourself.
var select = document.getElementById("select");
var arr = ["ai-apps-utils-prod", "daa-shared-gcr-prod-71bc", "da-dm-aidq-dev-607c", "da-dm-aidq-lz-dev-ec8c", "da-dm-aidq-lz-prod-ce88"];
for (var i = 0; i < arr.length; i++) {
var option = document.createElement("OPTION");
var txt = document.createTextNode(arr[i]);
option.appendChild(txt);
option.setAttribute("value", arr[i]);
select.insertBefore(option, select.lastChild);
}
.my-form {
margin: auto;
width: 60%;
}
input[type="text"], select {
box-sizing: border-box;
}
input[type="text"] {
display: block;
margin-bottom: 15px;
width: 250px;
padding: 10px;
border: 3px solid #73AD21;
}
select {
display: block;
margin-bottom: 15px;
width: 250px;
padding: 10px;
border: 3px solid #73AD21;
}
input[type="submit"] {
display: block;
margin-bottom: 15px;
width: 250px;
padding: 10px;
}
<form class="my-form">
<div class="form-entry-wrapper">
<label for="fname">Requestor-Name:</label>
<input type="text" id="Rname" name="Rname">
</div>
<div class="form-entry-wrapper">
<label for="lname">Namespace-Name:</label>
<input type="text" id="Nname" name="Nname" />
</div>
<div class="form-entry-wrapper">
<label for="Pname">Project_ID:</label>
<select id="select">
<option value="default">default</option>
</select>
</div>
<div class="form-entry-wrapper">
<input type="submit" value="Submit">
</div>
</form>
Here is a CodePen, with this answer: https://codepen.io/zethzeth/pen/XWeVXqG
You have to use "text-align:center"
<form style="text-align:center"></form>
Related
I have a simple page that consists of a form. There is a string for what the input box should be, and then the input box.
I want two different behaviors. When a cell phone is accessing the page, I want everything to be stacked on top of each other, but when the page is accessed via a computer I want multiple rows consisting of the the title, followed by the input box on the same row.
I've researched media queries by I still don't understand it enough to get through.
<html>
<head>
<style>
</style>
</head>
<body>
<form>
<center>
<div class="left">
First name:
</div>
<div class="right">
<input type="text" name="firstname"/>
</div>
<div class="left">
Last name:
</div>
<div class="right">
<input type="text" name="lastname"/>
</div>
<div class="left">
Email Address:
</div>
<div class="right">
<input type="text" name="email"/>
</div>
<div class="left">
Address:
</div>
<div class="right">
<input type="text" name="address"/>
</div>
<div class="left">
I've practiced yoga for at least one year:
</div>
<div class="right">
<input type="checkbox" name="oneyear"/>
</div>
<div class="right">
<input type="submit" name="submit" value="submit"/>
</div>
</center>
</form>
</body>
</html>
You have multiple choice: using Bootstrap to easily display your grid in different ways on window resize.
You can also use media queries, combine with a grid layout like Flexbox or Grid.
Or even use Jquery and the windworesize function.
Personnaly, i would choose Flexbox and the flex-direction propriety when the window reach the size of a smartphone or tablet.
To write a media querie, you just have to type something like #media screen and (max-width: 640px) for instance and write your rules inside the curly brackets.
Here is a sample code.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-size: 16px;
line-height: 22px;
font-family: Arial, Helvetica, sans-serif;
background-color: #f5f5f5;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.my-form {
width: 100%;
max-width: 920px;
margin: 0 auto;
padding: 20px;
}
.my-form .input {
width: 100%;
padding: 10px;
}
.my-form .input .left {
display: block;
width: 100%;
line-height: 24px;
padding: 3px 0;
margin-bottom: 5px;
}
.my-form .input .right {
width: 100%;
}
.my-form .input input[type='text'], .my-form .input input[type='email'], .my-form .input textarea {
display: block;
width: 100%;
height: 30px;
font-size: 16px;
padding: 3px;
line-height: 22px;
border: 1px solid rgba(0,0,0,.3);
}
.my-form .input textarea {
height: auto;
min-height: 60px;
resize: vertical;
}
.my-form .input input[type='submit'] {
display: block;
width: 100%;
padding: 15px;
background-color: navy;
color: #ffffff;
font-size: 16px;
line-height: 22px;
}
#media screen and (max-width: 1024px) {
.my-form .input:after {
content: "";
clear: both;
display: table;
}
.my-form .input .left {
float: left;
width: 35%;
padding-right: 10px;
margin-bottom: 0;
}
.my-form .input .right {
float: right;
width: 65%;
}
}
</style>
</head>
<body>
<form class="my-form">
<div class="input">
<label class="left" for="firstname">
First name:
</label>
<div class="right">
<input type="text" id="firstname" name="firstname" />
</div>
</div>
<div class="input">
<label class="left" for="lastname">
Last name:
</label>
<div class="right">
<input type="text" id="lastname" name="lastname" />
</div>
</div>
<div class="input">
<label class="left" for="email">
Email Address:
</label>
<div class="right">
<input type="email" id="email" name="email" />
</div>
</div>
<div class="input">
<label class="left" for="address">
Address:
</label>
<div class="right">
<textarea cols="10" rows="5" id="address" name="address"></textarea>
</div>
</div>
<div class="input">
<div class="left"></div>
<div class="right">
<label for="oneyear"><input type="checkbox" id="oneyear" name="oneyear" /> I've practiced yoga for at least one year:</label>
</div>
</div>
<div class="input">
<input type="submit" name="submit" value="submit" />
</div>
</form>
</body>
</html>
You need Media Query for this. Media query is basically writing different CSS for devices with different widths. You can learn more from here- https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Also check out this article- https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can also use jQuery for the same using matchmedia..
Here is a JSbin example for you- https://jsbin.com/kutacuzece/edit
(function($) {
/*
* We need to turn it into a function.
* To apply the changes both on document ready and when we resize the browser.
*/
function mediaSize() {
/* Set the matchMedia */
if (window.matchMedia('(min-width: 768px)').matches) {
/* Changes when we reach the min-width */
$('body').css('background', '#222');
$('strong').css('color', 'tomato');
} else {
/* Reset for CSS changes – Still need a better way to do this! */
$('body, strong').removeAttr('style');
}
};
/* Call the function */
mediaSize();
/* Attach the function to the resize event listener */
window.addEventListener('resize', mediaSize, false);
})(jQuery);
OR you can use something as simple as this-
if ($(window).width() < 960) {
$(selector).css({property:value, property:value, ...})
}
else if ($(window).width() < 768) {
$(selector).css({property:value, property:value, ...})
}
else {
$(selector).css({property:value, property:value, ...})
}
I have been trying to locate a way to filter out my expandable div's by the text content located within the div> label> and p>. I will place my example below. I have tried a few jquery examples from previous questions I found answered, but I cannot seem to make it work. The way I have the div's built, is to expand the p> content by clicking on the applicable label>. I would like to have a search box that would filter out div's that do not contain the text listed in the search box.
<html>
<head>
</head>
<body>
<style>
div {
position: relative;
}
input[type=checkbox] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
h3 {
font-size: large;
font-weight: 400;
color: #4a19ff;
margin: 20px 0 10px 0;
}
label {
cursor: pointer;
position: relative;
display: block;
padding-left: 20px;
font-family: 'Helvetica', 'Arial';
color: gray;
}
label:before {
display: none;
content: "";
position: absolute;
width: 0;
height: 0;
top: 40%;
left: 10px;
border-left: 8px solid black;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
margin-top: -8px;
}
input[type=checkbox]:checked ~ h2 label:before {
border-left: 8px solid transparent;
border-top: 8px solid black;
border-right: 8px solid transparent;
margin-left: -4px;
margin-top: -4px
}
input[type=checkbox]:checked ~ h3 ~ p {
max-height: 80%;
color: white;
}
</style>
<center>
<input type="text" id="example" placeholder="Search example..">
</center>
<div class="code">
<input type="checkbox" id="1">
<h3>
<label for="1">1 Expandables</label>
</h3>
<p class="content">
This is an example of the expandables.
</p>
</input>
</div>
<div class="code">
<input type="checkbox" id="2">
<h3>
<label for="2">2 Test</label>
</h3>
<p class="content">
Can I do this?
</p>
</input>
</div>
<div class="code">
<input type="checkbox" id="3">
<h3>
<label for="3">3 Apology</label>
</h3>
<p class="content">
I am a noob at this and apologize if this is a basic request.
</p>
</input>
</div>
</body>
</html>
This script will get the value from textfield with id and name = "search", and then will iterate through all the div elements in the document body, and if any of these div elements doesn't contain a string entered into a searchbox, it will set it's display style to "none".
If you want to remove the div from the document completely you can change the this.style.display="none" line to
document.body.removeChild(this).
<html><head>
<title>Title</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
<input type="text" name="search" id="search" value="">
<button type="button" name="btnSearch" onclick="btnSearchOnClick()">Search</button>
<script type="text/javascript">
function btnSearchOnClick(){
var searchTxt = document.getElementById("search").value; // get value from search input field
if(searchTxt != ""){ // if there is input in search field
$("div").each(function(){ // iterate through each div on page
var index = this.innerHTML.indexOf(searchTxt);
if(index == -1){
this.style.display = "none";
}
});
}
}
</script><div id="div0" style="display: none;">div0</div>
<div id="div1" style="display: none;">div1</div>
<div id="div2" style="display: none;">div2</div>
<div id="div3" style="display: none;">div3</div>
<div id="div4" style="display: none;">div4</div>
<div id="div5" style="display: none;">div5</div>
<div id="div6" style="display: none;">div6</div>
<div id="div7" style="display: none;">div7</div>
<div id="div8" style="display: none;">div8</div>
<div id="div9" style="display: none;">div9</div>
</body></html>
EDIT:
Here is the new code that you asked for.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
<input type="text" name="searchbox" id="searchbox" />
<div id="div0">div0</div>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div6">div6</div>
<div id="div7">div7</div>
<div id="div8">div8</div>
<div id="div9">div9</div>
<script type="text/javascript">
$("#searchbox").on("input", function(){
var searchboxText = $("#searchbox").val();
if(searchboxText != ""){
$("div").each(function(){
var divText = $(this).text();
var index = divText.indexOf(searchboxText);
if(index == -1){
$(this).css("display", "none");
}
else{
$(this).css("display", "block");
}
});
}
else{
$("div").each(function(){
$(this).css("display", "block");
});
}
});
</script>
</body>
</html>
I have a simple HTML form with some validations but the text labels get misplaced when the form appears.
This is the form before (PLEASE NOTE: The red square around it is not part of the form, I just placed it with Paint to help you see the problem quick):
And after:
Any hint to keep the label aligned with the text field please?
UPDATE:
This is the code:
<form name="senstageaddform">
<div class="form-element">
<label for="ed_senStartDate" class="text-label">
{{i18n "EDUCATION_SEN_START_DATE"}} <span class="required">*</span>
</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senStartDate" name="startDate"/>
</div>
<div class="form-element">
<label for="ed_senEndDate" class="text-label">{{i18n "EDUCATION_SEN_END_DATE"}}</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senEndDate" name="endDate"/>
</div>
</form>
Here is the CSS:
.form-element {
display: inline-block; margin: 5px; width: 98%; clear: both; vertical-align:top
.text-label {
width: 20%; text-align: right; display: inline-block; padding: 3px 5px 0px 1px;
}
.standard-text-field {
width: 10em;
}
I know this is basic, I've lost hours on this, read posts, books, etc and it doesn't matter: I just don't understand how CSS works...
I want to have field 2) below field 1) in the following form:
<label>1) Select date</label>
<p>
<select name="data" id="data" form="configs">
<option value="custom">Custom</option>
<option value="thismonth">This Month</option>
<option value="lastmonth">Last Month</option>
<option value="ytd">Year to Date</option>
</select>
</p>
<div id="frombox">
<label for="from">From</label>
<br \>
<input type="text" class="box" name="from">
</div>
<div id="tobox">
<label for="to">To</label>
<br \>
<input type="text" class="box" name="to">
</div>
<label>2) Select fields to import</label>
<p>
<input type="text " name="datepicker " id="datepicker " required/>
</p>
With the CSS:
#frombox {
float:left;
margin-left: 5px;
width: 150px;
}
#tobox {
float:left;
margin-left: 5px;
width: 150px;
}
.box {
width: 100px;
}
You may see a live example here
try this
http://jsfiddle.net/isqware/y3mf4q2j/
#frombox {
float:left;
margin-left: 5px;
width: 150px;
}
#tobox {
float:left;
margin-left: 5px;
width: 150px;
clear:both;
}
.box {
width: 100px;
}
label {
clear: both;
display: block;
}
I have a basic css question. I'm trying to add css to my form, the code is below:
<div id="content">
<form id="form1" method="post" action="">
<p>
<label for="name" class="title">Your name:</label>
<input name="name" type="text" class="widebox" id="name">
</p>
<p>
Colour: <select name="colour_pref" size "1">
<option value="1">Pink</option>
<option value="2">Blue</option>
<option value="3">White</option></select>
</p>
<p class="submit">
<input type="submit" name="add" value="add_colour" id="add">
</p>
</form>
</div>
and this is the css:
#content p {
border-bottom: 1px solid #efefef;
margin: 10px;
padding-bottom: 10px;
width: 260px;}
.title {
float: left;
width: 100px;
text-align: right;
padding-right: 10px;}
.submit {
text-align: right;}
The problem is the select element is not aligned with the name field, I tried to add class="title" to it but it made it even messier.
Would really appreciate if you could help me align this select element VERTICALLY with the text field. thanks
Something like this DEMO http://jsfiddle.net/kevinPHPkevin/XzHG2/1/
.submit input {
margin-left:110px;
}
Just add display inline to your pararaph:
p {
display: inline;
}
Demo