I have a container that is a row if screen size is greater than "sm" in angular material
<div layout="column" layout-gt-sm="row" layout-margin="20px" >
<div id="div1" flex="80">
</div>
<div id="div2" flex="20">
</div>
</div>
</div>
When it turns to a column, I need my div2 stacked onto top of div1 but as the natural order is, divs on the left are stacked over divs on right.
How can I change this and have the div on right on the top of div1 or any other div for that matter?
You can use flex-order and flex-order-gt-sm option to get the desired result.
http://codepen.io/next1/pen/EKXedG
For more info check the offical doc Material Layout
Related
I am stuck with a very unusual behaviour of bootstrap. I am working with rails in which I have to build an index page containing blogs in tile system. It is working fine for larger screen but when we reduce the size it is creating extra space. Can't figure out why this space is being created. Any help would be appreciated.
the code for grid layout for index
when experimenting with screen sizes and larger data
Based on what I can see on the image, I'd say the content of your upper left div is bigger than the content of your upper right div.
I've had simular issues with images of different sizes.
Try placing you content inside of rows, this will prevent the huge whitespace.
Example :
<div class='container'>
<div class='row'>
<div class='col-xs-6'></div>
<div class='col-xs-6'></div>
</div>
<div class='row'>
<div class='col-xs-6'></div>
<div class='col-xs-6'></div>
</div>
</div>
my site is: http://www.italianiaperth.com/
i am trying to align the text in white 'Italiani a Perth' and the search Widget horizontally.. (text floating left, search widget to the right)
I have managed to get them on the same line by setting their respect divs width to auto but the problem is the content underneath floats to the right along with the search widget
ive played with this for hours and looked at similar questions on the forums but im at my witts end, can someone point me in the right direction? thanks :)
Use Bootstrap 3.0 ( getbootstrap.com )
Put the two divs like this :
<div class="container">
<div class="row">
<div class="col-md-8"> DIV LEFT </div>
<div class="col-md-8"> DIV RIGHT </div>
</div>
</div>
More info here :
http://getbootstrap.com/css/#grid
I'm suing jquery ui draggable on a list of items that can be dropped on a .droppable list of other items. Here's a jsFiddle to show what I'm trying to do:
<div id="container">
<div id="left-pane" class="pane">
<div class="item">Item A</div>
<div class="item">Item B</div>
<div class="item">Item C</div>
<div class="item">Item D</div>
</div>
<div id="right-pane" class="pane">
<div class="item">Item E</div>
<div class="item">Item F</div>
<div class="item">Item G</div>
<div class="item">Item H</div>
</div>
$('.item').draggable({
helper: 'clone',
appendTo: '#contentpane',
cursor: 'move'
});
$('.item').droppable();
The panes have a fixed height, and overflow-y: auto so that we can scroll inside to see hidden elements.
When dragging an element from a list to the other, the lists do not scroll since I use appendTo and the dragged item is not in the list. Is there a way to make the list 'scrollable' when I drag an item over? otherwise it is not possible to drop the item at the bottom of the list, let's say drop 'Item A' on 'Item H' on the fiddle example
Be able to use the scroll features from different container is really not easy to do.
I opended a topic on this subject. You will find an edit of the question with a functionnal workaround.
Check this related question : JqueryUI, drag elements into cells of a scrolling dropable div containing large table
About your last remark, you could place your item at the boom of the list using the sortable property. http://jqueryui.com/sortable/
Well the only way I found to do it is to detect the position of the dragged element and scroll the droppable container, with a smooth effect so that it will scroll like doing it from the mouse wheel.
I have seen documentation on the JQueryMobile site that shows you how to group links in the header/footer together. I have also seen documents that allow you to place links specifically in the space to the left and/or right of the heading tag. I have NOT seen any documents on how to merge them
Basically what I want is
<div data-role="header">
left 1
left 2
<h1>Page Title</h1>
right 1
right 2
right 3
</div>
and for that to appear as
[left 1][left 2] Page Title [right 1][right 2][right 3]
I have tried wrapping the links in a div and using floats (adding the class(s) ui-btn-left/right also appears to work), however the anchor tags remain as-is and the styles defined by the framework are never applied (All I see is regular links, no fancy buttons)
Can someone please tell me if I'm missing an attribute? or if there is a container class that I can use that will not block the buttons from having their new markup applied?
Edit:
The above code will currently output
[left 1] Page Title [left 2]
[right 1][right 2][right 3]
Solution:
Use a wrapping container to fix the position left or right aligned (I am using the class ui-btn-[left/right]) then force the link to take the markup with data-role="button"
So it looks like
<div data-role="header">
<div class="ui-btn-left">
left 1
left 2
</div>
<h1>Page Title</h1>
<div class="ui-btn-right">
right 1
right 2
right 3
</div>
</div>
use the class "ui-btn-right"/ "ui-btn-left"
Update use wrapers for multiple buttons
<div class="ui-btn-left">
left 1
left 2
</div>
<div data-role="header">
<div class="ui-btn-left" data-role="controlgroup">
left 1
left 2
</div>
<h1>Page Title</h1>
<div class="ui-btn-right" data-role="controlgroup">
right 1
right 2
right 3
</div>
</div>
I'm using jQuery UI's tabs to divide content on my page. I have a 'link bar' I would like to have hang at the bottom of each tab. (The tab text will change but generally they will navigate the user left or right through tabs.)
Hosting the #linkBar div inside the first tab makes it 'look' right, inside Themeroller's border. Putting it just outside the 'parent tab' div places the links below the theme's border. I've tried creating a spacer div but it just pushes #linkBar down further.
Of course when the user switches to another tab, the link bar goes away. How is ownership of elements organized between tabs? Should I dynamically destroy the #linkBar div on the tab being navigated away from and rebuild it in the tab being navigated to? Or is there a better way to move it between them, or just manage visibility?
I would like to have the link bar follow the content on each tab as a footer, 'floating' one or two lines below the last content of each tab (rather than having it in a fixed position relative to the tab bar).
Ok ... It was simply adding the jQuery UI classes to the linkBar. Check out my working jsFiddle demo:
I moved the linkBar div out of the tabOne div and put it at the bottom of the tabs div:
<div id="container">
<div id="title">
<h1>title bar</h1>
</div>
<div id="tabs">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div id="tabone">
content goes here
<br><br><br><br>more stuff<br><br><br>more stuff<br><br>
</div>
<div id="tabtwo">
content goes here...
</div>
<div id="tabthree">
content goes here...
</div>
<div id="linkBar">
<span id="leftLink"><< left link</span>
<span id="rightLink">right link >></span>
</div>
</div>
</div>
I slightly altered the linkBar style by giving it a top and bottom margin as well as hiding it by default:
#linkBar {
display: none;
margin: 10px auto;
}
Then I simply added the jQuery UI classes to the $linkBar. I slightly altered the jQuery to be more readable:
$("#accordion").accordion({ header: "h3" });
var $tabs = $("#tabs"),
$linkBar = $("#linkBar");
$linkBar.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
$linkBar.show();
$tabs.tabs();
$('#title').click(function() {
$tabs.tabs('select', 0);
return false;
});
Note: You could just add class="ui-tabs-panel ui-widget-content ui-corner-bottom" to the linkBar div and be done with it. But, I think I like it better managed in the JS.