I have one row and two columns in it. Right column's content overlaps to left column. Here is my codes.
Even in the large screen I see that (in below code) <div class="row hidden-xs" style="border-bottom: 2px solid lightgray;">
this border overlaps to left.
Here is how it looks
How do I prevent overlapping their contents?
<div class="row">
<div class="col-lg-2" style="letter-spacing: 1px;">
<img src="~/Content/images/kitap/kitap2.jpg" style="width:250px; height:350px;"/>
<h5><b>ISBN:</b>1234567891</h5>
<h5><b>Kapak Türü:</b> Sert Kapak</h5>
<h5><b>Baskı No:</b>16</h5>
<h5><b>Yayınevi:</b>Publishing </h5>
<h5><b>Yıl:</b> 2005</h5>
</div>
<div class="col-lg-10">
<ul class="nav nav-tabs">
<li class="active">Yeni ve 2. El</li>
<li>Kirala</li>
<li>Kitap Detaylı Bilgileri</li>
<li>Kitap Yorumları</li>
</ul>#*nav nav-tabs*#
<div class="tab-content">
<div class="tab-pane active" id="satinAl">
<div class="row hidden-xs" style="border-bottom: 2px solid lightgray;">
<div class="col-md-3">
<h5><b>Fiyat + Kargo</b></h5>
</div>
<div class="col-md-3">
<h5><b>Kitabın Durumu</b></h5>
</div>
<div class="col-md-3">
<h5><b>Tahmini Teslim Tarihi</b></h5>
</div>
<div class="col-md-3">
<h5><b>Satıcı Bilgileri</b></h5>
</div>
</div> #*Başlık 1. row*#
<div class="row">
<div class="col-md-3">
<h5><b>39.87 TL</b></h5>
<h6>3.99 TL Kargo</h6>
</div>
<div class="col-md-3">
<h5><b>Çok İyi</b></h5>
<h6>Kitap çok iyi durumdadır. Çizgi karalam yoktur. Çok iyi müşteri hizmetleri. Alan Memnun</h6>
</div>
<div class="col-md-3">
<h5><b>Feb. 24 - Mar. 3.</b></h5>
<h6>Satıcı İade Politikası</h6>
</div>
<div class="col-md-3">
<h5><b>Jenny Blue</b></h5>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
100% Pozitif
</div>
</div> #*Ilk Satıcı 2. row*#
</div>#*tab-pane active Satın Al*#
<div class="tab-pane" id="kirala">
<p>Çok yakında hizmetinizde</p>
</div>
</div>#*tab-content*#
</div>#*col-md-10*#
</div>#*row*#
To make columns to behave responsively you need to remove fixed dimensions of image:
<img src="~/Content/images/kitap/kitap2.jpg" style="width:250px; height:350px;"/>
and set class="img-responsive" to it:
<img src="~/Content/images/kitap/kitap2.jpg" class="img-responsive"/>
here is a working example
It is because the image is bigger than the column.
You need either to use bootstrap img-responsive class and remove the width and height attributes in img
or
make the cols bigger , ex: use col-lg-4 for the first column and col-lg-8 for the second column.
Related
I have some ads I want placing side by side and making all the same size but, whilst float: left works to get them to float left, display: inline-block, which should stack them in a grid side by side, and max-width doesn't.
Tried Css
#media (min-width: 768px){.box-
layout {max-width: 100%; float:
left; display: inline-block;}}
This, as mentioned, floats left but doesn't place side by side or make all the ads the same size. It also throws up a css lint obstruction that float and display can not be used together.
https://adsler.co.uk/find-an-event/
HTML:
<div class="line-layout"
style="display: none;">
<li class="event_listing post-6985
type-event_listing status-expired
hentry" style="visibility:
visible;" data-latitude="" data-
longitude="">
<div class="event-
info-row-listing">
<a href="https://adsler.co.uk/
event/new-cross-and-deptford-free-
film-festival/">
<div class="row"><div class="col-
md-1">
<div class="organizer-logo">
<img alt="Deptford Film Festival"
src="https://adsler.co.uk/wp-
content/uploads/event-manager-
uploads/event_banner/2019/05/2
456d41f16399aed538d25b1cd32ad1
4.jpg">
</div>
</div><div class="col-md-4">
<div class="event-title">
<h4>New Cross and
Deptford Free Film Festival</h4>
<div class="boxes-view-
listing-
registered-code">
</div>
<div class="event-
organizer-
name">
<normal>Deptford Film Festival
<normal></normal>
</normal>
</div>
</div>
<div class="col-md-2">
<div class="date"
<date>2019-05-26</date>
</div>
</div>
<div class="col-md-3">
<div class="event-
location"><i class="glyphicon
glyphicon-map-
marker"></i> London </div>
</div>
<div class="col-md-2">
<div class="event-
ticket">#free</div>
</div>
<div class="col-md-3">
</div>
</div>
</a>
</div>
</li>
</div>
<!-- Box Layout -->
<a class="event_listing post-6985
type-event_listing status-expired
hentry" href="https://adsler.co.uk
/event/new-cross-and-deptford-free-
film-festival/">
<div class="box-layout">
<div class="event-img"><img
alt="Deptford Film Festival"
src="https://adsler.co.uk/wp-
content/uploads/event-manager-
uploads/event_banner/2019/05/2
456d41f16399aed538d25b1cd32
ad14.jpg"></div>
<div class="boxes-view-box-
registered-code">
</div>
<div class="event-title">
New Cross and Deptford Free Film
Festival
</div>
<div class="event-start-
date">2019- 05-26
</div>
<div class="event-location">
<i class="glyphicon glyphicon-
map-
marker"></i> London </div>
<div class="box-footer">
<div class="event-
ticket">#free</div>
</div>
</div>
</a>
your html and css are quite chaotic.
I made an example how it should be and how it works.
Ps. don't pay attention to
max-width:800px;
thats just for demo purposes.
https://codepen.io/anon/pen/QXWLrg
Hope it helps you out!
Everyone I am try to develop a UI in which I have a list of category each category has some options.
The issue is pretty silly but not able find a correct solution for it when I expand a particular widget. the count of widget is changing which is on the left side and number widget is increased on the right side I want to fixed number widgets as shown on document is loaded. Example when widget expands is below
My code is like this given below
<div class="widget-body col-lg-12 no-padding">
<div class="row">
<div class="col-lg-6" ng-repeat="cat in category track by $index" >
<section class="widget " data-widgster-collapsed="true" style="margin-bottom:5px;margin-top:15px; ">
<header class="ui-sortable-handle" style=" border-top: 3px solid orange;">
<h5>
<span class="fw-semi-bold">{{cat.Name}}</span>
<div class="widget-controls" >
<a data-widgster="expand" title="" ng-click="show(cat.Id)" href="#" style="display: none;" data-original-title="Expand">
<i class="glyphicon glyphicon-chevron-right"></i>
</a>
<a ng-click="hide(cat.Id)" data-widgster="collapse" title="" href="#" data-original-title="Collapse">
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</div>
</h5>
</header>
<div class="widget-body">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-6 checkbox" ng-repeat="opt in cat.option">
<input id="{{cat.Id}}_{{opt.id}}" type="checkbox" ng-checked="{{opt.value}}" ng-model="opt.value">
<label for="{{cat.Id}}_{{opt.id}}">{{opt.name}}</label>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
So, on expand I want 5 widgets on left and 5 on right and there position must be fixed.
I have a problem. Now I have bunch of divs in my code and i am using bootstrap, what I want is to make my content with control buttons be inline in small devices (like phone).However, i get something like this:
but that button should be in same line. Here is my code:
<div class='container-fluid info text-center'>
<h1>Truputėlis apie mane</h1>
<div class='row'>
<div class='col-xs-1 col-sm-1 col-md-4'>
<a href='#'><div class='controls left'><span class='glyphicon glyphicon-triangle-left' class='controls'></span>
</div></a>
</div>
<div class='col-xs-10 col-sm-10 col-md-4 about_me'>
<div style='background: url(notebook8.png);font-family: Dynalight; font-size:28px;padding-top:15px;padding-left:50px;padding-bottom:5px;margin:0 auto;border:1px solid grey;'>
<img src='http://www.arlongpark.net/customavatars/avatar23489_6.gif' style='width:80px; height:80px; background-color:white; border:1px solid black; border-radius:150px;'><br/>
<div class='about_me_text text-left'>
</div>
</div>
</div>
<div class='col-xs-1 col-sm-1 col-md-4'></div>
<a href='#' >
<div class='controls right'>
<span class='glyphicon glyphicon-triangle-right'></span>
</div>
</a>
</div>
</div>
</div>
What should I do? Sorry for my terrible english, hope you understood something...
I want the three div containers to line up side by side with a max-width of 1044px. I tried using col-md-4, because I have margin:20px, it pushed the third div container to the second row. I read up online, some people suggested using a div class="row", I tried that, end result is the same.
Here is my HTML:
<div class="engineering-section col-xs-12">
<div class="engineering-section-title title-text text-center">Engineering</div>
<div class="row">
<div class="card-container">
<div class="card-section col-md-4">
<div class="mdl-card__media">
<img src="img/engineer-1.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Enginnering Suite (May 2015)</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>
</div><!--end card_actions-->
</div><!--end mdl-cell-->
<div class="card-section col-md-4">
<div class="mdl-card__media">
<img src="img/engineer-2.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Process Manuals and Process Tools</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>
</div><!--end card_actions-->
</div><!--end mdl-cell-->
<div class="card-section col-md-4">
<div class="mdl-card__media">
<img src="img/engineer-3.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">Aspen License Deployment Assistant</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>`enter code here`
</div><!--end card_actions-->
</div><!--end mdl-cell-->
</div><!--end row-->
</div><!--end card-container-->
Remove custom styles of margin from card-section class. It will work
You have to follow these 3 rules :
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
It should look like this :
<div class="container-fluid"><!--<div class="container">-->
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
See this link for more information about the Bootstrap responsive design :
http://getbootstrap.com/css/
You are doing wrong here
<div class="card-section col-md-4">
Put card-section inside col-md-4
<div class="col-md-4">
<div class="card-section">
it can give you the space between 3 cols and you can style the content too
and remove margin: 20px; it's unnecessary now.
Fiddle example
I use bootstrap on my current project, it's working fine but only one glitch:
I have 3 col-sm-6 next to each other, when the second col-sm-6 is longer than the first, third col-sm-6 moves to left and a gap appears between first and third one.
I have 2 points to ask about:
Is it possible / how to remove that gap.
Is it possible / how to fix the third .col-sm-6 .tasks-panel to left.
Here is 2 images demonstrate what problem I have:
Second col-sm-6 is short:
Second col-sm-6 is longer than the first:
My html structure goes like this:
<h4><span data-head-year></span> <span data-head-month></span></h4>
<a class="pull-right" id="today"><div class="btn btn-primary" style="margin:3px">Today</div></a>
</div>
<hr style="margin: 20px 0"/>
<div class="day-headers">
<div class="day header">Mon</div>
<div class="day header">Tue</div>
<div class="day header">Wed</div>
<div class="day header">Thu</div>
<div class="day header">Fri</div>
<div class="day header">Sat</div>
<div class="day header">Sun</div>
</div>
<div class="days" data-group="days">
<!-- the place where days will be generated -->
</div>
</div>
<!-- Responsive calendar - END -->
</div>
Outlets to visit
<div class="template outlet-wrapper" style="display: none">
<div class="outlet-header">
<div class="col-xs-6">
<h4 class="outlet-name"></h4>
</div>
<div class="col-xs-6 text-right">
<h5 class="tools" style="display: none">
<i class="icon-repeat repeat"></i>
<span class="glyphicon glyphicon-remove remove"></span>
</h5>
</div>
</div>
<div class="clearfix"> </div>
<div class="outlet-body">
<div class="col-sm-6">
Time to reach: <spane class="time-to-reach"></spane>
</div>
<div class="col-sm-6">
Time to leave: <span class="time-to-leave"></span>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-primary pull-right" id="add-outlet"> Add Visit </button>
<div class="clearfix"></div>
</div>
</div>
Tasks List
</div>
<div class="panel-footer">Panel Footer</div>
</div>
Sorry for bad format, I don't know why stackoverflow editor breaks my html code; I have tried (Ctrl + K, <pre><code>) but none of them worked !
If you're interested in seeing my code properly, please show my post in editor.
Thanks in advanced.
Update:
A Codepen is available here, press add visit to see what happens if second column is long.
Have you tried to apply "pull-right" to the "col-sm-6" container of "panel panel-primary outlets-panel"?
<div class="col-sm-6 pull-right">
<div class="panel panel-primary outlets-panel">
<div class="panel-heading">
...
Forked Codepen
You'll still have to fix the above space of the "tasks list" container, but that should be trivial.