I'm having issues with a popover in Bootstrap. I have a form in a dropdown menu, in the navbar, and the popover gets over the top of the screen. Furthermore, the popover is really thin. This is the situation:
I would like to get something like this:
The problem is that if I change values for that popover to work, other popovers get wrong, and if I change the text inside, It won't fit. What could I do? this is the code, by the way:
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<?php echo lang('register'); ?><b class="caret"></b>
</a>
<ul id="register" class="dropdown-menu form">
<?php echo form_open('#'); ?>
<input type="text" name="user" placeholder="<?php echo lang('login.username'); ?>">
<input type="email" name="email" placeholder="<?php echo lang('reg.email'); ?>">
<input type="password" name="pass" placeholder="<?php echo lang('login.password'); ?>">
<input type="password" name="pass_conf" placeholder="<?php echo lang('reg.pass_conf'); ?>">
<input class="btn btn-info" type="button" value="<?php echo lang('reg.submit'); ?>">
</form>
</ul>
</li>
It has a bit of PHP code but I think it shows the structure fine. The CoffeeScript for that part is this:
username = $('#register input[name="user"]')
if ( ! /^([\w_-]{4,15})$/.test(username.val()))
username.addClass('error')
username.popover({
'placement': 'right'
'trigger': 'manual'
'title': user_not_valid_title
'content': user_not_valid
})
username.popover('show')
pass = false
I finally got to a solution without modifying the container of the popover, setting it to body, and then putting a higher z-index than the navbar.
Related
I'm writing a wordpress theme using Bootstrap for a website. The search input on the navbar looks fine on a desktop/tablet, if the window is resized however to the size of a mobile. The input box and the search button are no longer on inline. Any ideas please?
http://breakingborderline.co.uk/
Navbar
<nav class="navbar navbar-default navbar-color">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand title" href="http://www.breakingborderline.co.uk">Breaking Borderline</a>
</div>
<div class="navbar navbar-right">
<?php get_search_form(); ?>
</div>
</div>
</nav>
Search form
<div class="form-group">
<form role="search" method="get" class="form-inline" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input type="search" class="form-control form-control-sm" placeholder="Search for..." value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="Search for:">
<input type="submit" class="btn btn-default" value="Search">
</form>
</div>
Thanks
.form-control are block level elements for smaller devices.
You can make them inline using:
.form-inline .form-control {
display: inline-block;
/* Add vertical-align to align them */
vertical-align: bottom;
}
<form role="search" method="get" class="form-inline" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input type="search" class="form-control form-control-sm" placeholder="Search for..." value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="Search for:">
<input type="submit" class="btn btn-default" value="Search">
</form>
I am using the following code for a search bar. When you click the submit, it does nothing. It is not even directing to another page. I am using the Understrap theme.
<div id="search">
<form action="/" method="get">
<input type="search" placeholder="Type your search word(s) here" value="<?php get_search_query(); ?>" />
<button type="submit" class="btn btn-primary">Search</button>
</form>
</div>
Make action attribute your site url instead of '/'. Sometime '/' want be useful.
<div id="search">
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<input type="search" placeholder="Type your search word(s) here" value="<?php get_search_query(); ?>" />
<button type="submit" class="btn btn-primary">Search</button>
</form>
</div>
I’ve got to get the below form code onto a single row like: http://snag.gy/k5yrv.jpg
<form method="GET" action="YOUR_JOBS_PAGE_URL">
<p>
<label for="keywords">Keywords</label>
<input type="text" id="search_keywords" name="search_keywords" />
</p>
<p>
<label for="keywords">Location</label>
<input type="text" id="search_location" name="search_location" />
</p>
<p>
<input type="submit" value="Search" />
</p>
</form>
I’m using Avada Theme Contact Form 7 and I need to create a form with multiple fields in one row will look like this. For example, this uses 3 column sections, one field per column:
div class="fusion-one-third one_third fusion-layout-column fusion-spacing-yes">Your Name (required) [text* your-name]</div>
<div class="fusion-one-third one_third fusion-layout-column fusion-spacing-yes">Your Message [textarea your-message]</div>
<div class="fusion-one-third one_third fusion-layout-column fusion-spacing-yes fusion-column-last">[submit "Send"]</div>
Any ideas?
Surely can you not just do:
<div class="fusion-one-third one_third fusion-layout-column fusion-spacing-yes">[text keywords placeholder "job title, keywords or company name"]</div>
<div class="fusion-one-third one_third fusion-layout-column fusion-spacing-yes">[text location placeholder "city, province or region"]</div>
<div class="fusion-one-third one_third fusion-layout-column fusion-spacing-yes fusion-column-last">[submit "Search"]</div>
Unless I'm misunderstanding your question completely?
Thanks for your help bluewhitew, but I don't think that would work. The full code is below. I missed something out because I don't want a 'Category' field, but I think I left out an important function. As clicking submit should take you to a job list page, with your selection listed.
<form method="GET" action="YOUR_JOBS_PAGE_URL">
<p>
<label for="keywords">Keywords</label>
<input type="text" id="search_keywords" name="search_keywords" />
</p>
<p>
<label for="keywords">Location</label>
<input type="text" id="search_location" name="search_location" />
</p>
<p>
<label for="search_category">Category</label>
<select id="search_category" name="search_category">
<?php foreach ( get_job_listing_categories() as $cat ) : ?>
<option value="<?php echo esc_attr( $cat->term_id ); ?>"><?php echo esc_html( $cat->name ); ?></option>
<?php endforeach; ?>
</select>
</p>
<p>
<input type="submit" value="Search" />
</p>
</form>
I'm creating a wordpress theme using bootstrap, so I used 320press.com theme. I have a main navbar at the top of the page that includes the following:
Home
About Us
Services
Gallery
Contact Us
The Search box of wordpress
I need to make the list fit with the page, the default layout is insert it to the left close to each other. In other words, I have 6 items, so I need each item takes class "col-sm-2", so each item will fit in two columns.
I write this code
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" title="<?php echo get_bloginfo('description'); ?>" href="<?php echo home_url(); ?>">Home</a>
</div>
<div class="collapse navbar-collapse navbar-responsive-collapse main-bar">
<?php wp_bootstrap_main_nav();?>
<?php //if(of_get_option('search_bar', '1')) {?>
<form class="navbar-form navbar-right" role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
div class="form-group">
<input name="s" id="s" type="text" class="search-query form-control" autocomplete="off" placeholder="<?php _e('Search','wpbootstrap'); ?>" data-provide="typeahead" data-items="4" data-source='<?php echo $typeahead_data; ?>'>
</div>
</form>
<?php //} ?>
</div>
<!-- end .container -->
</div>
In CSS, I write the following
.main-bar li {
padding-left: 75px;
font-size: 1.2em;
}
It's working fine in wide screen, but in smaller it dose not, such as size 768px or even 1024px.
I want to use bootstrap buttons for filter cateogries in wordpress and I don't know what is the best way to do it.
This is my markup:
<?php $categorias = get_categories();?>
<form method="post" action="<?php echo get_permalink(); ?>">
<div class="btn-group" data-toggle-name="cat" data-toggle="buttons-checkbox" >
<label class="control-label" for="inputIcon">Selecciona entre las categorias</label>
<?php
foreach( $categorias as $cat):
echo '<button type="button" class="btn" rel="tooltip" data-placement="bottom" data-original-title="Seleccionar" value="'.$cat->term_id.'">'.$cat->name.'</button>';
endforeach;
?>
<input type="hidden" value="" name="cat">
<button class="btn" type="submit" >enviar</button>
</div>
</form>
Can anybody help me?
<?php
foreach( $categorias as $cat):
$cat_link = get_category_link( $cat->cat_ID );
echo '<a class="btn" href="'.$cat_link.'">'.$cat->name.'</a>';
endforeach;
?>
should be enough to create some buttons with link to category.
if you must use a form then do this
<input type="hidden" name="filter-category" id="filter-category" value="0" >
<?php
foreach( $categorias as $cat):
$cat_link = get_category_link( $cat->cat_ID );
echo '<button type="button" class="btn filter-category" value="'.$cat->cat_ID.'">'.$cat->name.'</button>';
endforeach;
?>
<script type="text/javascript">
$(document).ready(function(){
$('.filter-category').on('click', function() {
cat = $(this).val();
$('#filter-category').val(cat);
});
});
</script>
then you POST your category ID with that hidden input.