so this is probably pretty simple, but it's stumping the hell out of me.
Basically I have a bootstrap modal and I want the header to have a title along with an image on the right. I can't get the image to move up a little bit so that the whole border is visible.
Here is the code for the header, and an image of what I'm getting.
<div class="modal-header">
<button id="btnCloseModal" type="button" class="close" data-dismiss="modal">×</button>
<img src="../images/MyEKC_Final.jpg" width="95" height="34" class="top-align" style="float: right;" />
<h3 class="modal-title" id="modalTitleHeader">Getting Started with MyEKC</h3>
</div>
If you look at the top right, the image is overlapping the border. Ideally I'd like for the logo to be up higher so it's even with the header, but if that's not possible if I can just move the border down too that would be okay.
Any help would be greatly appreciated. Thanks!
Related
I have the following part of the form:
<div class="d-grid mb-3">
<button class="btn btn-primary mb-3" type="submit" name="userlogin">Login</button>
<button class="btn btn-primary mb-3" onclick="window.location.href="/reset.php" name="rstpss">Reset</button>
</div>
Button rstpss is conditional and appears only in case user has entered wrong login or wrong password at the same time.
Both buttons currently use 100% of div's width and placed strictly one below another.
But I want the rstpss button to be placed below the userlogin one only in case there is no available predefined div's width to place them one next to another keeping in mind they both will take all available div's width, be the same width and contain the same space between them as their bottom margins (the same margin is used with the input above the buttons).
When only userlogin button is shown it must take 100% div's width.
I suppose it shouldn't be very difficult and must be clearly described at the Bootstripe's documentation, but I've started using Bootstrap just yesterday and just don't know what to look for. Any example I have found doesn't answer my question.
A clear example will help me greatly to understand how to deal with such cases in the future. And what to search at the Bootstrap's documentation, too.
Here is an example of what I am trying to achieve:
Try this:
<div class="d-flex mb-3">
<button class="btn btn-primary mb-3 flex-fill" type="submit" name="userlogin">Login</button>
<button class="btn btn-primary mb-3 flex-fill" onclick="window.location.href="/reset.php" name="rstpss">Reset</button>
</div>
This should expand the first button to a 100% if the second one doesn't exist, and keep both buttons on same line with equal width if both exist.
I have made the following pile of tags. It does the job while it seems to be not the most elegant one.
<div class="row" style="--bs-gutter-x: 1rem">
<div class="col">
<div class="d-flex mb-3">
<button class="btn btn-primary flex-fill" style="white-space: nowrap;" type="submit" name="userlogin">Click or tap here to login</button>
</div>
</div>
<div class="col">
<div class="d-flex mb-3">
<button class="btn btn-primary flex-fill" style="white-space: nowrap;" formaction="/reset.php" name="rstpss">Click or tap here to recover your password</button>
</div>
</div>
</div>
The default value of the row class is 1.5rem. I have not found how to set the row class' size through predefined classes so I've made it 1rem with inline style to make the horizontal space between two buttons equal to vertical space between the form's elements with mb-3 class applied.
There is also inline style white-space: nowrap for the button tag to prevent its height growing instead of putting the long texted button to the next line.
I've used the first example from the Bootstrap's Grid system except the outer div with the container class as it prevents achieving my goal.
My code still appear to me as an overproduced and incorrect one so I can't accept this answer as the answer.
The correct solution is still highly appreciated.
Lately, I've run into a problem when trying to get my web aps to work with small devices. Even then, this doesn't seem to always be an issue, it will depend upon the orientation of the phone. What I'm seeing is say I have a Bootstrap 4 ROW with a col-3 col-6 col-3 setup. The center col has more height and includes images where fade in and out of opacity, so the height is constant. When BS does its thing for smaller displays, the first col-3 breaks properly, leaving space for the col-6. The problem is the col-6 seems to break at the col-3 height and I get over lapping. When using the dev tools, I can see this is the case but I dont want to set a hard height because that makes the spacing go weird and defeats the whole BS purpose. Here are some examples:
<div class="row" style="margin: 0vh 5vw;">
<div class="col-md-3 col-sm-12 text-center wow fadeInLeft">
<div>
<i class="fa fa-eye features-icon"></i>
<h2 style="color: white; font-size: 3vmin">Something</h2>
</div>
</div>
<div class="col-md-6 col-sm-12 text-center wow" style="height: 53vh;">
<img id="img1" src="myImage.jpg" alt="dashboard" class="img-fluid img1" style="margin-top: 3vh;
display:block; position:absolute; opacity: 1;">
<img id="img2" src="~/anotherImage.png" alt="dashboard" class="img-fluid img2" style="margin-top:
3vh; display:block;position:absolute; opacity: 0;">
</div>
<div class="col-md-3 col-sm-12 text-center wow fadeInRight">
<div>
<i class="fa fa-database features-icon"></i>
<h2 style="color: white; font-size: 3vmin">More blah blah</h2>
</div>
</div>
</div>
This image shows where col is over lapping (blue icon)
BTW, I've set the center col height because without it, I get no height to that col. I've tried manipulating it, but it seems that whatever I do, it will fix it for one layout orientation and mess up the others. I must be missing something simple in BS. Thanks in advance for your help.
That row has an inline style defining a margin, maybe the view units are causing the problem. Try changing that around to % or px to see how it behaves or remove that margin all together and use bootstrap's margin utilities. Other thing I can think of would be to try and wrap the overlapping elements in two different .container-fluid
So, I ended up doing what I consider a cheat using jQuery. I gave the col div an id of #mcsCol and put this in my $(document).ready(function)
$("#mcsCol").css({ "height": $("#img1").css("height") });
So essentially, it will check the height of the image and set the col to the same height. If you have a more native solution, I'd love to see it.
I would like to add a background image on the header of the modal and so I thought if I would do the following:
.modal-header{
background-image: url('../images/extended_top_provider.gif');
}
The header would display the image but it does. Instead it does the following:
I also tried to add icons for the different browsers but it doesnt display the image either.
Any help would be appreciated
UPDATE
I am able to add the image, not the right one, something wrong with the path of the image, but the images below are not aligning correctly, I do not know why.
$(function(){
$('##myModal').modal('show');
});
.client_logos {
display: inline-block;
width:100%;
}
<div class="ie-only" style="overflow-y:hidden;">
<div class="modal fade in" id="myModal" aria-hidden="false">
<div class="modal-dialog modal-md custom-height-modal">
<div class="modal-content">
<div class="modal-header" style="background: url('http://www.freedigitalphotos.net/images/img/homepage/87357.jpg');">
<button type="button" class="close" data-dismiss="modal">x</button>
<h2 class="modal-header">Outdated Browser Detected</h2><p>Our website has detected that you are using an outdated browser. Using your current browser will prevent you from accesing featuers on your website. An upgrade is not required, but is strongly recommend to improve your browsing experince on our website.<br /><br />
<b>Use the links below to download a new browser or upgrade your existing browser.</b></p>
</div><!---Modal-Header Div--->
<div class="modal-body client_logos">
<p> <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e3/Firefox-logo.svg/120px-Firefox-logo.svg.png" alt="image" />
<img class="img-responsive" src="https://productforums.google.com/forum/image/GDF/15104268797498972201/8f39d8ec-5483-4e30-977d-817c8fd1c110" /> </p>
</div><!---Modal-Body Div--->
<div class="modal-footer">
<p class="text-center"><a class="btn btn-default" data-dismiss="modal">Close</a></p>
</div><!---Modal-Footer Div--->
</div><!---Modal-Content Div--->
</div><!---Custom Height Div--->
</div><!---Modal Fade in Div--->
</div><!---Start of Modal Div--->
<!--End of Modal container-->
This is probably because of one very simple reason, background-image property does not take any width and height, so you may specify your width and height to .modal-header like this :
.modal-header{
width:100px;
height:100px;
background-image: url('../images/extended_top_provider.gif');
}
Try this, and spot the difference, if you want you could simply add an <img> tag inside your .modal-header but note that background-image doesn't stop page rendering, while img tag does :)
I created iframe for my own map (it's a big image).
I need to create buttons for zoom-in and zoom-out on this image.
Can you help me, please.
I googled it, but couldn't find any clear answer for this.
I have this
<div class="scale_buttons">
<button class="button button1" id="zoom-in">+</button>
<button class="button button2" id="zoom-out">-</button>
</div>
<div class="map" id="map">
</div><!--map-->
Image is a bg. And I need to zoom it by click the buttons
I'm pretty stuck on this problem that I'm having getting Bootstrap modals to pop up. Here's an example:
http://jsfiddle.net/xaU5d/
<div class="container">
<h2>Example of creating Modals with Twitter Bootstrap</h2>
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>You can add some text here.</p>
</div>
<div class="modal-footer">
Call to action
Close
</div>
</div>
<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">
Launch demo modal</a></p>
</div>
And pulling the css from:
//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css
Essentially, the when the button is pressed, the modal tries to load (the style changes to the body happen which causes it to dim), but the tags containing the modal content never get rendered.
I believe this is a CSS problem at heart. When you remove the css and rerun, the styles go away, of course, but clicking on the anchor actually causes the change to happen.
I have to assume it's something that I'm doing, so could anyone look at the jsfiddle example and let me know where my error is?
Thanks in advance!
Not a full answer, but adding modal-content to your `div id="example`` allows the modal to run, but not on the correct layer.
Bootstrap 3 changed how they load modals a bit:
Modal markup has changed significantly. The .modal-header, .modal-body, and .modal-footer sections are now wrapped in .modal-content and .modal-dialog for better mobile styling and behavior.