i am having problem with re-size browser window
when i re-size the window customer login button does not come within the body
how to fix that issue i have given margin on it thats the problem
<div class="inner clearfix" style="margin-left: 1000px;">
<div class="logo">
Customer Login
</div>
</div>
http://jsfiddle.net/48y2Q/1/embedded/result/
http://jsfiddle.net/48y2Q/1/
You gave it a fixed margin:
margin-left: 1000px;
So it'll be 1000px from the left all the time. Change it to the following, for example:
float: right;
You can do this to make it aligned to the right:
<div style="margin-right: 50px; text-align: right;" class="inner clearfix">
<div class="logo">
<a class="customerLogin" href="">
Customer Login
</a>
</div>
</div>
Related
This is the code I've pulled. I don't know how to push the footer widget down to the bottom of the page. The footer sits at the bottom for other pages because there isn't a lot of content but on one page, it sits in the middle of the content.
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="container">
<div class="row">
<div id="footer-widget-area" class="row">
<div class="footer-widgets-1 col-md-12"></div>
</div>
<aside id="black-studio-tinymce-4" class="widget_black_studio_tinymce widget well">
<div class="textwidget">
<h6 style="text-align: center;">
<span style="color: #000000;">© 2016 xxxx LLC | Location| Phone Number | email#gmail.com</span>
<br>
<em>
<span style="color: #000000;"> All photos, designs, layouts, and content on this website, including blog, are under copyright, unless otherwise noted. If you would like to borrow an image and/or content, kindly request for permission.</span>
</em>
</h6>
</div>
</aside>
<div class="col-md-9">
<div class="site-info"></div>
<div class="attribution">
<span class="attribution-theme-mods">
Special Thanks
</span>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
</footer>
</div>
<div style="display:none"></div>
The attribution, display none is for WordPress attribution that I don't want to display.
Here's a working version:
http://jsbin.com/qepuxay/edit?html,css,output
Critical CSS:
html {
height: 100%;
}
body {
min-height: 100%;
padding-bottom: 140px;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 140px;
border-top: 1px solid red;
}
Note: this requires that the height of the footer is 'known' - I have set it to 140px, with 140px added as padding to body. I have also added a red border-top for visual purposes.
Sorry for the title, couldn't think about a better description for now.
Situation: Mouse over the progress bar to show a title. The small area (in my real case it is bigger) from the gray that mix with the green did not show the title. Looks like the number is a layer ahead of the progress bar.
http://jsfiddle.net/w6fpszkx/
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading text-center">Title</div>
<div class="panel-body" style="padding: 0px 15px 15px 15px;">
<p class="text-center" style="font-size: 110px; line-height: 1;">82<span style="font-size: 23px;">%</span></p>
<div class="progress">
<div title="" data-html="true" class="progress-bar progress-bar-success" style="width: 82%" data-original-title="ON TIME<br><span class='label label-success' style='display: inline-block; width: 100%; margin-bottom: 5px;'>9 (82%)</span>">
<span>9 (82%)</span>
</div>
<div title="" data-html="true" class="progress-bar progress-bar-danger" style="width: 18%" data-original-title="EXPIRED<br><span class='label label-danger' style='display: inline-block; width: 100%; margin-bottom: 5px;'>2 (18%)</span>">
<span>2 (18%)</span>
</div>
</div>
</div>
</div>
</div>
Is it possible to reduce the top and bottom gray area from the "82" number to the top and bottom limits of the numbert itself? Thanks.
Yes. you have to adjust better the line-height of your element.
.text-center {
line-height: 0.75;
}
(and I removed the value "1" you added as style online in the html)
JSFIDDLE
Edited: But to be sure your tooltip will always show just add:
.progress {
position:relative;
z-index:1;
}
so your bar will always be OVER the number:
updated FIDDLE
I'm having an issue with css scroll bars working the way I need them to. I have a modal footer that pulls JPG images via ajax. I have 3 div elements, side by side within that modal footer, one for each type of photo I'm pulling.
I want all the photos to flow horizontally within their respective divs with horizontal scrollbars only if needed and no vertical scroll bars at all. The pictures are 75x75 pixels each. I have the following code:
<div class="modal-footer">
<div id="photodiv" class="pull-left" style="padding:0px 2px; max-width:300px; max-height:80px; overflow: auto; border:1px solid gray;">
<div id="photoProgress" class="progress progress-striped active">
<div class="bar" style="width:100%;"></div>
</div>
<div><h3>Looking for photos...</h3></div>
</div>
<div id="notePhotoDiv" class="pull-left" style="padding: 0px 2px; max-width: 300px; max-height: 80px; overflow: auto; border: 1px solid gray;">
<div id="noteProgress" class="progress progress-striped active">
<div class="bar" style="width:100%;"></div>
</div>
<div><h3>Looking for progress notes...</h3></div>
</div>
<div id="pathPhotoDiv" class="pull-left" style="padding: 0px 2px; max-width: 300px; max-height: 80px; overflow: auto; border: 1px solid gray;">
<div id="pathProgress" class="progress progress-striped active">
<div class="bar" style="width:100%;"></div>
</div>
<div><h3>Looking for path reports...</h3></div>
</div>
<p>
<input class="btn btn-primary" type="button" id="save" value="Save" />
<input class="btn btn-secondary" type="button" id="cancel" value="Cancel" />
</p>
</div>
I have tried changing overflow property in all sorts of different ways and can't seem to get it to work.
I've tried adjusting overflow-x, overflow-y, overflow, I've tried changing from auto to hidden, scroll, visible.
The code currently has vertical scroll bars only. Can someone please point me in the right direction? I unfortunately can't provide a jsfiddle because it's for an intranet site and is pulling photos from an internal server. If need be I can provide screenshots of what it looks like.
I think I get what you're looking for. The problem is that you probably need white-space:nowrap; to keep the images in a line rather than wrapping to the next line. See this example:
http://jsfiddle.net/F8JPq/
Can anybody please help me align the Cancel button to the right of the progress bar? I've tried float and display inline with no success, and I'm out of ideas.
Here's the code:
<div class="row">
<div class="progress progress-striped active" style="width: 500px; margin: 0px auto; height: 40px;">
<div id="progressbar" class="progress-bar progress-bar-success" role="progressbar" style="width:20%;"></div>
</div>
<div style="display: inline;"><button class="btn btn-warning">Cancel</button></div>
</div>
Here's a fiddle of it demonstrating my problem:
Try to this Define pull-left of your div as like this
<br><br><br>
<div class="row">
<div class="progress progress-striped active pull-left" style="width: 500px; margin: 0px auto; height: 40px; margin-right:10px;"><div id="progressbar" class="progress-bar progress-bar-success" role="progressbar" style="width:20%;"></div></div>
<button class="btn btn-warning pull-left">Cancel</button>
</div>
Demo
I added float:left to both the loading bar and the cancel button, plus some slight css to align the cancel button better such as top and left:
UPDATED EXAMPLE
You are using Twitter Bootstrap so : Use the bootstrap class instead of your hard style.
Fiddle : http://jsfiddle.net/wFLw5/1/
HTML :
<div class="row">
<div class="col-xs-10 progress progress-striped active"><div id="progressbar" class="progress-bar progress-bar-success" role="progressbar" style="width:20%;"></div></div>
<div class="col-xs-2"><button class="btn btn-warning">Cancel</button></div>
</div>
I think The Little Pig is most correct in suggesting you use the actual Bootstrap styles. However, you can align the cancel button to the right of the progress bar by setting display:inline-block; on both elements, and then offsetting the cancel button.
Is it possible to use 2 responsive images side by side with same height with Bootstrap 3? At the moment the col-sm-4 hasn't the same height.
<div class="container">
<div class="row">
<div class="col-sm-4">
<img class="img-responsive" src="http://placehold.it/400x400" />
</div>
<div class="col-sm-8">
<img class="img-responsive" src="http://placehold.it/800x400" />
</div>
</div>
</div>
Demo Fiddle: http://jsfiddle.net/u9av6/3/
Thanks!
try this:
<div class="col-sm-4"><img src="http://placehold.it/400x400" height="220" /></div>
<div class="col-sm-8"><img src="http://placehold.it/800x400" height="220" /></div>
Here's a working version, with jsfiddle demo.
<div class="col-sm-4"><img style="max-height:220px" src="http://placehold.it/400x400" /></div>
<div class="col-sm-8"><img style="max-height:220px" src="http://placehold.it/800x400" /></div>
Maybe your problem is that in your code, the padding is not considering.
Your 400px and 800px is nice, but with padding considering it's not good.
In this fiddle : http://jsfiddle.net/Lrc5t/1/ , with no padding, they keep the same height. But it's not nice without padding...
The padding in each .row is 15px left and right.
html:
<div class="row">
<div class="col-sm-4 nopadding"><img class="img-responsive" src="http://placehold.it/400x400"></div>
<div class="col-sm-8 nopadding"><img class="img-responsive" src="http://placehold.it/800x400"></div>
</div>
css:
.nopadding{
padding-left: 0px !important;
padding-right:0px !important;
}
UPDATE :
fiddle : http://jsfiddle.net/Lrc5t/2/
Without paddding is not nice so , just inverse in adding extra padding to right image :
<div class="row">
<div class="col-sm-4"><img class="img-responsive" src="http://placehold.it/400x400"></div>
<div class="col-sm-8 nopadding-two"><img class="img-responsive" src="http://placehold.it/800x400"></div>
</div>
.nopadding-two{
padding-right:45px !important;
}
ps : You can choose to add your padding at left instead or right... in order to keep the padding in middle. And... nopadding-one and text-right class are to delete...(I forgot)...
UPDATE AFTER COMMENT:
*Why 45px ?*
Image 1 is float:left so it has just the padding-right at 15px
Image 2 has padding left and right at 15px {=30px}
So in order do equality (to get same constraints) you need to transmit the total padding to image 2
To make the images displaying side by side, you need to do three things:
1st: make all your images responsive in the html file like this:
<div class="row">
<div class="col-xs-3 left-image" >
<img class="img-responsive" src="../img/fourthimg.jpg">
</div>
<div class="col-xs-9 right-image">
<img class="img-responsive" src="../img/firstimg.jpg" >
</div>
</div>
This is for putting two images side by side. You could have as many images as possible.
2nd: Inside your css, give the height to these images like this:
.img-responsive {display:block; height: 600px; width: 100%;}
The width is set to 100% meaning that both (for this example)/all the images would cover the 100% part of the column width provided in your html code.
3rd (Most important) : CSS has this property to automatically leave margins/paddings on right and left when you put an image inside a div and this padding is associated with the image or any other element that you want to put inside a div.
To tackle this, go to you css file and for each image, set the left-padding and right padding to 0px just like this:
.right-image{
padding-left:0px;
padding-right:0px;
}
.left-image{
padding-right: 0px;
padding-left: 0px;
}
This is a working example and explanation of how to put in images side by side using bootstrap!
Check this code. This code will look for the smallest height of the image and set it as max-height of the other images. The rest of the image will be hidden. Check it out.
<script>
setTimeout(function () {
equalheight('.portfolio-item');
}, 3000);
function equalheight($that) {
$minHeight = 0;
$($that).each(function (index) {
$thisHeight = $(this).children('.portfolio-link').innerHeight();
if ($minHeight == 0) {
$minHeight = $thisHeight;
} else {
if ($minHeight > $thisHeight) {
$minHeight = $thisHeight;
}
}
});
$($that).children('.portfolio-link').css('max-height', $minHeight);
$($that).children('.portfolio-link').css('overflow', 'hidden');
}
</script>
My html is
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="images/trip-01.jpg" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Round Icons</h4>
<p class="text-muted">Graphic Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="images/trip-02.jpg" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Startup Framework</h4>
<p class="text-muted">Website Design</p>
</div>
</div>
if you want constant height, should add these properties:
height: 200x ; # any constant height
object-fit: cover;
Or else you want width constant, should add these properties:
width: 200px ; # any constant height
object-fit: cover;
object-fit: cover, fixed the problem of stretching up of the image in my case.