I have several buttons across multiple 'pages' in jQueryMobile. I'm able to change the size of all buttons using the following in my css.
.ui-btn {
height: 150px;
}
However, I only want the buttons to be this large (150px) on my first page (id='menu') and the other pages should have the default height value. I tried #menu .ui-btn {...} and adding a class bigButton and doing .bigButton .ui-btn {...} but that didn't work either.
<div data-role="page" id="menu">
<div data-role="content">
<button id="snapPic" class="bigButton" onclick="capturePhoto();">Snap picture</button>
<br/>
<button id="makeClouds" class="bigButton" onclick="location.href='makeClouds.html'">Make clouds</button>
</div>
</div>
jQuery Mobile 1.3.2 and below
Add data-role="button" to anchor tag to convert it into a button. And then apply your own styles.
Big Button
jQuery Mobile 1.4 (Beta)
For performance purposes, data-role="button" is removed now and replaced with class .ui-btn.
Big Button
Related
I'm trying to create a collapsable div that holds thumbnails for images. So far, everything works except that the div content (the thumbnails) flashes and disappears upon collapse and expand. The content is there, it just doesn't stay. If you're quick enough you can click the thumbnail as it flashes and it takes you to the image path. My div looks like this:
<div class="col-lg-8 col-lg-offset-2">
<div id="images" class="accordion-body collapse">
<a href="../images/1953.01.09.00.jpg" class="thumbnail">
<img src="../images/1953.01.09.00.jpg">
</a>
</div>
</div>
And my button:
<a class="btn accordion-toggle" data-toggle="collapse" href="#images">Images »</a>
You can look at my full code here: https://jsfiddle.net/krbylit/jttyq8jv/
Add this to your CSS
.collapse.show {
visibility: visible;
}
For some reason your bootstrap doesn't toggle this property correctly
sometime the case might be some css changes the color of the text inside to white so simply applying the inline css might help :
style="color : black; "
There is a bootstrap carousal(full-width) on my page and the carousal have registration form an i want to bring the form below the carousel on resizing the screen,I am using media queries but my form is coming above the text of my page below is my screenshot and code can anyone help to sort the problem
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('images/corousal1.jpg');"></div>
<div class="carousel-caption">
<h3><strong>Healing People,</strong>Changing lives<br/>
Personalized Treatments that are safe,
Sure and Scientific
</h3>
</div>
</div>
<div class="multi-form">
<form id="msform">
<fieldset>
<input type="button" name="next" class="next action-button btn-btn-primary" value="Book An Appointment">
<button type="button" class="next action-button btn-btn-primary" style="background-color:#3B5998 !important;"><i class="fa fa-facebook" aria-hidden="true"></i> Connect With Facebook</button>
</fieldset>
</form>
</div>
media queries
#media (max-width:786px) {
.multi-form {
margin-top: 400px;
height: 100%;
z-index: 1000;
display: block;
}
}
full page screenshot
Responsive page screenshot
Have you tried with absolute position ? you can design the div with absolute position and values in %.
For Example :
.multi-form {
position:absolute;
top:20%;
right:0%;
left:0%;
bottom:0%;
}
This will work for all resolution.
EDIT :
Absolute positioning means that the element is taken completely out of the normal flow of the page layout. As far as the rest of the elements on the page are concerned, the absolutely positioned element simply doesn't exist. The element itself is then drawn separately, sort of "on top" of everything else, at the position you specify using the left, right, top and bottom attributes.
You'll definitely want to check out this positioning article from A List Apart.
And finally please try to make my corousel is absolute positioned and my form is relative positioned. So that your component will work in all resolution as your expectations.
I'm using the Angular UI modal and would like to make it smaller. According to Bootstrap's website, to make the modal smaller I should use the modal-sm modifier class:
<div class="modal-dialog modal-sm">
I'm having trouble incorporating this div into my Angular modal template. Every Angular UI modal example I have found includes only the modal-header, modal-body, and modal-footer divs in the template. Are the outer modal, modal-dialog, and modal-content divs already provided by Angular? If so, is there any way to overwrite them so that I can apply "modal-sm" to the modal-dialog div? I tried adding the full modal div structure to the template and it caused problems with my modal. I also tried setting windowClass = "modal-dialog modal-sm" in my controller but that didn't work either. Any ideas? Thanks.
Update: here is the content of my modal template after I tried to include the outer Bootstrap div's. It is a very simple modal to confirm the user wants to delete an item.
<div class="modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4>Confirm Delete</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete?</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="confirm()">Confirm</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
</div>
The result is it doesn't show my modal correctly. I can see the backdrop and a very tiny sliver of what I assume to be my modal.
Update: Using #lmyers's solution worked for me, but instead of specifying the width as 60% I did the following to make use of the #modal-sm Less variable.
.confirm-modal .modal-dialog {
width: #modal-sm;
}
OK, I understand now. Here's what we did in the .css:
.appcustom-modal-med > .modal-dialog {
width: 60%;
}
then in the controller:
windowClass: 'appcustom-modal-med'
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.
I'm looking to make a small sidebar using Twitter Bootstrap.
I want the paragraph text to be able to wrap freely and I always want the buttons on the right side. However, whenever the browser is resized from full screen to have a smaller width the vertical button group drops down to the next row and takes up the width of the while window. Ugly. What can I do to change this?
Basically, I'm looking at code like this:
<div class="container">
<div class="row" style="margin-top: 10px;">
<div class="span9 citation-text">
<p class="citation-text">Here is a ton of text that is supposed to be a citation
but I'm hoping it'll wrap that's why it's not a citation. And yet it doesn't wrap
so it looks like I'll have to keep writing and writing until it does.</p>
</div>
<div class="span3 vertical-btn-group citation-options">
<input type="button" class="btn btn-small btn-block btn-info citation-edit"
value="Edit" /> <input type="button" class=
"btn btn-small btn-block btn-danger citation-remove" value="Remove" />
<input type="button" class=
"btn btn-small btn-block btn-warning citation-highlight" value="Highlight" />
</div>
</div>
</div>
Here is the link to the JSFiddle:
http://jsfiddle.net/F39R8/
Play around with resizing and you'll see what I'm talking about.
Once the browser is resized to less than 768px, Bootstrap sets all columns (span*) widths to 100% and removes the 'float' which makes the spans stack vertically. You can override this using a #media query in your CSS..
#media (max-width: 767px) {
.row .span9 {
float:left;
width:68%;
}
.row .span3 {
float:left;
width:28%;
}
}
http://jsfiddle.net/skelly/F39R8/2/
I only recently began using CSS myself so I am not sure that this is the best way to go about this but it seemed to help when I tried overriding the CSS for that link you gave above: Go into the CSS stylesheet and find the section pertaining to that div tag (it appears to me to be called "#actions"). Put in min-width: 800px; and try to resize the browser window. Then adjust the pixel size to something like 400px and resize again just for comparison. By fine-tuning this you can (hopefully) get the desired behavior you are looking for.
Try this: http://jsfiddle.net/F39R8/3/
I see you have the proper Bootstrap CSS classes in place, so I assumed that the bootstrap file you included contains CSS for the responsive layout. I removed it and added the non-responsive version (http://twitter.github.io/bootstrap/assets/css/bootstrap.css).