I am using the following code to generate a card for some items. The button on the bottom of the card needs to be aligned to the bottom of the card, for doing this I am using the following:
return '
<div class="col">
<div class="card detailpage-related-items" style="width: 100%;">
<div class="card-body d-flex flex-column p-4 card-detailpage" style="width: 100%;"><img class="d-flex recommended-products-thumbnail" src="https://iproject1.ip.aimsites.nl/pics/' . $afbeelding . '">
<h4 class="card-title">' . $voorwerpnaam . '</h4>
<h5 class="card-title"><strong>€' . $prijs . '</strong></h5>
<p>Loopt tot: ' . $eindtijd . '</p>
<div class="text-center">
<form action="/detail.php" method="get">
<input type="hidden" name="veiling" id="veiling" value="' . $voorwerpnummer . '">
<input type="submit" class="bid-button mt-auto" value="Bieden">
</form>
</div>
</div>
</div>
</div>
';
d-flex and flex-column on the card-body,
mt-auto on the button and
text-center in an enclosing <div> around the form for the buttons.
However the output is as below:
Create 2 divs with buttons by combining images and titles within the card body into a single div. Then add the h-100 and justify-content-between classes to the div containing the card-body class. I think this will solve your problem.
<div class="col">
<div class="card detailpage-related-items" style="width: 100%;">
<div class="card-body d-flex h-100 justify-content-between flex-column p-4 card-detailpage" style="width: 100%;"><img class="d-flex recommended-products-thumbnail" src="https://iproject1.ip.aimsites.nl/pics/' . $afbeelding . '">
<div>
<h4 class="card-title">' . $voorwerpnaam . '</h4>
<h5 class="card-title"><strong>€' . $prijs . '</strong></h5>
<p>Loopt tot: ' . $eindtijd . '</p>
</div>
<div class="text-center">
<form action="/detail.php" method="get">
<input type="hidden" name="veiling" id="veiling" value="' . $voorwerpnummer . '">
<input type="submit" class="bid-button mt-auto" value="Bieden">
</form>
</div>
</div>
</div>
</div>
Related
Good day, I have a bit of code in the theme header.php file that checks to see if there is a post login cookie(wp-postpass_) and hides the header (navigation/menu) if there is no cookie(wp-postpass_). The issue is that when entering a wrong password the cookie is still generated and I have no idea why. As far as I know the code I am using is looking for a valid cookie(wp-postpass_).
Header code:
<!-- Check wp-postpass_ cookie and hide menu if user is not logged in -->
<?php
$cookie = $_COOKIE['wp-postpass_' . COOKIEHASH];
if (!isset( $cookie )) {
?> <style type="text/css">#header {display:none !important;}</style> <?php
}
?>
The only other edit I did was to the post-template.php to change the look of the form with HTML:
function get_the_password_form( $post = 0 ) {
$post = get_post( $post );
$label = 'pwbox-' . ( empty( $post->ID ) ? rand() : $post->ID );
$output = '
<div class="page-login-content">
<div class="wpb_row vc_row-fluid full-width-section section section-no-parallax stretch" data-speed="1">
<div class="col span_12 color-dark left">
<div class="vc_col-sm-12 wpb_column column_container col no-padding color-dark">
<div class="wpb_wrapper">
<div class="single_image wpb_content_element align-left" data-animation="none" data-delay="0">
<img width="2560" height="670" src="https://myzoladexjourney.co.za/wp-content/uploads/2021/11/esihle-banner-contact-2800-scaled.jpg" class="attachment-full" alt="esihle-banner-contact-2800" loading="lazy" srcset="
https://myzoladexjourney.co.za/wp-content/uploads/2021/11/esihle-banner-contact-2800-scaled.jpg 2560w,
https://myzoladexjourney.co.za/wp-content/uploads/2021/11/esihle-banner-contact-2800-300x79.jpg 300w,
https://myzoladexjourney.co.za/wp-content/uploads/2021/11/esihle-banner-contact-2800-1024x268.jpg 1024w,
https://myzoladexjourney.co.za/wp-content/uploads/2021/11/esihle-banner-contact-2800-768x201.jpg 768w,
https://myzoladexjourney.co.za/wp-content/uploads/2021/11/esihle-banner-contact-2800-1536x402.jpg 1536w,
https://myzoladexjourney.co.za/wp-content/uploads/2021/11/esihle-banner-contact-2800-2048x536.jpg 2048w
"
sizes="(max-width: 2560px) 100vw, 2560px"
/>
</div>
</div>
</div>
</div>
</div>
<div class="spacer" style="height: 80px"></div>
<div class=" wpb_row vc_row-fluid standard-section section section-no-parallax stretch" data-speed="1">
<div class="col span_12 color-dark left">
<div class=" vc_col-sm-12 wpb_column column_container col no-padding color-dark">
<div class="wpb_wrapper">
<div class="wpb_text_column wpb_content_element mb-0">
<div class="wpb_wrapper">
<h1 class="txt-white uppercase" style="text-align: center">
<span class="txt-extralight letter-space-7">Welcome</span>
</h1>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<h4 class="uppercase txt-white txt-extralight letter-space-4" style="text-align: center">
To the <strong>ZOLADEX</strong><sup class="h4-sup">®</sup> patient website
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="spacer" style="height: 40px"></div>
<div class="wpb_row vc_row-fluid standard-section section section-no-parallax stretch" data-speed="1">
<div class="col span_12 color-dark left">
<div
class="vc_col-sm-12 wpb_column column_container col no-padding color-dark">
<div class="wpb_wrapper">
<form action="' . esc_url( site_url( 'wp-login.php?action=postpass', 'login_post' ) ) . '" class="post-password-form d-flex flex-column align-items-center txt-center" method="post">
<p class="txt-center txt-white txt-light">' . __( 'This website is password protected,<br> please enter your password here:' ) . '</p>
<p><label for="' . $label . '">' . __( '' ) . ' <input name="post_password" id="' . $label . '" type="password" size="20" /></label> <input class="login-submit" type="submit" name="Submit" value="' . esc_attr_x( 'Enter', 'post password form' ) . '" /></p></form>
</div>
</div>
</div>
</div>
<div class="spacer" style="height: 80px"></div>
</div>
';
Could I potentially stop the code from creating a cookie on failed login or verify the integrity of the cookie itself within the header?
Thank you in advance.
I fixed the issue by adding the css rule to the if-statement in post-template.php
// If post password required and it doesn't match the cookie.
if ( post_password_required( $_post ) ) {
?> <style type="text/css">#header {display:none !important;}</style> <?php
return get_the_password_form( $_post );
}
Im working on a article:
I want 3 in one row. I know how to do it with stype, but i dont know how to do it with style.php.
enter image description here
This is only the part of code but I need to properly implement grid:
echo '<div class="container">';
echo '<div class="row padding">';
echo '<div class="col-md-4 col-sm-12">';
echo '<div class="card">';
echo '<img src="' . UPLPATH . $row['slika'] . '"';
echo '<div class="card-body">';
echo '<h6 class="card-title">';
echo '«';
echo $row['naslov'];
//style.php
<?php
header('content-type:text/css');
$grid='grid';
?>
.container {
display: <?=$grid?>;
}
Well, you are dealing the problem really improperly.
I don't really get why you need to use a variable named $grid while you can directly pass the grid attribute to your .container.
You don't have do complicate it like this.
What I would do in your case would be the next thing:
I would create a class named .grid like:
.grid {
display: grid !important;
}
As for the rest I would put it like this:
Please provide more info as regards how you extract out the $row variable data.
The layout per se, would have to be like this in order for you to have 3 cards in a row. Hope that helps you. Cheers
<div class="container grid">
<div class="row padding">
<div class="col-md-12 col-sm-12">
<div class="col-md-4 col-sm-4">
<div class="card">
<img src="<?= '"'. UPLPATH . $row['slika'] . '"' alt="whatever
you need" />
<div class="card-body">
<h6 class="card-title">
<?php echo '«' . " ". $row['naslov']; ?>
</h6>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="card">
<img src="<?= '"'. UPLPATH . $row['slika'] . '"' alt="whatever
you need" />
<div class="card-body">
<h6 class="card-title">
<?php echo '«' . " ". $row['naslov']; ?>
</h6>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="card">
<img src="<?= '"'. UPLPATH . $row['slika'] . '"' alt="whatever
you need" />
<div class="card-body">
<h6 class="card-title">
<?php echo '«' . " ". $row['naslov']; ?>
</h6>
</div>
</div>
</div>
</div>
</div>
i am making a test portal with php and vue.js ,my radio button is not working properly,when i select the first question and goes with second question ,my first radio button is delselect.
1.Here active_question is array which contaion my current question .
2.{{ active_question.ch1 }} , {{ active_question.ch2 }},{{ active_question.ch3 }} ,{{ active_question.ch4 }} is my options.
3.when i click to save&next button my second question is show ,if i select second question answer ,my firsr radio button was deselect.
<div class="row tab-content container-fluid tab-pane active" id="section1">
<div class="col s6 m6 l6 ">
<div class="row">
<div class="card col s12 " style="background-color: #3e51b5;color: white;width: 600px;height:50px; margin-left:20px;margin-right: 20px;font-size:20px;">
<center> <p>
<b> Question: {{active_question.index}}</b>
</p></center>
</div>
</div>
<br>
<div class="row">
<div class="card col s12 " style="background-color: #EAEAEA;width: 600px;height:300px; margin-left:20px;margin-right: 20px;font-size:20px; ">
<center> <p>
<b> <?php
echo nl2br("{{ active_question.question }}");
?></b>
</p></center>
</div>
</div>
</div>
<div class="col s12 m6 l6 ">
<div class="row">
<div class="card col s12 m12 l12" style="background-color: #3e51b5;color: white;height:50px; margin-left:20px;margin-right: 20px;font-size:20px;">
<center> <p >
<b> Options</b>
</p></center>
</div>
</div>
<br>
<div>
<form>
<div class="row " >
<div class="card col s12 m12 l12" style="background-color: #EAEAEA;overflow-x: auto;width: 400px;height:100px; margin-left:20px;margin-right: 20px;font-size:20px; ">
<div>
<button class="button" id="qusbtn">A</button>
<input type="radio" v-model='userResponses' v-bind:id="'userSelect_'+active_question.index" v-bind:name="'userSelect_'+active_question.index" v-bind:value="{ques_id: active_question.ques_id, selectanswer: active_question.ch1}">
<label for="options1" ><div style="text-align: justify;">{{ active_question.ch1 }}</div></label>
</div>
</div>
</div>
<br>
<div class="row ">
<div class="card col s12 m12 l12" style="background-color: #EAEAEA;width: 400px;height:100px; margin-left:20px;margin-right: 20px;font-size:20px; ">
<div>
<button class="button " id="qusbtn">B</button>
<input type="radio" v-model='userResponses' v-bind:id="'userSelect_'+active_question.index" v-bind:name="'userSelect_'+active_question.index" v-bind:value="{ques_id: active_question.ques_id, selectanswer: active_question.ch2}">
<label for="options2" >{{ active_question.ch2 }}</label>
</div>
</div>
</div>
<br>
<div class="row " >
<div class="card col s12 m12 l12" style="background-color: #EAEAEA;width: 400px;height:100px; margin-left:20px;margin-right: 20px;font-size:20px; ">
<div>
<button class="button " id="qusbtn">C</button>
<input type="radio" v-model='userResponses' v-bind:id="'userSelect_'+active_question.index" v-bind:name="'userSelect_'+active_question.index" v-bind:value="{ques_id: active_question.ques_id, selectanswer: active_question.ch3}">
<label for="options3" >{{ active_question.ch3 }}</label>
</div>
</div>
</div>
<br>
<div class="row ">
<div class="card col s12 m12 l12" style="background-color: #EAEAEA;width: 400px;height:100px; margin-left:20px;margin-right: 20px;font-size:20px; ">
<div>
<button class="button " id="qusbtn">D</button>
<input type="radio" v-model='userResponses' v-bind:id="'userSelect_'+active_question.index" v-bind:name="'userSelect_'+active_question.index" v-bind:value="{ques_id: active_question.ques_id, selectanswer: active_question.ch4}">
<label for="options4" >{{ active_question.ch4 }}</label>
</div>
</div>
</div>
<label class="btn btn-info active">
<input checked type="radio" v-model='userResponses' v-bind:id="'userSelect_'+active_question.index" v-bind:name="'userSelect_'+active_question.index" >
</label>
</form>
</div>
</div>
</div>
In my site there is a page where is shown the content of my database (the list of all the locals). I would like to let the user filter the research, so I would like that my query that show the resoults can be modified by checkboxes. If a user select Vegan in the checkbox, the page must show only vegan locals. I don't have a form for the checkboxes so I don't know hot to handle the input.
I have two scripts: locals_page.php that is the main page with the filter boxes and table_generator.php that is a php script that do the query and retrieve the data, and show them into locals_page.php
I searched a lot to resolve this but I don't know how to start because I don't have a simple table for the resoults or a common form.
Maybe it's a generic question, but an help will be appreciated.
locals_page
<body>
<div class="container">
<div class="row">
<!--FILTERS PART-->
<div class="col-sm-3 col-md-3">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close">
</span>Kitchen type</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<table class="table">
<tr>
<td>
<input type="checkbox" name="Kebab" value="Kebab"> Kebab
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Asiatic" value="Asiatic"> Asiatic
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Vegan" value="Vegan"> Vegan
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th">
</span>Local Type</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<input type="checkbox" name="Restaurant" value="Restaurant"> Restaurant
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Pub" value="Pub"> Pub
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!--END FILTERS PART-->
<div class="col-sm-9 col-md-9">
<!--SCRIPT THAT GENERATE MY PAGE-->
<?php require_once('php\table_generator.php'); ?>
</div>
</div>
</div>
</body>
table_generator
<?php
echo '<section class="col-xs-12 col-sm-6 col-md-12">';
$sql = "SELECT nome_L, tipocucina_TC, wifi_L, tipolocale_TL, descrizione_L, indirizzo_L, fasciaprezzo_L, convenzione_L FROM locale l
JOIN tipocucina c On l.TipoCucina_L = c.IDtipocucina_TC
JOIN tipolocale t On l.TipoLocale_L = t.IDTipolocale_TL";
$result = mysqli_query($conn, $sql) or die(mysqli_error($conn));
while ($row = mysqli_fetch_array($result)) {
$nome_Local = $row['nome_L'];
$descrizione_Local = $row['descrizione_L'];
$indirizzo_Local = $row['indirizzo_L'];
$tipocucina_Local = $row['tipocucina_TC'];
$tipolocale_Local = $row['tipolocale_TL'];
$wifi_Local = $row['wifi_L'];
$prezzo_Local = $row['fasciaprezzo_L'];
//Inizio article
echo '<article class="search-result row">
<div class="col-xs-12 col-sm-12 col-md-3">
<a class="thumbnail"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Piadina.jpg/1200px-Piadina.jpg" alt="Lorem ipsum" /></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-2" style="width: 18%;">
<ul class="meta-search">
<li><i class="fa fa-cutlery fa-lg"></i> <span>' . $tipocucina_Local . '</span></li>
<li><i class="fa fa-coffee fa-lg"></i> <span>' . $tipolocale_Local . '</span></li>
<li><i class="fa fa-coffee fa-lg"></i> <span>' . $wifi_Local . '</span></li>
<li><i class="fa fa-coffee fa-lg"></i> <span>' . $prezzo_Local . '</span></li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-7 excerpet" style="width: 55%;">';
echo "<h3><a>" . $nome_Local . "</a></h3>";
echo '<i class="fa fa-compass"> </i>' . $indirizzo_Local . '</i>';
echo "<br>";
echo '<p class="local-description">' . $descrizione_Local . '</p>';
echo '
</div>
<span class="clearfix borda"></span>
</article>'; //Fine article
}
$conn->close();
echo "</section>";
?>
I don't know if javascript or ajax or jquery is needed. I don't ever know how to start. I hope my problem is understandable and that the code I put is helpful. Thank you so much in advice.
I am using a table to retrieve all the data from the database and an array of view button on each table row. If the view button is clicked, a modal will appear displaying all the information of the particular row.
The problem is that the only id read is the last id. Giving the same view results for each table row.
I have this line of code in the view button:
< button class="btn btn-info" data-toggle="modal" data-target="#myModal-viewaccountinfo">View< / button>
While my modal code is this:
<div class="modal fade" id="myModal-viewaccountinfo" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title"><center>USER ACCOUNT INFORMATION</center></h3>
</div>
<div class="modal-body">
<form method="post" action="">
<br>
<?php
$id = $_GET['txtid'];
include ("connect.php");
$i ="select * from usersvis where userid=".$id;
$h= mysql_query($i);
if($tr=mysql_fetch_array($h))
{
?>
<div class="row">
<div class="col-lg-4">
Name:
</div>
<div class="col-lg-6">
<label type="text"><?php echo $tr[3] . ' ' . $tr['4'] . ' ' . $tr['2']; ?></label>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-4">
Username:
</div>
<div class="col-lg-6">
<label type="text"><?php echo $tr[5]; ?></label>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-4">
Password:
</div>
<div class="col-lg-6">
<label type="text"><?php echo $tr[6]; ?></label>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-4">
Gender:
</div>
<div class="col-lg-6">
<label type="text"><?php echo $tr[7]; ?></label>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-4">
Birthdate:
</div>
<div class="col-lg-6">
<label type="text"><?php echo $tr[8] . '-' . $tr['9'] . '-' . $tr['10']; ?></label>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-4">
Address:
</div>
<div class="col-lg-6">
<label type="text"><?php echo $tr[11]; ?></label>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-4">
Status:
</div>
<div class="col-lg-6">
<label type="text"><?php echo $tr[12]; ?></label>
</div>
</div>
<br>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>