I would like to have more than one button on the right side of the Header bar. The docs say you can customize using a DIV, but when I do that the buttons do not have their normal style. Any advice?
The above example puts more than buttons on the header but they are all positioned to the left of the header. I think you can group your buttons in a controlgroup and position the control the group to the right of the header. Maybe something like this:
<div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
//have your button here
</div>
Hope this helps.
This is how I did it, seems clean.
HTML
<div id="myHeader" data-role="header" data-theme="a">
<span class="ui-title"></span>
<div class="ui-btn-right">
<a id="myButton1" class="headerButton" href="#" data-role="button"></a>
<a id="myButton2" class="headerButton" href="#" data-role="button"></a>
</div>
</div>
CSS
.headerButton {
float: left;
margin-right: 5px!important;
}
I've seen this done in the footer (Shown Here), might give you an idea for the header or toolbar
You can use the grid class.
<div class="ui-grid-a ui-btn-right">
<div class="ui-block-a" ><a href="#" data-role="button" data-inline="true" >Button1</a></div>
<div class="ui-block-b" ><a href="#" data-role="button" data-inline="true" >Button2</a></div>
</div>
<a href="#" class="ui-btn-right ui-btn ui-btn-up-a ui-btn-icon-left
ui-btn-corner-all ui-shadow" data-rel="back" data-icon="cancel"
data-theme="a">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Cancel</span>
<span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span>
</span>
</a>
Related
I am using Materialize, and I need to align a button to the right side of the card in the card-action.
This is the code:
<div class="card-action">
This is a link
</div>
This is the result:
If I remove the class="right" then I get this result:
I want the result from the second image, except the button should be aligned to the right. Am I missing something about the materialize card-action? How should I get this behavior?
It should be right-align instead of right and you've to use it on card-action div. You can check about the alignment classes in Helper page of the documentation.
<div class="row">
<div class="col s12 m4">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I
require little markup to use effectively.</p>
</div>
<div class="card-action right-align">
<a class="btn blue" href="#">Right</a>
</div>
</div>
</div>
</div>
You Just Need to Mention the Alignement in below way
<div class="card-action right-align">
YOUR CONTENT WILL ALIGHT TO RIGHT
</div>
Using bootstrap 3.
I have a list-group-item, but when the width causes the text to pop to the next line, text is cropped, as shown in the picture, on the second line.
What can I do?
This is my code:
<div class="list-group-item getItemActivityHistory" item_id="6">
<div class="text-info"><b>חשמל</b>
<span class="pull-right">נוצל החודש:
<span>
666
</span></span>
</div>
<div>יתרת תקציב: <span class="leftToRight">לא הוגדר</span>
<span class="pull-right">
התחייבויות עתידיות: 100
</span>
</div>
</div>
overflow: hidden; solved the issue.
But I realy do not understand why. "hidden"' should do the opposite.
???
This is what I'm trying to achive:
I have list of images which are rotating inside a div (fade in, fade out effect)
in each rotation there is one which displays and all the rest are hidden (display: none)
I am trying to create a "resize" event which will always check the height of only existing image (the only one that is showing in the sequence) and assign this height to it's main container (in my case: the UL)
Here is my HTML:
<ul id="output">
<li>
<div class="description">Lorem Ipsum</div>
<img src="images/sample1.jpg">
</li>
<li>
<div class="description">Lorem Ipsum</div>
<img src="images/sample2.jpg">
</li>
<li>
<div class="description">Lorem Ipsum</div>
<img src="/images/sample3.jpg">
</li>
</ul>
and my JS:
jQuery(window).resize(function() {
slide_img = jQuery.find("ul#output li img");
slide_img_height = jQuery(slide_img).height();
if(jQuery(slide_img).css("display") != "none"){
jQuery("ul#output").height(slide_img_height);
}
});
It is not working. it also get the height of the "hiddden" images in the sequence and displays their height (which equals to 0)
how do I pull only the image with the display block always and get it's height and then assign it to the main UL?
Thanks
Let me make sure I understand your question:
1.) You have a container for several images, only one of which will be visible at a time.
2.) You want to change the size of the container to just fit the image currently displayed.
3.) Are you also trying to display the height (in pixels) as a text element?
If you're just trying to accomplish the first two, you can nest your images in a instead of like:
<div id='output'>
<div class='container'>
<div class='description'>Lorem ipsum</div>
<div class='image>
<img src='images/sample1.jpg' />
</div>
</div>
<div class='container'>
<div class='description'>Lorem ipsum</div>
<div class='image>
<img src='images/sample2.jpg' />
</div>
</div>
<div class='container'>
<div class='description'>Lorem ipsum</div>
<div class='image>
<img src='images/sample3.jpg' />
</div>
</div>
</div>
If you do this, the height of your 'output' div will always be the height of the only displayed image. If you needed to display the value of the actual height, you could use:
var outputHeight = $('#output').height();
Since I can't add enough code in a comment to answer your follow-on question, here it is:
If you need to keep your original structure, try this:
<ul id="output">
<li class="container active">
<div class="description">Lorem Ipsum</div>
<img src="images/sample1.jpg" />
</li>
<li class="container">
<div class="description">Lorem Ipsum</div>
<img src="images/sample2.jpg" />
</li>
<li class="container">
<div class="description">Lorem Ipsum</div>
<img src="images/sample3.jpg" />
</li>
</ul>
Then you can select the <li>'s to be either hidden or visible with some CSS like this:
.contaner {
display: none;
}
.active {
display: inline;
}
Like this, the entire <li> gets removed when you set display: none; and only the visible one will take up space in the <ul>. That will let your <ul> only be as high as the currently displayed image.
Hopefully that answers your question.
So eventually, this is what I came up with and it works perfectly:
jQuery(window).resize(function() {
// variables presenting the LI, IMG and th eheigt of the img
slide_li = jQuery("ul#output li").css('display','list-item');
slide_img = jQuery(slide_li).find('img');
slide_img_height = jQuery(slide_img).height();
jQuery("ul#output").height(slide_img_height);
});
This way I was able to find the only image that has a display of "list-item" (I know it's weird but this is how the slider works, I didn't build it)
and then, get the image height and assign it to the main container which is in my case:
ul#output
Credit to #anson for doing his best to help
Thanks
I'd like to target two divs for expand when clicking on a single trigger? Is that possible?
You can simply add all the ids separated by commas in data-target:
<button type="button" data-toggle="collapse" data-target="#demo,#demo1,#demo2">
Hide them all
</button>
Use the same class for both div's and set your data-target according this. Give your div's also the same parent (can also be a class) and set data-parent according this.
<button type="button" data-parent="#wrap" data-toggle="collapse" data-target=".demo">
simple collapsible
</button>
<div id="wrap">
<div class="demo collapse">
test1
</div>
<div class="demo collapse">
test1
</div>
</div>
From the Bootstrap 3 documentation:
The data-target attribute accepts a CSS selector to apply the collapse to.
Therefore you can use a comma-separated list of id's, class selector etc. for the data-target attribute value:
<button class="btn btn-primary"
type="button"
data-toggle="collapse"
data-target="#target1,#target2,#target3"
aria-expanded="false"
aria-controls="target1,target2,target3">
You can see an extensive list of valid CSS selectors on the w3schools website.
If you want to hide one element and show another (like the bootstrap accordion but without a panel) you can add multiple targets but also add the class 'in' to have one element expanded on load!
<div class="collapse text-center clearfix in" id="section1">
<h1>This is section 1</h1>
<p>Are you excited about toggling?</p>
</div>
<div class="collapse text-center clearfix alert-warning" id="section2">
<h1>Boo!!</h1>
<p>This is a new sentence</p>
</div>
<button class="btn btn-block btn-primary" data-toggle="collapse" data-target="#section1,#section2">Toggle</button>
Live demo here
There is a solution in Bootstrap 4:
Bootstrap 4 documentation: Multiple targets
The least you need is:
data-toggle="collapse" data-target=".multi-collapse" for the toggle
button
class="collapse multi-collapse" for each element you need to
toggle
(While multiple ids in data-target indeed don't work).
The data-target answer did not work for me. However you can use JavaScript to do this.
Make your button call some JavaScript like:
$('.collapse-class').collapse('toggle')
See: https://getbootstrap.com/javascript/#via-javascript-3.
Bootstrap 4 uses document.querySelector instead of document.querySelectorAll. If this changes, then everything works.
In Bootstrap 4 using the same class for each respective div seemed to work over using id.
<button type="button" class="btn" data-toggle="collapse" data-target=".collapse-group">
Reveal Items</button>
<div class="row">
<h3>Visible Row div 1</h3>
<div class="collapse-group collapse">
<p>hidden item</p>
</div>
<h3>div 2</h3>
<div class="collapse-group collapse">
<p>hidden item 2</p>
</div>
</div>
I faced the same problem but bootstrap won't let data-toggle="tab" beside data-toggle="collapsed" so my problem was like this.
I have:
<a type="button" class="btn btn-default btn-lg btn-block " href="#ld-tab-pane-eye" aria-expanded="false" aria-controls="ld-tab-pane-eye" role="tab" data-toggle="tab" aria-haspopup="true" aria-expanded="false" style=" border: 0px ;"> </a>
and this was switching tabs:
<button type="button" class="navbar-toggle collapsed nav-trigger style-mobile" data-toggle="collapse" data-target="#main-header-collapse" aria-expanded="false" data-changeclassnames='{ "html": "mobile-nav-activated overflow-hidden" }'>
</button>
But this one closes the modal because the switch tab button was in the modal.
To solve the problem I add id="popout"(to first button) and id="popoutTrigger" (to secend button).
And this script (jQuery):
$( "#popout" ).click(function() {
$( "#popoutTrigger" ).trigger( "click" );
});
When the user clicked the switch button in the modal, after switching modal will close.
This a view of what I've done.
I hope my solution will help.
I know that we can add left and right buttons in a header in Jquery Mobile App.
But can we any more buttons or controls in the header section itself?
I think I have a better solution,
<header data-role ="header" data-theme="b">
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</header>
Screenshot;
with regard to this info:
you can find it here:
http://www.metaltoad.com/sites/default/files/Responsive-Widths_0.png
you can use this code:
<style type="text/css">
#media all{
.my-header-grid.ui-grid-b .ui-block-a { width: 30%; }
.my-header-grid.ui-grid-b .ui-block-b { width: 40%; }
.my-header-grid.ui-grid-b .ui-block-c { width: 30%; }
}
}
</style>
<div class="my-header-grid ui-grid-b" data-theme="a">
<div class="ui-block-a ui-bar-a" data-theme="a">
<div align="left" style="padding-left:5px;padding-top:3px;height:33px;height:40px;">
Back
Edit
</div>
</div>
<div class="ui-block-b ui-bar-a">
<div align="center" style="padding-top:3px;height:33px;text-align:center;height:40px;">
<div style="padding-top:7px;">
<article role="heading" aria-level="1">expand </article>
</div>
</div>
</div>
<div class="ui-block-c ui-bar-a">
<div align="right" style="padding-top:3px;height:33px;height:40px;">
Add
Refresh
</div>
</div>
</div><!-- /grid-b -->
if by any chance your programming with c# mvc razor engine don't forget to write the css media tag with 2 # like so ##media because the razor engine treats 2 # as one.
you see and can play with all of the designs shown here in this link:
http://jsfiddle.net/yakirmanor/BAat8/
iv added some links but i recommend youll read this:
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/
the simple implantation is:
<header data-role ="header" data-theme="a">
<a data-icon="back" href="/" rel="external">Back</a>
<h1 class="ui-title" role="heading">Staff</h1>
<a class="ui-btn-right" data-icon="back" href="#" rel="external">Refresh</a>
</header>
or this:
<div data-role="header" data-theme="b">
<a data-icon="back" href="/" rel="external">Back</a>
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</div>
or this:
<div data-role="header" data-theme="e">
<div class="ui-btn-left" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</div>
hope iv helped.
It might be easier to create a custom navbar instead of modifying the header toolbar, Here si the docs: http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-navbar.html
This might help:
<div class="ui-btn-right">
<!-- Home Button -->
<a href="index.html" data-role="button"
data-icon="refresh" data-iconpos="notext" data-direction="reverse" data-corners="true"
data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Refresh">
</a>
<!-- Home Button -->
<a href="index.html" data-role="button"
data-icon="home" data-iconpos="notext" data-direction="reverse" data-corners="true"
data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Home">
</a>
</div>
This gives me those nice rounded buttons, two side by side on the right side.
Just like on the mobile docs.
Works in 1.1.1, haven't tried the latest RC
I was able to achieve this by the following code:
<div data-role ="header" data-theme="b">
Prev
<div data-role="controlgroup" data-type="horizontal" style="margin-left:75px;margin-top:5px;" >
<a href="index.html" data-role="button" data-icon="arrow-l" >P.Week</a>
N.Week
</div>
Next
</div>
No, there is a hard limit of 2 as far as I have found. The best I was able to come up with was to get another unstyled link to appear.
There are however, navbars - On one of my projects, I needed a number of buttons in the header area, I placed a navbar directly below it, and was reasonable pleased with the results.
They are explained in detail here:
http://jquerymobile.com/test/docs/toolbars/docs-navbar.html