I have two forms in html and i want to align their buttons next to each other. Unfortunately I've tried to merge them but then they don't work properly. Is their any way to that i can achieve that if possible without css?
Below is my code:
<form action="lorhs.php" method="GET" name="FormPage">
<button type="submit" id="backwards" <?php echo ($page == 1) ? "disabled" : ""; ?> style="float: left;" value="<?php echo $page-1; ?>" name="page">Prev</button>
<button type="submit" id="forward" <?php echo ($page == ceil($row['0']/25)) ? "disabled" : ""; ?> style="float: left;" value="<?php echo $page+1; ?>" name="page">Next</button>
</form>
<form method="GET" name="FormPage">
<select name="page" style="float: left;" onChange="document.forms['FormPage'].submit()">
<?php
for($i = 1, $size = ceil($row['0']/25); $i <= $size; $i++)
echo "<option ".($page == $i ? "selected " : "")."value='".$i."'>".$i."</option>";
?>
</select>
</form>
I figure it out. I just had to add <span style="float:left;"> </span> in each of my forms and delete style inside of them.
Related
I have created a simple form type page as follows,
<form action="" method="GET" >
<div class="input-group mb-3">
<input type="text" name="search" required value="<?php if(isset($_GET['search'])){echo $_GET['search']; } ?>" class="form-control" placeholder="Search data">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</form>
I need to type a text in search box(name ="search") and after clicking submit I need to filter the sql data as follows.
<?php
$con = mysqli_connect("10.62.96.133", "root", "", "cdrextend");
if(isset($_GET['search']))
{
$filtervalues = $_GET['search'];
$query="***";
$query_run = mysqli_query($con, $query);
if(mysqli_num_rows($query_run) > 0)
{
foreach($query_run as $items)
{
?>
<tr>
<td><?= $items['***']; ?></td>
<td><?= $items['***']; ?></td>
</tr>
<?php
}
}
else
{
?>
<tr>
<td colspan="2">No Record Found</td>
</tr>
<?php
}
}
?>
Whenever I hit submit button after typing something in text box, it redirects to login page and I am not getting any results.Can someone show me where I have messed up?
Hi change your forms submit action="" to action="<?php echo htmlspecialchars($_SERVER[" PHP_SELF "]);?>"
<form action="<?php echo htmlspecialchars($_SERVER[" PHP_SELF "]);?>" method="GET" >
<div class="input-group mb-3">
<input type="text" name="search" required value="<?php if(isset($_GET['search'])){echo $_GET['search']; } ?>" class="form-control" placeholder="Search data">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</form>
i have a form to be displayed in HTML format, the form HTML code is like below:
<form action="<?php echo base_url('editAllProductsAction'); ?>" method="post">
<?php foreach($products as $key=>$val){ ?>
<div class="row">
<h5></h5>
<input type="hidden" value="<?php echo $val['id']; ?>" name="id[]" />
<div class="col-lg-3">
<label>Product Name</label>
<input name="product_name[]" value="<?php echo $val['product_name']; ?>" type="text" class="form-control" />
</div>
<div class="col-lg-3">
<label>Min Qty </label>
<select name="min_qty[]" class="form-control">
<?php for($i=1;$i<50;$i++){ ?>
<option <?php if($i==$val[ 'min_qty']) echo 'selected'; ?> value="
<?php echo $i; ?>">
<?php echo $i; ?>
</option>
<?php }?>
</select>
</div>
<div class="col-lg-3">
<label>Purchase Price </label>
<input name="purchase_price[]" value="<?php echo $val['purchase_price']; ?>" type="number" data-id="<?php echo $val['id']; ?>" class="form-control edit_purchase_price" />
</div>
<div class="col-lg-3">
<label>Nosh Price </label>
<input name="nosh_price[]" value="<?php echo $val['nosh_price']; ?>" type="number" class="form-control edit_nosh_price_<?php echo $val['id']; ?>" />
</div>
</div>
<?php } ?>
<button type="submit" class="btn btn-primary right_side">Submit</button>
</form>
as you can see I have used php to display the values in the form, when I am displaying the form, because all the row is having same white color as background like below, which is awkward:
I am trying to give 2 background colors for the form, like in first row all input background color will display one color, the second row all the input background will show different colors and it continues for each row. i did the following css:
.form-control:nth-child(2n+1) {
background-color: grey;
}
but this is not displaying the color, can anyone tell me what I did wrong here. thanks in advance
:nth-child(2n+1) part of your code will work for form-control class living on the same level as siblings. There is no other form-control class as sibling on the same level. They live inside different column. That's why 2n+1 cannot find the third form-control inside it's own level. So, basically you have to target the class col-lg-3 as the :nth-child(2n+1). Like so should work-
.col-lg-3:nth-child(2n+1) {
background-color: grey;
}
That way you are selecting every other column and then the eventual form-control class if you want to style them differently per column basis.
You can visually see it here- https://css-tricks.com/examples/nth-child-tester/
Edit:
With further clarification, here is the code that should work in this case and the above explanations stands with a little bit of selector change-
.row:nth-child(2n+1) .form-control {
background-color: #000;
}
You have to give the class row instead of form-control
.row:nth-child(2n+1){
background: grey;
}
I have a blog I am building with entries. I have a form with hidden variables to submit the entryID and other data to "delete" the post. The button always shows below the entry, instead of beside it.
I have tried using CSS Clear, and putting everything in a single <p> line to see if that helps. I feel like the issue is that there is a form with hidden variables, but I'm not sure how to fix this.
<div id="subformposts">
<?php echo $subentry['Body']; ?>
<?php echo $subentry['CreateDate']; ?> - <?php echo $subentry['UserName']; ?><br />
<!-- Determine whether to show the delete button -->
<form action="Delete_entry.php" method="post" id="Deletesub<?php echo $subentry['EntryID'];?>" onsubmit="return confirmdelete('Deletesub<?php echo $subentry['EntryID'];?>')">
<input type="hidden" readonly="true" name="EntryID" value="<?php echo $subentry['EntryID']; ?>" />
<input type="hidden" readonly="true" name="UserID" value="<?php echo $subentry['UserID']; ?>" />
<?php if ($userid == 1 || $userid == $res['UserID']) { ?>
<input type="image" src="redx.png" alt="Delete Post" id="btnDelete" value="Delete Post" />
<?php } ?>
</form>
</div>
I want to see the button floating to the right of my entry, (or to the left at this point.) If I could have it tucked into the div that would be great.
You can use display: inline-flex on subformposts.
Like this one :
<div id="subformposts" style="display: inline-flex;">
<?php echo $subentry['Body']; ?>
<?php echo $subentry['CreateDate']; ?> - <?php echo $subentry['UserName']; ?><br />
<!-- Determine whether to show the delete button -->
<form action="Delete_entry.php" method="post" id="Deletesub<?php echo
$subentry['EntryID'];?>" onsubmit="return confirmdelete('Deletesub<?php echo $subentry['EntryID'];?>')">
<input type="hidden" readonly="true" name="EntryID" value="<?php echo $subentry['EntryID']; ?>" />
<input type="hidden" readonly="true" name="UserID" value="<?php echo $subentry['UserID']; ?>" />
<?php if ($userid == 1 || $userid == $res['UserID']) { ?>
<input type="image" src="redx.png" alt="Delete Post" id="btnDelete" value="Delete Post" />
<?php } ?>
</form>
</div>
Or you can keep both in two different div and put display:inline-block on both of those div. Like this .
<div id="subformposts" style="display: inline-block;">
<?php echo $subentry['Body']; ?>
<?php echo $subentry['CreateDate']; ?> - <?php echo $subentry['UserName']; ?><br />
</div>
<div style="display: inline-block;">
<!-- Determine whether to show the delete button -->
<form action="Delete_entry.php" method="post" id="Deletesub<?php echo
$subentry['EntryID'];?>" onsubmit="return confirmdelete('Deletesub<?php echo $subentry['EntryID'];?>')">
<input type="hidden" readonly="true" name="EntryID" value="<?php echo
$subentry['EntryID']; ?>" />
<input type="hidden" readonly="true" name="UserID" value="<?php echo
$subentry['UserID']; ?>" />
<?php if ($userid == 1 || $userid == $res['UserID']) { ?>
<input type="image" src="redx.png" alt="Delete Post" id="btnDelete" value="Delete Post" />
<?php } ?>
</form>
</div>
I wonder how I can change the size of bootstrap select tag. It is not responsive as well. Please see attachment, in first picture there is small resolution in second one is bigger.
<div class="col-md-9">
<?php $this->load->view('FlashMessagesView'); ?>
<div class="col-md-12 form-group">
<?php if ($searchTerm)
{ ?>
<h3>Vysledky hladania:
<a href="<?php echo base_url('Product/index/') . $subCategoryId; ?>" style="cursor: pointer; color: red"
class="glyphicon glyphicon-remove" aria-hidden="true"></a>
</h3>
<?php } ?>
<div class="col-md-3" style="float: right">
<?php echo form_open('Product/index/' . $subCategoryId,
['id' => 'form_search', 'class' => 'form-horizontal', 'role' => 'form']); ?>
<div class="input-group">
<input type="hidden" name="subcategory_id"
value="<?php echo $subCategoryId ?>"/>
<input type="text" class="form-control" name="product_description"
placeholder="Hladat velkost RAM, CPU...">
<span class="input-group-btn"><button class="btn btn-default" type="submit"><span
class="glyphicon glyphicon-search"></span></button></span>
<?php echo form_close(); ?>
</div>
</div>
Cena: <span class="glyphicon glyphicon-arrow-down" style="cursor: pointer"
onclick="sortProductByLowestPrice()"></span><span class="glyphicon glyphicon-arrow-up"
style="cursor: pointer"
onclick="sortProductByHighestPrice()"></span><br>
Len skladom <input type="checkbox" id="stock_sort" name="stock_only" onclick="sortProductByStock()">
</div>
<?php
$con = mysqli_connect('localhost', 'root', '');
mysqli_select_db($con, 'test');
$sql = "SELECT * FROM products WHERE subcategory_id = " . $subCategoryId;
$result = mysqli_query($con, $sql);
$numberOfProducts = mysqli_num_rows($result);
$numberOfPages = ceil($numberOfProducts / $resultPerPage);
if ( ! isset($_GET['page']))
{
$page = 1;
} else
{
$page = $_GET['page'];
}
$pageFirstResult = ($page - 1) * $resultPerPage;
if ($searchTerm)
{
$like = implode(' OR ', $searchTerm);
$sql = "SELECT * FROM products WHERE subcategory_id = " . $subCategoryId . " AND " . $like . " LIMIT " . $pageFirstResult . ", " . $resultPerPage;
} else
{
$sql = "SELECT * FROM products WHERE subcategory_id = " . $subCategoryId . " LIMIT " . $pageFirstResult . ", " . $resultPerPage;
}
$result = mysqli_query($con, $sql);
if (mysqli_num_rows($result) != 0)
{
$productCount = 0;
?>
<div class="col-md-12" style="padding-left: 0">
<ul class="list-unstyled" id="products" data-role="list">
<?php
while ($product = mysqli_fetch_array($result))
{
?>
<li data-sort="<?php echo $product['product_price'] ?>" class="col-md-3">
<div class="thumbnail">
<a href="product_details.html"><img
src="<?php echo base_url('assets/img/') . $product['product_image']; ?>"/></a>
<div class="caption" style="height: 300px; overflow: hidden">
<h5><?php echo $product['product_name']; ?></h5>
<p><?php echo $product['product_description']; ?></p>
</div>
<div class="product_footer caption">
<?php if ($product['product_quantity'] == 0)
{ ?>
<p style="text-align: center"><span
style="color:orange"><b>Na objednavku.</b></span>
</p>
<?php } else
{ ?>
<p style="text-align: center">
<span style="color:green">
<b>Na sklade <?php echo $product['product_quantity'] ?> ks.</b>
</span>
</p>
<?php } ?>
<h3><a type="button" id="<?php echo $product['id'] ?>"
class="btn btn-success buy_button">Kupit</a>
<?php if ($this->encryption->decrypt($this->session->role) == 'Admin')
{ ?>
<button href="" type="button" id="<?php echo $product['id'] ?>"
class="btn btn-warning"
data-toggle="modal" data-target="#modal_<?php echo $productCount; ?>">
Upravit
</button>
<?php } ?>
<span class="pull-right"><?php echo $product['product_price']; ?> €</span></h3>
<div class="modal fade" id="modal_<?php echo $productCount ?>" data-backdrop="static"
data-keyboard="false">
<div class="modal-dialog">
<div class="modal-body"><?php $this->load->view('AdminProductUpdateView', array('product' => $product, 'productCount' => $productCount,
'id' => $product['id'])) ?>
</div>
</div>
</div>
<p style="text-align: center">Cena bez
DPH <?php echo $product['product_price'] - $product['product_price_dph']; ?> €</p>
</div>
</div>
</li>
<?php $productCount++; ?>
<?php
}
?>
</ul>
</div>
<div class="col-md-1">
<select class="form-control" style="min-width: 2cm" onchange="productPerPage(<?php echo $subCategoryId; ?>, this.value)">
<option selected="selected" hidden><?php echo $resultPerPage; ?></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>10</option>
<option>20</option>
<option>50</option>
</select>
</div>
Produkty na stranku
<div class="products_pagination">
<a id="previous_page">←</a>
<?php
for ($i = 1; $i <= $numberOfPages; $i++)
{
?>
<a id="<?php echo $i; ?>"
href="<?php echo base_url('Product/index/') . $subCategoryId . '/' . $resultPerPage . '?page=' . $i; ?>"><?php echo $i . ' '; ?></a>
<?php
}
?>
<a id="next_page">→</a>
</div>
<?php } else
{ ?>
<h3 class="col-md-12">Nenasli sa ziadne produkty.</h3>
<?php } ?>
</div>
<script>
productsPaggination(<?php echo $numberOfPages; ?>);
getSubcategoryForAdminUpdate(<?php echo $isAdmin ? 1 : 0; ?>, <?php echo $numberOfProducts; ?>);
</script>
small resolution
bigger resolution
This works for me to reduce select tag's width;
<select id ="Select1" class="input-sm">
You can use any one of these classes;
class="input-sm"
class="input-md"
class="input-lg"
Since youre using col-md-1, you are giving it 1/12 of your containers space, which is very little.
I would suggest to simply give it more space, eg. col-sm-2
Try specifying the width:
select.form-control {
width:100%;
}
I am not sure if you also realise that the dropdown is in the col-md-1 container. It will appear small on small screens.
I have custimized the css of my joomla login page, everything is perfect, but I would like the image that I have inserted in the background through css to scale to whole width. Right now it is of a certain width size, despite the fact that in my css I have added width:100%.
Here is the login code:
<?php
/**
* #package Joomla.Site
* #subpackage com_users
* #copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
* #license GNU General Public License version 2 or later; see LICENSE.txt
* #since 1.5
*/
defined('_JEXEC') or die;
JHtml::_('behavior.keepalive');
?>
<div class="login<?php echo $this->pageclass_sfx?>">
<?php //if ($this->params->get('show_page_heading')) : ?>
<div class="page-header">
<h1 class="title">
<?php echo $this->escape($this->params->get('page_heading')); ?>
</h1>
</div>
<?php //endif; ?>
<?php if (($this->params->get('logindescription_show') == 1 && str_replace(' ', '', $this->params->get('login_description')) != '') || $this->params->get('login_image') != '') : ?>
<div class="login-description">
<?php endif ; ?>
<?php if (($this->params->get('login_image')!='')) :?>
<img src="<?php echo $this->escape($this->params->get('login_image')); ?>" class="login-image" alt="<?php echo JTEXT::_('COM_USER_LOGIN_IMAGE_ALT')?>"/>
<?php endif; ?>
<?php if($this->params->get('logindescription_show') == 1) : ?>
<?php echo $this->params->get('login_description'); ?>
<?php endif; ?>
<?php if (($this->params->get('logindescription_show') == 1 && str_replace(' ', '', $this->params->get('login_description')) != '') || $this->params->get('login_image') != '') : ?>
</div>
<?php endif ; ?>
<form class="form-horizontal" action="<?php echo JRoute::_('index.php?option=com_users&task=user.login'); ?>" method="post">
<fieldset class="well">
<?php foreach ($this->form->getFieldset('credentials') as $field): ?>
<?php if (!$field->hidden): ?>
<div class="control-group">
<div class="control-label">
<?php echo $field->label; ?>
</div>
<div class="controls">
<?php echo $field->input; ?>
</div>
</div>
<?php endif; ?>
<?php endforeach; ?>
<?php if (JPluginHelper::isEnabled('system', 'remember')) : ?>
<div class="control-group">
<label id="remember-lbl" class="control-label" for="remember"><?php echo JText::_('JGLOBAL_REMEMBER_ME') ?></label>
<input id="remember" type="checkbox" name="remember" class="inputbox" value="yes" alt="<?php echo JText::_('JGLOBAL_REMEMBER_ME') ?>" />
</div>
<?php endif; ?>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn-send"><?php echo JText::_('JLOGIN'); ?></button>
<input type="hidden" name="return" value="<?php echo base64_encode($this->params->get('login_redirect_url', $this->form->getValue('return'))); ?>" />
<?php echo JHtml::_('form.token'); ?>
</div>
</div>
</fieldset>
</form>
</div>
<div class="other-link">
<ul class="yt-list type-square">
<li class="pull-left">
<a href="<?php echo JRoute::_('index.php?option=com_users&view=reset'); ?>">
<?php echo JText::_('COM_USERS_LOGIN_RESET'); ?></a>
</li>
<?php
$usersConfig = JComponentHelper::getParams('com_users');
if ($usersConfig->get('allowUserRegistration')) : ?>
<li class="pull-right">
<a href="<?php echo JRoute::_('index.php?option=com_users&view=registration'); ?>">
<?php echo JText::_('COM_USERS_LOGIN_REGISTER'); ?></a>
</li>
<?php endif; ?>
</ul>
</div>
Don't modify core Joomla files, learn about overrides (1, 2 & 3) and use them, that way when a security update is released you can apply it safely and not have to worry about your changes being overwritten.
Did you mean backgroud-size: 100% rather than width: 100%? That would make more sense for background images. In that case, I would recommend reading this primer on "Scaling background images"
To help further we will need to see your existing CSS that you've created and either a link showing the problem or a good screen shot of the issue.