This is the html code that I am running
.table-header {
display: flex;
width: 100%;
}
<div class="table-header">
<div>
<h3>Balance Forwarded: <span style="text-decoration: underline;"><?php echo $total_Fwd; ?></span></h3>
<h3>Total Unpaid Balance: <span style="text-decoration: underline;"><?php echo $total_bal; ?></span></h3>
<h3>Total Interest Charged: <span style="text-decoration: underline;"><?php echo $total_Int; ?></span></h3>
</div>
<div>
<form id="send" action="file.php" target="_blank" method="post">
<input type="hidden" id="query" name=q uery value="<?php echo $sql; ?>">
<input type="hidden" id="total_fwd" name=t otal_fwd value="<?php echo $total_Fwd; ?>">
<input type="hidden" id="total_bal" name=t otal_bal value="<?php echo $total_bal; ?>">
<input type="hidden" id="total_int" name=t otal_int value="<?php echo $total_Int; ?>">
<button type="submit" class="btn btn-dark">Print</button>
</form>
</div>
</div>
However, it does not align the two child divs and looks like this as of the moment:
I want those two to be side by side using flex, thank you
Use align-items: center; you can also use gap to space them.
.table-header {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
gap: 1rem;
}
<div class="table-header">
<div>
<h3>Balance Forwarded: <span style="text-decoration: underline;"><?php echo $total_Fwd; ?></span></h3>
<h3>Total Unpaid Balance: <span style="text-decoration: underline;"><?php echo $total_bal; ?></span></h3>
<h3>Total Interest Charged: <span style="text-decoration: underline;"><?php echo $total_Int; ?></span></h3>
</div>
<div>
<form id="send" action="file.php" target="_blank" method="post">
<input type="hidden" id="query" name=q uery value="<?php echo $sql; ?>">
<input type="hidden" id="total_fwd" name=t otal_fwd value="<?php echo $total_Fwd; ?>">
<input type="hidden" id="total_bal" name=t otal_bal value="<?php echo $total_bal; ?>">
<input type="hidden" id="total_int" name=t otal_int value="<?php echo $total_Int; ?>">
<button type="submit" class="btn btn-dark">Print</button>
</form>
</div>
</div>
.table-header {
display: flex;
justify-content: 'space-between';
}
Related
How can i change the color of the input box in red if there's an error when i hit the SUBMIT button?
<form method="post" action="" ">
<h3>Add users</h3>
<div class="form-group <?php echo (!empty($error_user) || ($error_taken)) ? 'has-error' : ''; ?>">
<strong>Username: *</strong>
<input type="text" name="username" value="<?php echo $username; ?>" />
<span class="error"><?php echo $error_user; ?></span><br/>
<span class="error"><?php echo $error_taken; ?></span><br/>
</div>
<div class="form-group <?php echo (!empty($error_name)) ? 'has-error' : ''; ?>">
<strong>Name: *</strong>
<input type="text" name="name" value="<?php echo $name; ?>" />
<span class="error"><?php echo $error_name; ?></span> <br/>
</div>
<div class="form-group <?php echo (!empty($error_pass)) ? 'has-error' : ''; ?>">
<strong>Password: *</strong>
<input type="text" name="password" value="<?php echo $password; ?>" />
<span class="error"><?php echo $error_pass; ?></span> <br/>
</div>
<input type="submit" name="submit" value="Add">
</form>
You can use simple CSS
.form-group.has-error input {
border: 1px solid red;
}
You can handle that with javascript or jquery sending POST request with ajax
and before that you can create error handling function
You have two different CSS options.
First use:
.has-error input{
border: 1px solid red;
}
.has-error .error{
color:red;
}
Second:
.has-error>input{
border: 1px solid red;
}
.has-error>.error{
color:red;
}
just apply any of the CSS and you will be fine. The second one will find input and class error just into the class has-error. If there will be another <div> covering them then it will not work.
If you want to live check for errors and display it and change colors etc then you have to use AJAX
I have a page that displays some info about a project in a "container", within that container there are some different fields along with 2 buttons that access different pages. I am having an issue getting the buttons to line up horizontally, how can I get this done? I am thinking it has something to do with the way the forms are rendered, is there a better way than forms? can you style forms with css doing like
display: inline
This is the first time I have messed around with HTML, here is my code thanks:
<div class="project-container">
<label class="boldLabel">Project ID:</label>
<span><?php echo $pId; ?></span><br>
<label class="boldLabel">Project Owner:</label>
<span><?php echo $pName; ?></span><br>
<label class="boldLabel">Project Description:</label>
<span><?php echo $pDesc; ?> </span><br><br>
<label class="boldLabel">Project Due Date:</label>
<span><?php echo $dDate; ?> </span><br>
<form action="delete.php" method="GET">
<input type="hidden" name="pId" value="<?php echo $pId; ?>">
<button class="buttonDelete" type="submit" name="delete">Delete Project</button>
</form>
<form action="update.php" method="GET">
<input type="hidden" name="pId" value="<?php echo $pId; ?>">
<input type="hidden" name="pName" value="<?php echo $pName; ?>">
<input type="hidden" name="pDesc" value="<?php echo $pDesc; ?>">
<input type="hidden" name="dDate" value="<?php echo $dDate; ?>">
<button class="buttonUpdate" type="submit" name="update">Update Project</button>
</form>
</div>
</div>
You don't need any 2 forms on your file. You just need 1 general form tag that handles both process (delete and update). These process can be managed throught Javascript functions and events.
Note: The problem about the 2 buttons not being aligned horizontally is because you have certain elements on different form tags. You could do some extra work with css but having 2 forms in one file is normally avoided by developers unless this could be the only way to a certain process.
I fixed the code. You can see the snippet working here:
function buttoncheck(action)
{
//$("project-container").load("process.php", {action: action});
// This is an example of how you could "call" process.php
}
<form action="process.php" method="post">
<div id="project-container" class="project-container">
<label class="boldLabel">Project ID:</label>
<span><?php echo $pId; ?></span><br>
<label class="boldLabel">Project Owner:</label>
<span><?php echo $pName; ?></span><br>
<label class="boldLabel">Project Description:</label>
<span><?php echo $pDesc; ?> </span><br><br>
<label class="boldLabel">Project Due Date:</label>
<span><?php echo $dDate; ?> </span><br>
<input type="hidden" name="pId" value="<?php echo $pId; ?>">
<input type="hidden" name="pId" value="<?php echo $pId; ?>">
<input type="hidden" name="pName" value="<?php echo $pName; ?>">
<input type="hidden" name="pDesc" value="<?php echo $pDesc; ?>">
<input type="hidden" name="dDate" value="<?php echo $dDate; ?>">
<button class="buttonDelete" type="button" name="delete" onClick="buttoncheck(0)">Delete Project</button>
<button class="buttonUpdate" type="button" name="update" onClick="buttoncheck(1)">Update Project</button>
</div>
</form>
And in the "process.php" file
<?php
$action=$_POST['action'];
// To Update
if($action=1){
// update code here
}
if($action=0){
// delete code here
}
You can check how to refresh div content, onclick function, css manage in this links:
Load jquery method
Load Jquery method 2
onclick function
button css design process
Am creating a login form on a website whereby am having trouble creating an alert box at the top of the form that should display error messages after server-side validation and sanitization of the user input.The problem is that when the page loads, it displays the alert-box, while I want it to display only when displaying error messages. Please assist?
HTML PART
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="form">
<span class="info">
<?php
echo
$fNameErr;
$lNameErr;
$emailErr;
?>
</span>
<br>
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<h1>Sign Up for Free</h1>
<form action="signup.php" method="post" autocomplete="off">
<div class="top-row">
<div class="field-wrap">
<label>
<span class="req"></span>
</label>
<input placeholder="Firstname*" type="text" value="<?php echo $firstname;?>" required autocomplete="off" name='firstname' />
</div>
<div class="field-wrap">
<label>
<span class="req"></span>
</label>
<input placeholder="LastName*" type="text" value="<?php echo $lastname;?>" required autocomplete="off" name='lastname' />
</div>
</div>
<div class="field-wrap">
<label>
<span class="req"></span>
</label>
<input placeholder="Email Address*" type="email" value="<?php echo $email;?>" required autocomplete="off" name='email' />
</div>
<div class="field-wrap">
<label>
<span class="req"></span>
</label>
<input placeholder="Set A Password*" type="password"required autocomplete="off" name='password'/>
</div>
<button type="submit" class="button button-block" name="register">Register</button>
</form>
</div> <!-- /form -->
</div>
</body>
</html>
style.css page
.info {
color: pink;
display: block;
text-align: center;
padding: 5px;
margin-top: -20px;
margin-bottom: 15px;
border: 1px solid red;
background: #66131c;
}
<span class="info">
<?php
echo
$fNameErr;
$lNameErr;
$emailErr;
?>
</span>
try changing this to the below. let me know how it goes
<?php
if(isset($fnameErr) || isset($lNameErr) || isset($emailErr)){
echo "<span class='info'>";
echo $fNameErr . $lNameErr . $emailErr;
echo "</span>"
}
?>
I assume that you'd only want this to display when those variables have some kind of value and they would otherwise be blank. It would be pretty easy to only output this HTML element when that is the case. Perhaps something like this:
<?php if(isset($fnameErr) || isset($lNameErr) || isset($emailErr)){
echo
"<span class='info'>"
$fNameErr;
$lNameErr;
$emailErr;
"</span>";
} ?>
<?php
if(isset($fnameErr) || isset($lNameErr) || isset($emailErr)){
echo '<span class="info">';
echo $fNameErr;
echo $lNameErr;
echo $emailErr;
echo '</span>';
}
?>
try this. If it does not work , show us your php code too
We have form page like this:
We wanted to make design like this:
Means:
Name & email and their text field should display as like above image.
Message & its box should display like comment section.
Same result need for Name & email present below.
Need space between 2 button present in bottom.
css
media only screen and (min-width: 1224px)
.send-friend h2 {
text-align: center;
}
#media only screen and (min-width: 1224px)
form .legend {
border: none;
color: #000;
font-family: 'Roboto Condensed', sans-serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
line-height: 1.4;
margin: 0 0 15px;
padding-bottom: 7px;
text-rendering: optimizespeed;
text-transform: uppercase;
}
}
html
<div class="send-friend">
<?php
echo $this->getMessagesBlock()->toHtml();
?>
<div class="page-title">
<h1><?php
echo $this->__('Email to a Friend');
?></h1>
</div>
<form action="<?php
echo $this->getSendUrl();
?>" method="post" id="product_sendtofriend_form">
<div class="fieldset">
<?php
echo $this->getBlockHtml('formkey');
?>
<h2 class="legend"><?php
echo $this->__('Sender Details');
?></h2>
<ul class="form-list" id="sender_options">
<li class="fields">
<div class="field">
<label for="sender_name" class="required"><em>*</em><?php
echo $this->__('Name:');
?></label>
<div class="input-box">
<input name="sender[name]" value="<?php
echo $this->escapeHtml($this->getUserName());
?>" title="<?php
echo $this->quoteEscape($this->__('Name'));
?>" id="sender_name" type="text" class="input-text required-entry" />
</div>
</div>
<div class="field">
<label for="sender_email" class="required"><em>*</em><?php
echo $this->__('Email:');
?></label>
<div class="input-box">
<input name="sender[email]" value="<?php
echo $this->escapeHtml($this->getEmail());
?>" title="<?php
echo $this->quoteEscape($this->__('Email Address'));
?>" id="sender_email" type="email" autocapitalize="off" autocorrect="off" spellcheck="false" class="input-text required-entry validate-email" />
</div>
</div>
</li>
<li class="wide">
<label for="sender_message" class="required"><em>*</em><?php
echo $this->__('Message:');
?></label>
<div class="input-box">
<textarea name="sender[message]" class="input-text required-entry" id="sender_message" cols="3" rows="3"><?php
echo $this->escapeHtml($this->getMessage());
?></textarea>
</div>
</li>
</ul>
</div>
<div class="fieldset">
<h2 class="legend"><?php
echo $this->__('Recipient Details');
?></h2>
<ul class="form-list" id="recipients_options">
<li class="fields">
<div class="field">
<label for="recipients_name" class="required"><em>*</em><?php
echo $this->__('Name:');
?></label>
<div class="input-box">
<input name="recipients[name][]" type="text" class="input-text required-entry" id="recipients_name" />
</div>
</div>
<div class="field">
<label for="recipients_email" class="required"><em>*</em><?php
echo $this->__('Email Address:');
?></label>
<div class="input-box">
<input name="recipients[email][]" value="" title="<?php
echo $this->quoteEscape($this->__('Email Address'));
?>" id="recipients_email" type="email" autocapitalize="off" autocorrect="off" spellcheck="false" class="input-text required-entry validate-email" />
</div>
</div>
</li>
</ul>
</div>
<div class="buttons-set">
<p class="back-link"><a href="#" onclick="history.back(); return false;"><small>« </small><?php
echo $this->__('Back');
?></a></p>
<button type="submit" class="button<?php
if (!$this->canSend()):
?> disabled<?php
endif;
?>"<?php
if (!$this->canSend()):
?> disabled="disabled"<?php
endif;
?>><span><span><?php
echo $this->__('Send Email');
?></span></span></button>
<div id="max_recipient_message" style="display:none;">
<?php
if ($this->getMaxRecipients()):
?>
<p class="limit"><?php
echo $this->__('Maximum %d email addresses allowed.', $this->getMaxRecipients());
?></p>
<?php
endif;
?>
</div>
<?php
if (1 < $this->getMaxRecipients()):
?>
<p id="add_recipient_button">
<button type="button" onclick="add_recipient();" class="button"><span><span><?php
echo $this->__('Add Recipient');
?></span></span></button>
</p>
<?php
endif;
?>
</form>
</div>
Maybe you could try to put the form in a <div> and then increase the width of the input boxes.
Do put padding to leave some white space for aesthetic purpose :)
Example <input type="text" id="text" name="text_name" style="width: 300px;" />
(if you are not considering responsiveness)
I would prefer if you use .text{max-width:110%;}
Since you are new to CSS, the previous CSS shown can be used for multiple ids by putting a comma and the respective tags you would like the following css to apply.
Then for the words indicating which textbox is what, you could use a text-align:left
You can use bootstrap class text-center to set alignment in center position.
Following is my CSS code :
.registerFormContainer{width: 45%;border: 1px solid #2C5887; border-radius: 5px; text-align: center; margin: 0 auto; height: auto;}
.registerFormContainer h3{padding: 10px; background: #2C5887; border-top-radius: 5px; width: auto;}
.registerFormContainer h3 label{color: #fff; font-size: 18px; font-weight: bold;}
Here if I am using the height:auto; then its not displaying the border for .registerFormContainer and .registerFormContainer h3. And if I am using manual height like 300px then its showing the border. But if I am using manual height then the div is not expading after validation error. What should be the issue? I am learning CSS and not have much idea about it.
and Following is my html
<div class="registerFormContainer">
<h3><label style="background-image:url( '/images/lock.png'); width: auto; background-repeat:no-repeat; background-position:left center;"> Create an Account</label></h3>
<div class="row_2">
<center><?php echo $this->msg; ?></center>
<label class="label2"> </label>
<?php if ($this->displayimage) { ?>
<img src="<?php echo $this->displayimage; ?>"></img>
<?php } ?>
</div>
<div class="row_2">
<label class="label2"> </label>
<b>Welcome, <?php if (isset($this->displayname)) echo $this->displayname; ?></b>
</div>
<div class="row_2">
<label class="label_2" for="username">Email:</label>
<?php if (isset($this->fbid)) { ?>
<input class="required" id="username" name="username" type="hidden" value="<?php echo $this->email; ?>"/>
<?php echo $this->email; ?>
<?php } else { ?>
<input class="required" id="username" name="username" type="text"/>
<?php } ?>
</div>
<div class="row_2">
<label for="password" class="label_2">Password:</label>
<input class="required" id="rpassword" name="password" type="password"/>
</div>
<div class="row_2" >
<label for="cpassword" class="label_2">Confirm Password:</label>
<input class="required" id="cpassword" name="cpassword" type="password"/>
</div>
<div class="row_2">
<label class="label_2"> </label>
<input type="submit" class="submit" value="Submit" name="submit" id="submit">
</div>
</div>
Any help would be appreciated.
Please try overflow-y:auto for class registerFormContainer I hope it will be work for you.
thanks