I have a problem where I need to be able to scroll on mobile for a specific piece of content.
So I have a row lets say, the left half of it I want to stay as is - the right half of it will need the content in it to overflow and be able to scroll. So that part of the row would extend out past the screen width and the user could scroll the content.
How would I go about this?
Currently I have my rows setup as I need them but anytime I put more content in the right hand side it tries to push it underneath the current content.
Ignore any custom css they just make changes to base padding.
<div class="row">
<div class="row">
<div class="small-6 columns smallpadding-right">
<div class="small-5 columns">
<img class="productImg" src="images/sub_subcategories/airtools.jpg">
</div>
<div class="small-5 columns font10 nopadding">
Brooks DeWalt D25123K-GB <br />
Remove
</div>
<div class="small-2 columns smallpadding">
<img class="arrows" src="images/arrow_up.png"/>
</a><input class="input-padding" type="text" value="21"/>
<img class="arrows" src="images/arrow_down.png"/></a>
</div>
</div>
<div class="small-6 columns">
<div class="small-6 columns">
<img class="productImg" src="images/sub_subcategories/airtools.jpg">
</div>
<div class="small-6 columns">
<img class="productImg" src="images/sub_subcategories/airtools.jpg">
</div>
</div>
</div>
</div>
according to How to enable overflow scrolling within a Semantic Ui Grid? and CSS: series of floated elements without wrapping but rather scrolling horizontally (duplicates??)
You should, if i understand your question well be able to fix your issue with the HTML like that shown beneath:
<div class="row">
<div class="small-6 columns smallpadding-right">
<div class="row">
<div class="small-5 columns">
<img class="productImg" src="images/sub_subcategories/airtools.jpg">
</div>
<div class="small-5 columns font10 nopadding">
Brooks DeWalt D25123K-GB <br />
Remove
</div>
<div class="small-2 columns smallpadding">
<img class="arrows" src="images/arrow_up.png"/>
</a><input class="input-padding" type="text" value="21"/>
<img class="arrows" src="images/arrow_down.png"/></a>
</div>
</div>
</div>
<div class="small-6 columns">
<div class="row" style="overflow-x:scroll; white-space: nowrap">
<div class="small-6 columns" style="display:inline-block; float: none;">
<img class="productImg" src="images/sub_subcategories/airtools.jpg" alt="1">
</div>
<div class="small-6 columns" style="display:inline-block; float: none;">
<img class="productImg" src="images/sub_subcategories/airtools.jpg" alt="2">
</div>
<div class="small-6 columns" style="display:inline-block; float: none;">
<img class="productImg" src="images/sub_subcategories/airtools.jpg" alt="3">
</div>
<div class="small-6 columns" style="display:inline-block; float: none;">
<img class="productImg" src="images/sub_subcategories/airtools.jpg" alt="4">
</div>
</div>
</div>
</div>
Notice the inline styles style="display:inline-block; float: none;" and style="overflow-x:scroll; white-space: nowrap" which can be replace with CSS and classes.
Demo: http://sassmeister.com/gist/9530d90ef425eb805da6
Related
I am using bootstrap 4. I have 3 columns in a single row. One of the columns contains a list and the other two do not. I want only the column with the list to be scrollable but not the entire container, which means that the scrollbar muss appear only within that column.
I would appreciate any help.
<div class="row">
<div class="col-sm-4">
<div class="card">...
<div class="col-sm-4">
<div class="card">...
<div class="col-sm-4">
<div class="card">...
</div>
You could do something like this:
<div class="row">
<div class="col-sm-4">
<div class="card">...</div>
</div>
<div class="col-sm-4 scroll">
<div class="card">...</div>
</div>
<div class="col-sm-4">
<div class="card">...</div>
</div>
</div>
then in your css:
.scroll {
max-height: 100px;
overflow-y: auto;
}
I am trying to learn Bulma and I want to show a simple page with this layout:
<header>
<hero>
<section>
<footer>
I don't understand why they overlap with each other instead of being clearly one below the other.
There is a dummy container that is obviously misplaced and hidden by the header.
The overlapping is also obvious by the search bar that is both over part of the footer and the hero.
https://codepen.io/anon/pen/bLgOWb
<nav class="navbar is-primary is-fixed-top has-text-white">
<div class="container">
<div class="navbar-brand">
<img id="logo" alt="DUB Logo" src="http://code.dlang.org/images/dub-header.png"/>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<div id="navItem" class="navbar-item">Primo</div>
</div>
</div>
</div>
</nav>
<section class="section">
<div class="container dummy">
</div>
</section>
<div class="hero ">
<div class="container has-text-centered is-size-1">
<h1 class="title"> Explore and use libraries and software</h1>
</div>
</div>
<div id="search" class="container">
<div class="columns searchBlock ">
<div class="column is-paddingless">
<form>
<input class="input searchInput" type="text" placeholder="Search">
</form>
</div>
<div class='column is-3 is-paddingless'>
</div>
<div class='column is-2 is-paddingless'>
<a class='button is-primary searchButton'>Search</a>
</div>
</div>
</div>
<footer class="footer">
<div class="container is-text-centered">
<p> Footer </p>
</div>
</footer>
<script src="old.js"></script>
.hero-body is missing
<div class="hero">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title"> Explore and use libraries and software </h1>
</div>
</div>
</div>
Bulma - Hero
I think problem with column . change column margin follow this
.columns {
marign:0;
}
I have 6 columns without problem inside of div but i want to add more columns. I can't add more columns properly because of gaps between columns.I read something about margins but i couldn't do it. So how can i reduce spaces between columns? And is there anyway to resize width of columns according to number of columns? Here is my HTML code(sample for 2 columns) :`
<div class="row-fluid hideInIE8 circleStats">
<div class="span2" onTablet="span4" onDesktop="span2">
<div ID="ID1" class="circleStatsItemBox red">
<div ID="Mach_Name_1" class="header">1</div>
<span class="percent"></span>
<div class="circleStat">
<div id="g1"></div>
</div>
<div id="f1" class="footer">
<span class="number">hours</span>
</div>
</div>
</div>
<div class="span2" onTablet="span4" onDesktop="span2">
<div ID="ID1" class="circleStatsItemBox red">
<div ID="Mach_Name_2" class="header">2</div>
<span class="percent"></span>
<div class="circleStat">
<div id="g1"></div>
</div>
<div id="f1" class="footer">
<span class="number">hours</span>
</div>
</div>
</div>
</div>
I have the following bootstrap code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
On tablets and desktops, this code looks good. However, on smaller devices, xs, the right content flows into the image. I am trying to make the text just wrap on the right and not collide with the image.
I have a fiddle here so you can see what I'm talking about. If you open the fiddle and resize the browser small enough, you'll see the right text overlap onto the image. How can I prevent this?
Try this.
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img class="img-responsive" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-9 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
It is because of the width set.
Try this.
JSFiddle
HTML
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="background-color: #ccc">
<img class="test-image" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
CSS
.test-image{
width:100%;
height:auto;
min-width:25px;
}
Easiest way I know is to apply a direct width to element. You could theoretically alter the bootstrap 3 SCSS or LESS (whichever you use) and add in a special column class, but this is the most direct method.
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div style="width:75px" class="col-xs-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
It is becaue of the width of the col-xs-2.You can chage that.Or try an alternative solution like this
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div style="width: 75px; background-color: #ccc;display:table-cell;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="display:table-cell;vertical-align:middle;">
Right content
</div>
</div></div></div>
Or with css flexboxes like
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" style="display:flex">
<div style="width: 75px; background-color: #ccc;flex:1;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="flex:1;vertical-align:middle;">
Right content
</div></div></div></div>
This is my HTML code :
<div class="container">
<div class="row">
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
<div class="col-sm-3">
<img src="http://placehold.it/300x600">
</div>
</div>
<div class="row">
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
<div class="col-sm-3">
<img src="http://placehold.it/274x175">
</div>
</div>
</div>
This is the output :
https://jsfiddle.net/bnxxkLzv/
After the right banner that has height of 600 pixels , second row is starting. What i want to achieve is to make second row start below the first on the left to 300x600 banner , by lets say some fixed margin of 15px . How can this be achieved?
Here is an idea how to stack 2 rows side by side
Design the page as columns and it will be easy to stack it side by side just like nested columns
Look at this DEMO
To add margin you can declare a class wherever you deem fit and give property value