Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm implementing a large project with Bootstrap 3, and today I saw that suddenly the site is on 100% width. Because of the cache of the browser, it happened yesterday, but I only saw it today, so I don't know what piece of code I was working on that triggered it. I don't recall messing with variables, grid.less or any file that traditionally may have something to do with the width of the site.
Being so, I'm kinda lost! Where would you suggest that I look? I disabled custom CSS files one by one, and nothing...
I cannot send link as I'm working on virtual machine, I'm attaching the code from the main layout file, just in case.
<?php echo $this->docType().PHP_EOL;?>
<html lang="<?php echo Inwx_Website::getLanguage();?>">
<head>
<?php
echo $this->headMeta().PHP_EOL;
echo $this->headTitle().PHP_EOL;
echo $this->headLink().PHP_EOL;
echo $this->headStyle();
?>
</head>
<body ng-app="inwxApp">
<div class="viewport">
<div class="frame">
<div class="view" ng-controller="FrontCtrl">
<div id="ajax-loading">
<img src="/img/ajax-loader.gif" class="ajax-loader"/>
</div>
<!--Nav Top Blue-->
<div>
<div class="navbar navbar-static-top">
<div class="container">
<div class="navbar-collapse collapse">
<a class="pull-left" href="<?php echo $this->url(array('controller'=>'index','action'=>'index'),'default',true);?>" target="_top">
<img src="/img/logo-inwx.png" alt="InterNetworx" title="InterNetworx"/>
</a>
<div class="row col-md-3 pull-right">
<div class="pull-right">
<?php echo $this->drawLanguages();?>
</div>
</div>
<div class="row col-md-8 pull-right ix-login" ng-show="loggedin==0" ng-cloak>
<ul class="pull-right">
<li><?php echo _t("Login")?></li>
<li><a class="ix-login-buttons" href="<?php echo $this->url(array('controller'=>'customer','action'=>'signup'),'default');?>"><?php echo _t("Register")?></a></li>
</ul>
<form id="main-loginform" ng-submit="login('main-loginform')">
<input class="col-md-2" type="text" placeholder="<?php echo _t('Username')?>" ng-model="username" name="username" value="">
<input class="col-md-2" type="password" placeholder="<?php echo _t('Password')?>" ng-model="password" name="password" value="">
<button type="submit" class="btn btn-default btn-success"><?php echo _t("Login")?></button>
<?php echo _t("Forgot your password?")?>
</form>
</div>
<!-- logged in: user -->
<div class="ix-info-costumer pull-right" ng-show="loggedin==1" ng-cloak>
<ul class="ix-down">
<li><?php echo _t('Username')?>: {{userData.firstname}} {{userData.lastname}}</li>
<li><?php echo _t('Credit balance')?>: {{creditData.available | currency: '€'}}</li>
<li><?php echo _t('Customer id')?>: {{userData.customerId}}</li>
<li><?php echo _t('Service PIN')?>: {{userData.servicePin}}</li>
<li><?php echo _t('Logout')?>
</ul>
</div>
</div>
</div>
</div><!--/Nav Top Blue-->
<!--Nav Grey-->
<div class="navbar navbar-static-top ">
<div class="container">
<div class="navbar-collapse collapse">
<ng-include src="'<?php echo $this->url(array('controller'=>'index','action'=>'navi'),'default',true);?>'"></ng-include>
<div class="pull-right" ng-show="cartData.list.length">
<!-- shopping cart info -->
<a class="btn btn-default btn-sm ix-btn-custom" data-placement="bottom"><img src="/img/shopping-icon.png" />{{cartData.list.length}}</a>
<div id="popover_content_wrapper" style="display:none">
<div class="row ix-shop-popover">
<div class="pull-left">
<ul class="ix-shop-popover">
<li>{{cartData.list.length}} <?php echo _t("Items")?></li>
</ul>
</div>
<div class="pull-right">
<ul class="ix-shop-popover">
<li>{{cartData.totalPrice | currency: '€'}}</li>
</ul>
</div>
</div>
<div class="ix-divider">
<div class="pull-left">
<?php echo _t("Empty cart")?>
</div>
<div class="pull-right">
<?php echo _t("Check Out")?>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--/Nav Grey-->
</div> <!-- end of InitCtrl -->
<!--Content-->
<div class="container">
<div class="row">
<!--Domain Search Static in all pages-->
<div class="col-md-6">
<form class="form-inline" role="form">
<div class="form-group">
<?php echo _t("DOMAIN CHECK")?>:
</div>
<div class="form-group pull-right">
<i class="icon-white icon-search"></i> <?php echo _t("Search")?>
</div>
<div class="col-md-7 pull-right">
<div class="input-group">
<label class="sr-only" for="exampleInputEmail2"><?php echo _t('My Domain'); ?></label>
<input placeholder="<?php echo _t('My Domain'); ?>" type="text" ng-model="domain" class="form-control" id="exampleInputEmail2">
<span class="input-group-btn">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<?php echo _t("Default")?>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><?php echo _t("Generic")?></li>
<li><?php echo _t("America")?></li>
<li><?php echo _t("Europe")?></li>
<li><?php echo _t("Asia")?></li>
<li><?php echo _t("Africa")?></li>
<li><?php echo _t("Oceania")?></li>
<li><?php echo _t("All")?></li>
<li><?php echo _t("New TDLs")?></li>
</ul>
</span>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<!--/Domain Search Static in all pages-->
<?php echo $this->navigation()->breadcrumbs()->setSeparator("/"); ?>
<?php echo $this->layout()->content; ?>
</div>
</div>
</div>
</div>
</div>
<?php
echo $this->headScript().PHP_EOL;
echo $this->inlineScript().PHP_EOL;
?>
</body>
</html>
Pop open firebug and inspect the body tag to see if what stylesheet the width 100% is coming from. Bootstrap 3 is very focused on responsive layouts so this would make sense.
If it is a new site, it will have a 100% width as it exist in a block level html tag that will not have a width constraint until you give one. I dont see any bootstrap class names to enforce a width either.
As a developer you should have you cache turned off almost always :) Most browser web dev toolbars provide this as an option.
Hope that gives you a starting point. Discovering the source of width should be pretty straight forward.
Related
I have 2 wordpress installations, 1 is for major content, the other is a help center.
the help center is installed in the major content directory. So you have the wordpress directory, and another in that directory, making it so we can use different themes and change the look between the two.
I'm just curious, on the search results page, I'm getting the correct url's, but they are going to 404 pages. I verified in the database that these records exist, so it's not a matter of the database not making these records and that these pages don't exist. Another note is that the search results page will return pages that have been created, but
<?php
get_header();
global $wp_query;
$total_result = $wp_query->found_posts;
?>
<div class="main">
<div class="main-hero">
<div class="container">
<h1>Boxstorm Help Center</h1>
<p>Search the Boxstorm Help Center documentation</p>
<div class="search-wrapper">
<form id="searchform" class="searchform" role="search" method="get" action="<?php echo site_url(); ?>">
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input id="s" name="s" type="text" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder', 'boxstorm' ); ?>" value="<?php echo get_search_query(); ?>">
<span class="search-button-wrapper">
<input id="searchsubmit" type="submit" value="">
<i class="fa fa-search"></i>
</span>
</div>
</form>
</div><!-- / .search-wrapper -->
</div>
</div><!-- /.main-hero -->
<nav class="main-hero-subnav cd-secondary-nav">
<div class="container">
<div class="is-hidden-mobile">
<?php get_breadcrumb(); ?>
</div>
</div>
</nav>
<div class="panel sub-nav-hero">
<div class="container page">
<div class="columns is-multiline is-mobile search-results">
<div class="column is-3-desktop is-6-tablet is-full-mobile left">
<div class="columns top-cats is-multiline is-mobile is-centered">
<div class="column is-11-desktop is-10-tablet is-6-mobile">
<div>
<a href="<?php echo site_url(); ?>/getting-started/">
<i class="fas fa-list-ul"></i>
<h2>Getting Started</h2>
</a>
</div>
</div>
<div class="column is-11-desktop is-10-tablet is-6-mobile">
<div>
<a href="<?php echo site_url(); ?>/documentation/">
<i class="fas fa-book"></i>
<h2>Documentation</h2>
</a>
</div>
</div>
<div class="column is-11-desktop is-10-tablet is-6-mobile">
<div>
<a href="<?php echo site_url(); ?>/videos/">
<i class="far fa-play-circle"></i>
<h2>Browse Videos</h2>
</a>
</div>
</div>
<div class="column is-11-desktop is-10-tablet is-6-mobile">
<div>
<a href="<?php echo site_url(); ?>/contact/">
<i class="fas fa-at"></i>
<h2>Contact Support</h2>
</a>
</div>
</div>
</div>
</div>
<div class="column is-9-desktop is-6-tablet is-full-mobile right">
<h1 class="results"><?php printf( __( 'Search results for: <b>%s</b>', 'boxstormsupport'), get_search_query() ); ?></h1>
<div class="columns is-multiline">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); get_template_part( 'content', 'search' ); ?>
<div class="column is-12 results">
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
<?php the_permalink(); ?>
</div>
<?php endwhile; else : ?>
<div class="column is-12">
<p><?php _e( '<p>Sorry, but there were no results for the term <b style="font-weight:900;">'.get_search_query().'</b>. Please refine your search terms and try again.</p>' ); ?></p>
</div>
<?php endif; ?>
</div><!-- / columns -->
</div><!-- / columns is-9 right -->
</div><!-- / search-results -->
</div>
</div>
</div>
<?php get_footer(); ?>
The site is live at https://www.boxstorm.com/help-center. If you'd like to see the problem.
The pages follow this format in wordpress:
Pages parameters:
This is what I'm seeing:
Chrome
Firefox
Any help would be appreciated, thanks.
First post - be gentle :)
I've run into an issue with row height in Bootstrap (I think). I'm brand new to Bootstrap and I'm trying to do some basic edits to my Wordpress site and really want to further my knowledge. Previously I had 4 items equally distributed across the page and it looked great. Well, I've added a fifth item and it's been dropped to the next row below the first four but isn't low enough on the page and blocks the content of one of the original four items.
How can I adjust the height of the offending row(s) to drop the bottom item low enough to accommodate the upper row?
Link to the actual page: HERE
Please see image and code below.
Offending item
HTML from the entire page:
<?php
/*
template name:Home Page
*/
get_header();
?>
<!-- banner starts -->
<div class="banner">
<div data-ride="carousel" class="carousel slide" id="carousel-example-captions">
<ol class="carousel-indicators">
<li class="" data-slide-to="0" data-target="#carousel-example-captions"></li>
<li data-slide-to="1" data-target="#carousel-example-captions" class="active"></li>
<li data-slide-to="2" data-target="#carousel-example-captions"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php $slides = get_field('slides','4');
if(is_array($slides) and count($slides)>0){
$num=0;
foreach($slides as $slides_val) {?>
<div class="item <?php if($num==0) echo "active"; ?>">
<img src="<?php echo $slides_val['slide_image']['url']; ?>" alt="900x500" data-src="holder.js/900x500/auto/#777:#777" data-holder-rendered="true">
<div class="carousel-caption">
<div class="banner-heading">
<span><?php echo $slides_val['slide_content_heading']; ?></span>
</div>
<?php echo $slides_val['slide_content']; ?>
<!-- Contact Us-->
</div>
</div>
<?php $num++; } }?>
</div>
<!-- Controls -->
<a data-slide="prev" role="button" href="#carousel-example-captions" class="left carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" role="button" href="#carousel-example-captions" class="right carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- banner ends -->
<!-- content starts -->
<div class="content">
<div class="process-section">
<div class="container">
<div class="row">
<div class="process-heading">Our Process</div>
<div class="process-fillers-section">
<ul>
<?php
global $post,$paged;
$args = array(
'post_type'=>'process',
'orderby'=> 'post_date',
'order' => 'DESC'
);
$wp_query= new WP_Query($args);
$no_of_posts=$wp_query->found_posts;
while ($wp_query->have_posts()):$wp_query->the_post();
$src= wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
?>
<li class="col-sm-4 col-md-4 col-lg-4">
<img src="<?php echo $src[0];?>" alt="" />
<div class="process-inner">
<div class="filler-title"><?php the_title(); ?></div>
<?php the_content(); ?>
<!-- Read More-->
</div>
</li>
<?php
endwhile;
?>
</ul>
</div>
</div>
</div>
</div>
<?php include('vip.php');?>
<div class="service-section">
<div class="container">
<div class="row">
<div class="process-heading">Our Services</div>
<div class="process-fillers-section">
<ul>
<?php
global $post,$paged;
$args = array(
'post_type'=>'services',
'order' => 'ASC'
);
$wp_query= new WP_Query($args);
$no_of_posts=$wp_query->found_posts;
while ($wp_query->have_posts()):$wp_query->the_post();
$src= wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
?>
<li class="col-sm-3 col-md-3 col-lg-3">
<div class="process-fillers-image-section">
<img src="<?php echo $src[0];?>" alt="" />
<div class="process-category"><?php the_title(); ?> </div>
</div>
<p><?php the_excerpt(); ?> </p>
Read More
</li>
<?php
endwhile;
?>
</ul>
</div>
</div>
</div>
</div>
<div class="instagram-section">
<div class="container">
<div class="row">
<div class="process-heading">
<div><img src="<?php bloginfo('template_url');?>/images/instagram-icon.png" alt="" /></div>
#H2Htpe</div>
<?php echo do_shortcode('[instagram]'); ?>
</div>
</div>
</div>
</div>
<!-- content ends -->
<?php get_footer('footer'); ?>
I am using CakePhp 3.4.7 and Bootstrap 3.3.7 and Bootstrap is working fine except that Glyphicons are not showing. Here's what my Login page looks like and you can see the icons are missing: http://i.imgur.com/wTAZEyO.jpg
I placed all the glyphicons-halflings-regular.* fonts in the App/webroot/font directory and the bootsrap.min.css in App/webroot/css and bootsrap.min.js/jquery-3.2.1.min.js in App/webroot/js
And inspecting my website I can see both css and js files are being pulled correctly and in fact the code is working: http://i.imgur.com/mFO3HWhh.jpg
Here is my code
DEFAULT CTP HEAD
<!DOCTYPE html>
<html>
<head>
<?= $this->Html->charset() ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
<?= $cakeDescription ?>:
<?= $this->fetch('title') ?>
</title>
<?= $this->Html->meta('icon') ?>
<?= $this->Html->css('bootstrap.min.css') ?>
<?= $this->Html->script('jquery-3.2.1.min.js') ?>
<?= $this->Html->script('bootstrap.min.js') ?>
<?= $this->fetch('meta') ?>
<?= $this->fetch('css') ?>
<?= $this->fetch('script') ?>
</head>
LOGINT CTP
<?
// Path File: \App\src\Templates\Usuarios\login.ctp
/** #var $this \Cake\View\View */
?>
<div class="container alto-minimo-contenido">
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title"><i class="glyphicon glyphicon-user"></i> Formulario de ingreso al sistema</div>
</div>
<div style="padding-top:30px" class="panel-body">
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<?= $this->Flash->render('auth') ?>
<form id="loginform" class="form-horizontal" role="form" method="post" action="<?php echo $this->Url->build(["controller" => "Usuarios", "action" => "login"]) ?>">
<label for="login-username">E-Mail</label>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon">#</span>
<input id="login-username" type="text" class="form-control" name="email" value="" placeholder="E-Mail">
</div>
<label for="login-password">Clave</label>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="Clave">
</div>
<div style="margin-top:10px" class="form-group">
<div class="col-sm-push-1 col-sm-10 col-sm-pull-1 controls">
<button type="submit" id="btn-login" class="btn btn-primary btn-block"><i class="glyphicon glyphicon-log-in"></i> ENTRAR</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
I can see that in my bootstrap.min.css files the path is correct. Any idea why Cake is not pulling the icons even though they exist?
Go to your CSS folder.
Open the bootstrap.min.css file.
Search for glyphicon text in that.
You can find out its url address.
You should change the font folder name to fonts.
Go and enjoy your life. :)
I'm trying to show the featured image or the post thumbnail in every list items < li >. Here's the code:
<div class="row headline">
<ul class="col-md-12 col-sm-12">
<?php
$sql_submenu_produk_sql = $wpdb->get_results("
SELECT * from $wpdb->posts
WHERE post_parent=52 AND post_type='page' AND post_status='publish' group by ID;
");
?>
<?php foreach ($sql_submenu_produk_sql as $row_submenu_sql) { ?>
<li>
<div class="col-md-2 col-xs-12 bordered" style="min-height: 100px;">
<a href="" data-featherlight="image">
<?php echo get_the_post_thumbnail($post->ID); ?>
</a>
</div>
<div class="col-md-10 col-xs-12">
<h2 style="font-weight: normal;"><?php echo $row_submenu_sql->post_title ?></h2>
<p style="padding-bottom: 15px;"><?php echo $row_submenu_sql->post_content ?></p>
</div>
</li>
<?php } ;?>
</ul>
</div>
but, it's not showing after all while on the other page shows. Please help.
Should you have get_the_post_thumbnail($row_submenu_sql->ID); and not $row_submenu_sql->ID $post->ID is not defined in that loop.
<div class="row headline">
<ul class="col-md-12 col-sm-12">
<?php
$sql_submenu_produk_sql = $wpdb->get_results("
SELECT * from $wpdb->posts
WHERE post_parent=52 AND post_type='page' AND post_status='publish' group by ID;
");
?>
<?php foreach ($sql_submenu_produk_sql as $row_submenu_sql) { ?>
<li>
<div class="col-md-2 col-xs-12 bordered" style="min-height: 100px;">
<a href="" data-featherlight="image">
//UPDATE THIS LINE LIKE BELOW
<?php echo get_the_post_thumbnail($row_submenu_sql->ID); ?>
</a>
</div>
<div class="col-md-10 col-xs-12">
<h2 style="font-weight: normal;"><?php echo $row_submenu_sql->post_title ?></h2>
<p style="padding-bottom: 15px;"><?php echo $row_submenu_sql->post_content ?></p>
</div>
</li>
<?php } ;?>
</ul>
</div>
i got a template site when i bought a package and it has a built in chat function, however you need to press a "send" button each time to send chat messages, this is the script used, i guess it is kinda easy to do it but in not good at scripting :/
<div class="col-lg-4 border-left affix-items scrollbar" id="room-items">
<div id="dropboxy">
<?php
?>
</div>
</div>
<div class="col-lg-6 affix-players" style="padding:10px;">
<div id="playersdropboxy">
<?php include_once("players.php"); ?>
</div>
<div id="affix-players" class="scrollbar">
<div id="rooms"></div> </div> </div> <div class="col-lg-5 affix-right">
<div class="col-xs-24 chat"> <div class="row chat-container">
<div class="row chat-buttons"> <div class="col-xs-24"> <div class="media-body"> <div class="input-group">
<input type="text" class="form-control chat-message" id="text-massage" style="margin-left:6px;" maxlength="300"> <span class="input-group-btn">
<?php if(isset($_SESSION['steamid'])) { ?>
<button class="btn btn-primary" type="submit" data-loading-text="<i class='fa fa-spinner fa-spin'></i> WAIT..." id="send_massage" style="margin-right:6px;">SEND</button>
<div class="sml-bnt" id="smile"></div>
<? }
else { ?>
<form method="get" action="index.php"><input type="hidden" name="login" value=""/><input type="submit" class="btn btn-primary" value="Log in to chat" style="margin-right:6px;"/></form>
<?php }
?>
</span> </div> </div> </div> </div>
<div class="col-xs-24 messages messages-img" style="width:250px;">
<?php if(isadmin($_SESSION['steamid'])){
echo'Admin tools: [clear chat], [turn '. (chaton() ? 'off' : 'on').']';
} ?>
<? include ('mini-chat.php'); ?>
</div> </div>
</div>
<div id="raffle"><div class="col-xs-24 raffle"> <div class="cont"> <div class="circle"> <img id="raffle-img"> </div> <h4 class="name" id="raffle-name"></h4>
<h4 id="countdown-raffle-timer" data-countdown="2020-08-08"></h4>
<a class="btn btn-default" href="?login">LOG IN</a> </div> </div> </div> </div> </div>
Try change method="get" to method="post"