Merge pull request #153 from PallaviSawant04/Bug#202346

Bug #202346 fix: filter alignment

Author: ankush-maherwal

code/admin/assets/css/api.css

@@ -12,3 +12,21 @@
 	background-image: url(../images/l_logs.png);
 	padding-left:60px!important;
 }
+.api-filter {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
+.js-stools-container-bar-api-filter {
+    -webkit-margin-start: auto;
+    margin-inline-start: auto;
+}
+.js-stools-container-bar-api-filter .btn-toolbar>*+* {
+    -webkit-margin-start: 8px;
+    margin-inline-start: 8px;
+}
+.js-stools-container-bar-api-filter .btn-toolbar>* {
+    margin: 5px;
+}

code/admin/views/keys/tmpl/default.php

@@ -19,6 +19,7 @@
 use Joomla\CMS\Language\Text;
 
 HTMLHelper::addIncludePath(JPATH_COMPONENT . '/helpers/html');
+HTMLHelper::stylesheet('administrator/components/com_api/assets/css/api.css');
 
 // Import CSS
 HTMLHelper::_('stylesheet','components/com_api/assets/css/api.css');
@@ -69,30 +70,31 @@
 		method="post" name="adminForm" id="adminForm">
 
 		<?php if (!empty($this->sidebar)): ?>
-		<div id="j-sidebar-container" class="span2">
+		<div id="j-sidebar-container" class="col-md-2">
 			<?php echo $this->sidebar; ?>
 		</div>
-		<div id="j-main-container" class="span10">
+		<div id="j-main-container" class="col-md-10">
 
 		<?php else : ?>
 			<div id="j-main-container">
 			<?php endif; ?>
-
+			<div  class="row">
+			<div  class="col-md-12">
+			<div class="js-stools api-filter" role="search">
+			<div class="js-stools-container-bar-api-filter ">
 			<div id="filter-bar" class="btn-toolbar">
-				<div class="filter-search btn-group pull-left">
+				<div class="filter-search btn-group ">
 					<input type="text" name="filter_search" id="filter_search"
 					placeholder="<?php echo Text::_('COM_API_KEYS_SEARCH_FILTER'); ?>"
 					value="<?php echo $this->escape($this->state->get('filter.search')); ?>"
-					class="hasTooltip"
+					class="hasTooltip form-control"
 					title="<?php echo Text::_('COM_API_KEYS_SEARCH_FILTER'); ?>" />
-				</div>
-
-				<div class="btn-group pull-left">
-					<button type="submit" class="btn hasTooltip"
+			
+					<button type="submit" class="btn hasTooltip filter-search-bar__button btn btn-primary"
 					title="<?php echo Text::_('JSEARCH_FILTER_SUBMIT'); ?>">
 						<i class="icon-search"></i>
 					</button>
-					<button type="button" class="btn hasTooltip"
+					<button type="button" class="btn hasTooltip filter-search-bar__button btn btn-primary"
 					title="<?php echo Text::_('JSEARCH_FILTER_CLEAR'); ?>"
 					onclick="document.getElementById('filter_search').value='';this.form.submit();">
 						<i class="icon-remove"></i>
@@ -152,6 +154,10 @@ class="input-medium form-select" onchange="Joomla.orderTable()">
 					?>
 				</div>
 			</div>
+			</div>
+			</div>
+			</div>
+			</div>
 
 			<div class="clearfix"> </div>