I have a grid with a left sidebar and a main content. I'm trying to position a search field on top of the left sidebar, but I can't get it to work. The code is:
<div class="cell medium-auto medium-cell-block-container"> <!-- MAIN CONTENT -->
<div class="grid-x grid-padding-x"> <!-- GRID -->
<div class="cell medium-2 medium-cell-block padding-top-1" data-sticky-container> <!-- LEFT SIDEBAR -->
<div class="input-group sticky" data-sticky data-margin-top="0">
<input class="input-group-field" type="search" id="inputSearch" name="inputSearch" #inputSearch placeholder="Search objects..." (keyup)="onSearchType($event.target.value)">
<div class="input-group-button">
<button class="button primary" [disabled]="!inputSearch.value.length" (click)="onSearchType(''); inputSearch.value=''">Clear</button>
</div>
</div>
<ul class="accordion" data-accordion data-multi-expand="true">
<li class="accordion-item is-active" data-accordion-item>
[....]
</li>
<li class="accordion-item is-active" data-accordion-item>
[....]
</li>
<li class="accordion-item is-active" data-accordion-item>
[....]
</li>
</ul>
</div> <!-- LEFT SIDEBAR -->
<div class="cell medium-10 medium-cell-block padding-top-1"> <!-- CONTENT -->
[....]
</div> <!-- CONTENT -->
</div> <!-- GRID -->
</div> <!-- MAIN CONTENT -->
What I want to position is the 'input-group sticky' div inside the left sidebar. Am I missing something? Thanks!
Related
I have the following code:
<div class="mainptext">
<h3><strong>Learn the following:</strong></h3>
<div class="container">
<div class="row">
<div class="col-6">
<ul>
<li>Lifts</li>
<li>False Deals</li>
<li>Side Slips</li>
<li>Passes</li>
<li>Palming</li>
<li>False Shuffles</li>
</ul>
</div>
<div class="col-6">
<ul>
<li>False Cuts</li>
<li>Color Change</li>
<li>Crimps</li>
<li>Jogs</li>
<li>Peaks</li>
<li>Glides</li>
<li>Reverses</li>
</ul>
</div>
</div>
</div>
</div>
No matter what I do, the result is the second column appears directly below the other.
The Margin - 100% and it shouldn't be.
I used the following https://getbootstrap.com/docs/4.1/layout/grid/#equal-width for reference.
I've been doing web development for over 35 yrs and this, so very simple, is kicking me.
This code lives inside an article tag. It's not full width of the page but a piece of it.
"NOTE: Ignore the DJ equipment. That picture will be replaced"
Here's the section that holds the box:
<!-- Main -->
<div id="main" class="site-main container_12">
<!-- Left column -->
<div id="primary" class="grid_8">
<!-- About Us -->
<article class="single-post">
<header class="entry-header grad1">
<h1 id="equipTitle" class="entry-title">Welcome to our Magic Shop</h1>
<div class="clear"></div>
</header>
<div class="entry-content">
<br>
<!-- Magic Page 1 -->
<div id="magic1" class="entry-content-post equip-box-1">
<h3><strong>Card Magic Overview</strong></h3>
<p class="mainptext">Card manipulation is the branch of magic that deals with creating effects using sleight of hand techniques involving playing cards. Card manipulation is often used in magical performances, especially in close-up, parlor,
and street magic. This is how I learned.</p>
<div class="mainptext">
<h3><strong>Learn the following:</strong></h3>
<div class="container">
<div class="row">
<div class="col-6">
<ul>
<li>Lifts</li>
<li>False Deals</li>
<li>Side Slips</li>
<li>Passes</li>
<li>Palming</li>
<li>False Shuffles</li>
</ul>
</div>
<div class="col-6">
<ul>
<li>False Cuts</li>
<li>Color Change</li>
<li>Crimps</li>
<li>Jogs</li>
<li>Peaks</li>
<li>Glides</li>
<li>Reverses</li>
</ul>
</div>
</div>
</div>
</div>
<p class="mainptextnext">Click NEXT to continue...</p>
<div class="grid_4 margin-bottom slider-arrow arrow-box-1">
<a class="prevslidee load-item" onclick="funcs.goLeft('magic1','magic0')">Prev</a>
<a class="nextslidee load-item" onclick="funcs.goRight('magic1','magic2')">Next</a>
</div>
....
Thoughts?
UPDATE: This is what I see in the DEV console
Then the console log:
I just copy and paste your html elements and its working fine I using Bootstrap Version 4.1.3 as CDN.
I think override style on columns so need to find which style is override from Inspect Element.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="mainptext">
<h3><strong>Learn the following:</strong></h3>
<div class="container">
<div class="row">
<div class="col-6">
<ul>
<li>Lifts</li>
<li>False Deals</li>
<li>Side Slips</li>
<li>Passes</li>
<li>Palming</li>
<li>False Shuffles</li>
</ul>
</div>
<div class="col-6">
<ul>
<li>False Cuts</li>
<li>Color Change</li>
<li>Crimps</li>
<li>Jogs</li>
<li>Peaks</li>
<li>Glides</li>
<li>Reverses</li>
</ul>
</div>
</div>
</div>
</div>
I have a problem with bootstrap row/cell position.
I am generating 6 col in one row and on my dev env locally I dont have this issue, but on production one cell is moved into like third row.
Here is how its looks:
https://screenshots.firefox.com/byRFg1d6kWAPKbc0/www.javascript.ba
Here is also html:
My goal is to have this six cells in two rows
<div class="sections">
<h2 class="heading">Most Viewed News Today</h2>
<div class="clearfix"></div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<!-- Video Box Start -->
<div class="videobox2">
<figure>
<!-- Video Thumbnail Start -->
<a href="/posts/the-best-node-js">
<img alt="" class="img-responsive hovereffect height14em" src="/system/posts/images/000/000/058/original/open-uri20180902-27786-uhm319.jpg?1535909323">
</a> <!-- Video Thumbnail End -->
<!-- Video Info Start -->
<div class="vidopts">
<ul>
<li><i class="fa fa-eye"></i>43</li>
<li><i class="fa fa-clock-o"></i>02:14 02/09/18</li>
</ul>
<div class="clearfix"></div>
</div>
<!-- Video Info End -->
</figure>
<!-- Video Title Start -->
<h4>The Best Node.js </h4>
<!-- Video Title End -->
</div>
<!-- Video Box End -->
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<!-- Video Box Start -->
<div class="videobox2">
<figure>
<!-- Video Thumbnail Start -->
<a href="/posts/quasar-framework">
<img alt="" class="img-responsive hovereffect height14em" src="/system/posts/images/000/000/053/original/open-uri20180902-27786-1f5glft?1535899755">
</a> <!-- Video Thumbnail End -->
<!-- Video Info Start -->
<div class="vidopts">
<ul>
<li><i class="fa fa-eye"></i>24</li>
<li><i class="fa fa-clock-o"></i>02:14 02/09/18</li>
</ul>
<div class="clearfix"></div>
</div>
<!-- Video Info End -->
</figure>
<!-- Video Title Start -->
<h4>Quasar Framework</h4>
<!-- Video Title End -->
</div>
<!-- Video Box End -->
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<!-- Video Box Start -->
<div class="videobox2">
<figure>
<!-- Video Thumbnail Start -->
<a href="/posts/dependency-injection-smart-table-advanced-patterns">
<img alt="" class="img-responsive hovereffect height14em" src="/system/posts/images/000/000/024/original/javascript1.jpg?1535792343">
</a> <!-- Video Thumbnail End -->
<!-- Video Info Start -->
<div class="vidopts">
<ul>
<li><i class="fa fa-eye"></i>5</li>
<li><i class="fa fa-clock-o"></i>08:08 01/09/18</li>
</ul>
<div class="clearfix"></div>
</div>
<!-- Video Info End -->
</figure>
<!-- Video Title Start -->
<h4>Dependency Injection & Smart Table: Advanced Patterns</h4>
<!-- Video Title End -->
</div>
<!-- Video Box End -->
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<!-- Video Box Start -->
<div class="videobox2">
<figure>
<!-- Video Thumbnail Start -->
<a href="/posts/the-best-node-js">
<img alt="" class="img-responsive hovereffect height14em" src="/system/posts/images/000/000/058/original/open-uri20180902-27786-uhm319.jpg?1535909323">
</a> <!-- Video Thumbnail End -->
<!-- Video Info Start -->
<div class="vidopts">
<ul>
<li><i class="fa fa-eye"></i>43</li>
<li><i class="fa fa-clock-o"></i>02:14 02/09/18</li>
</ul>
<div class="clearfix"></div>
</div>
<!-- Video Info End -->
</figure>
<!-- Video Title Start -->
<h4>The Best Node.js </h4>
<!-- Video Title End -->
</div>
<!-- Video Box End -->
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<!-- Video Box Start -->
<div class="videobox2">
<figure>
<!-- Video Thumbnail Start -->
<a href="/posts/quasar-framework">
<img alt="" class="img-responsive hovereffect height14em" src="/system/posts/images/000/000/053/original/open-uri20180902-27786-1f5glft?1535899755">
</a> <!-- Video Thumbnail End -->
<!-- Video Info Start -->
<div class="vidopts">
<ul>
<li><i class="fa fa-eye"></i>24</li>
<li><i class="fa fa-clock-o"></i>02:14 02/09/18</li>
</ul>
<div class="clearfix"></div>
</div>
<!-- Video Info End -->
</figure>
<!-- Video Title Start -->
<h4>Quasar Framework</h4>
<!-- Video Title End -->
</div>
<!-- Video Box End -->
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<!-- Video Box Start -->
<div class="videobox2">
<figure>
<!-- Video Thumbnail Start -->
<a href="/posts/dependency-injection-smart-table-advanced-patterns">
<img alt="" class="img-responsive hovereffect height14em" src="/system/posts/images/000/000/024/original/javascript1.jpg?1535792343">
</a> <!-- Video Thumbnail End -->
<!-- Video Info Start -->
<div class="vidopts">
<ul>
<li><i class="fa fa-eye"></i>5</li>
<li><i class="fa fa-clock-o"></i>08:08 01/09/18</li>
</ul>
<div class="clearfix"></div>
</div>
<!-- Video Info End -->
</figure>
<!-- Video Title Start -->
<h4>Dependency Injection & Smart Table: Advanced Patterns</h4>
<!-- Video Title End -->
</div>
<!-- Video Box End -->
</div>
</div>
</div>
You could just make 2 rows instead of 1
Each column having col-lg-4 col-md-4 col-sm-4 col-xs-12 (so you would have 3 "cells" in each row) - but of course on smaller screens you have to adjust, hence the col-xs-12
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><img src="https://picsum.photos/200"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><img src="https://picsum.photos/200"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><img src="https://picsum.photos/200"></div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><img src="https://picsum.photos/200"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><img src="https://picsum.photos/200"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><img src="https://picsum.photos/200"></div>
</div>
I have a sticky top-bar, ie something like:
<div id="main-navigation" class="top-bar-container" data-sticky-container>
<div class="sticky sticky-topbar" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">
<strong>My Brand</strong>
</li>
</ul>
</div>
</div>
</div>
</div>
And now I have a row that I want to stick to it, but it does not work properly (it sticks to the top of the page when I scroll):
<div class="filter-row row" data-sticky-container>
<div class="sticky column expanded" data-sticky data-top-anchor="main-navigation:bottom">
</div>
</div>
P.S.: the main-navigation sticks properly.
Hi so I am using foundation to create a navigation bar and would like to achieve the effect seen in the photo where the logo box overlaps the content below it however currently it is expanding the height of the whole navigation bar and not just the logo section.
What I would like it to look like:
What it is looks now:
HTML
<div class="row">
<div class="logo large-3 columns">
<ul class="menu">
<li class="menu-text"><?php bloginfo('name'); ?></li>
</ul>
</div>
<div class="large-9 columns">
<div class="large-12 infobar ">
<div class="hide-for-small-only hide-for-medium-only row">
<div class="large-3 info_numbers columns grey info_padding">
20°C
</div>
<div class="large-2 columns info_numbers info_padding no-padding grey "> <i class="fa fa-phone icon-padding"></i>018803 294110</div>
<div class="large-4 columns smaller-font info_padding grey no-padding"><i class="fa fa-envelope-o icon-padding"></i>STAY#GROSVENORHOUSEHOTEL.CO.UK</div>
<div class="large-3 columns no-padding text-right">
check availability
</div>
</div>
</div>
<div class="row ">
<div class="large-12 header_info">
<header class="no-padding top-bar-item " role="banner">
<!-- This navs will be applied to the topbar, above all content
To see additional nav styles, visit the /parts directory -->
<?php get_template_part( 'parts/nav', 'topbar' ); ?>
</header> <!-- end .header -->
</div>
CSS
.logo {
background-color: $secondary-color;
min-height:10em;
position:relative;
z-index:99;
}
Give .logo a position of absolute instead of relative, and give it an explicit height and width.
I try to create a side menu and an items list with bootstrap, but i get a margine shift error see what it looks like. I have modified the thumnail html structure so the image would be at the left
this is the html of the file
<div class="row-fluid">
<!-- LEFT SIDE CATEGORIES-->
<div class="span3">
<div class="well" >
<ul id="cat-navi" class="nav nav-list">
<li class="nav-header">Shop by Product</li>
<li class="active">Active category</li>
<li>New in: Category</li>
</ul>
</div>
<!-- /well-->
</div>
<!-- /left SIDE-->
<!-- CONTENT SIDE-->
<div id="fixthis" class="span9">
<div class="row-fluid articles-grid">
<!-- ITEM -->
<div class="thumbnail span12">
<!-- IMAGE CONTAINER-->
<div class="span6"> <img src="images/thumb.jpg" alt="post image" /> </div>
<!--END IMAGE CONTAINER-->
<!-- CAPTION -->
<div class="span6">
<div class="caption">
<h3 class="">Featured product title</h3>
<p class="">This project presents beautiful style graphic & design. Bootstraptor provides modern features</p>
<p> <a class="" href="#" title="">Read more →</a> </p>
</div>
</div>
<!--END CAPTION -->
</div>
<!-- END ITEM -->
<!-- ITEM -->
<div class="thumbnail span12">
<!-- IMAGE CONTAINER-->
<div class="span6"> <img src="images/thumb.jpg" alt="post image" /> </div>
<!--END IMAGE CONTAINER-->
<!-- CAPTION -->
<div class="span6">
<div class="caption">
<h3 class="">Featured product title</h3>
<p class="">This project presents beautiful style graphic & design. Bootstraptor provides modern features</p>
<p> <a class="" href="#" title="">Read more →</a> </p>
</div>
</div>
<!--END CAPTION -->
</div>
<!-- END ITEM -->
</div>
<div class="row-fluid">
<div class="well">
<div class="row-fluid">
<div class="span8">
<p class="lead text-center"> YOUR RECENT MARKETING SLOGAN OR OFFER! </p>
</div>
<div class="span4"> <a class="btn btn-warning btn-large btn-block" href="#">BUY NOW!</a> </div>
</div>
</div>
</div>
</div>
<!-- /CONTENT SIDE-->
</div>
how do i fix this?
Edit: New html
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="thumbnail">
<!-- IMAGE CONTAINER-->
<div class="span6"> <img src="images/thumb.jpg" alt="post image" /> </div>
<!--END IMAGE CONTAINER-->
<!-- CAPTION -->
<div class="span6">
<div class="caption">
<h3 class="">Featured product title</h3>
<p class="">This project presents beautiful style graphic & design. Bootstraptor provides modern features</p>
<p> <a class="" href="#" title="">Read more →</a> </p>
</div>
</div>
<!--END CAPTION -->
</div>
</div>
<div class="row-fluid">
<div class="thumbnail">
<!-- IMAGE CONTAINER-->
<div class="span6"> <img src="images/thumb.jpg" alt="post image" /> </div>
<!--END IMAGE CONTAINER-->
<!-- CAPTION -->
<div class="span6">
<div class="caption">
<h3 class="">Featured product title</h3>
<p class="">This project presents beautiful style graphic & design. Bootstraptor provides modern features</p>
<p> <a class="" href="#" title="">Read more →</a> </p>
</div>
</div>
<!--END CAPTION -->
</div>
</div>
</div>
</div>
You are supposed to put a new fluid row after every span.
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span6">
<!-- content -->
</div>
<div class="span6">
<!-- content -->
</div>
</div>
</div>
</div>
But, anyway there is an useless span12, you can just directly use the two span6:
<div class="row-fluid">
<div class="span6">
<!-- content -->
</div>
<div class="span6">
<!-- content -->
</div>
</div>
using your last HTML, you are missplacing the thumbnail div, remove it completely and add to the img wraper div, so the wrpper would be span6 thumbnail
here's the DEMO: http://jsfiddle.net/balexandre/dj3AW/
and the code:
<div class="row-fluid">
<!-- LEFT SIDE -->
<div class="span3">
<div class="well" >
<ul id="cat-navi" class="nav nav-list">
<li class="nav-header">Shop by Product</li>
<li class="active">Active category</li>
<li>New in: Category</li>
</ul>
</div>
<!-- /well-->
</div>
<!-- RIGHT SIDE -->
<div class="span9">
<div class="row-fluid">
<div class="span12">
<!-- 1st ROW -->
<div class="row-fluid">
<!-- IMAGE CONTAINER-->
<div class="span6 thumbnail">
IMG
</div>
<!--END IMAGE CONTAINER-->
<!-- CAPTION -->
<div class="span6">
<div class="caption">
<h3 class="">Featured product title</h3>
<p class="">This project presents beautiful style graphic & design. Bootstraptor provides modern features</p>
<p> <a class="" href="#" title="">Read more →</a> </p>
</div>
</div>
<!--END CAPTION -->
</div>
<!-- 2nd ROW -->
<div class="row-fluid">
<!-- IMAGE CONTAINER-->
<div class="span6 thumbnail">
IMG
</div>
<!--END IMAGE CONTAINER-->
<!-- CAPTION -->
<div class="span6">
<div class="caption">
<h3 class="">Featured product title</h3>
<p class="">This project presents beautiful style graphic & design. Bootstraptor provides modern features</p>
<p> <a class="" href="#" title="">Read more →</a> </p>
</div>
</div>
<!--END CAPTION -->
</div>
</div>
</div>
</div>
</div>