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>
Related
I'm making a plugin and I don't understand why my shortcode doesn't work if I insert into a woocommerce product page.
It does work if I add it elsewhere on another page, just not on product pages.
The shortcode is added very simply:
add_shortcode('testing', 'testingform');
function testingform() {
ob_start();
echo 'Width:<br>
<input type="text" name="width" id="width"><br>
Height:<br>
<input type="text" name="height" id="height"><br>
Scale:<br>
<input type="text" name="scale" id="scale"><br><br>
<input type="submit" name="submit" id="submitbtn"><br>
<button type="button" id="stripbtn">Show Strips</button>
<div class="wallpapercontainer">
<div class="holder">
<div class="wallpaper">
</div>
</div>
<div class="heightbar"></div>
<div class="widthbar"></div>
</div>';
$output = ob_get_contents();
ob_end_clean();
return $output;
}
I have wordpress error mesages comming from wp-includes/user.php.
I have a customized Log in page(TML). I want to place the error messages after the input Fields.
At present they are validated and coming at the top of the from. I want to place the error message($template->the_errors(); ) after input fields(email and password accordingly).
<div id="signInPage">
<div id="blackSignInBox">
<h1>ONBoard Guide Sign-In</h1>
<!-- <p id="message">Enter your email addres and password provided</p> -->
<h2 id="mobileh1signin">ONBoard Guide<br /> Sign-In</h2>
<div class="tml tml-login" id="theme-my-login<?php $template->the_instance(); ?>">
<?php $template->the_action_template_message( 'login' ); ?>
<?php $template->the_errors(); ?>
<form name="loginform" id="loginform<?php $template->the_instance(); ?>" action="<?php $template->the_action_url( 'login', 'login_post' ); ?>" method="post">
<span class="input-wrap email sipage">
<label for="user_login<?php $template->the_instance(); ?>"><?php _e( 'Email', 'theme-my-login' ); ?></label>
<input type="text" name="log" id="user_login<?php $template->the_instance(); ?>" class="input" value="<?php $template->the_posted_value( 'log' ); ?>" size="20" />
<div class="error email-error">You have entered an invalid email. Try again.</div>
</span>
<span id="passSI" class="input-wrap password sipage">
<label for="user_pass<?php $template->the_instance(); ?>"><?php _e( 'Password', 'theme-my-login' ); ?></label>
<div id="inputContainer">
<input type="password" name="pwd" id="user_pass<?php $template->the_instance(); ?>" class="input" value="" size="20" autocomplete="off" />
<button type="button" id="showHide" onclick="passFunction()">Show </button>
</div>
<div class="error password-error">Please enter a password</div>
<p class="action-link lost-password"><?php $template->lost_pw_action_link(); ?></p>
</span>
<?php do_action( 'login_form' ); ?>
<span class="tml-submit-wrap sipage">
<button type="submit" name="wp-submit" id="wp-submit<?php $template->the_instance(); ?>" ><?php esc_attr_e( 'Sign In', 'theme-my-login' ); ?></button>
<input type="hidden" name="redirect_to" value="<?php $template->the_redirect_url( 'login' ); ?>" />
<input type="hidden" name="instance" value="<?php $template->the_instance(); ?>" />
<input type="hidden" name="action" value="login" />
</span>
</form>
<p class="action-link register">Don't have an account? <?php $template->register_action_link(); ?></p>
</div>
</div>
</div>
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'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'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.