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
Related
I'm currently getting into Framework7. I found only a few docs, but they didn't help me. My problem is really basic, but I simply cannot figure out my error:
I simply try to open both panels, left and right (not at the same time).
If I swipe from left to right, the left panel should be opened
If I swipe from right to left, the right panel should be opened
My HTML part looks like this:
<!-- Left panel with reveal effect-->
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Content left panel</p>
</div>
</div>
<div class="panel panel-right panel-reveal">
<div class="content-block">
<p>Content right panel</p>
</div>
</div>
Javascript:
// Initialize app
var myApp = new Framework7({
swipePanel: 'both'
});
If I change swipePanel to either left or right, the correct one will work as intended... for some reason not both, though.
According to the docs however, both is a valid value for swipePanel. There are no JS-errors in my console.
Someone else encountered that problem?
If you are using framework7 version 3 then
var myApp = new Framework7({
swipe: 'both'
});
In F3 use swipe instead of swipePanel. swipePanel is for V1
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>
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
I'm working on a page with four (4) separate DIV elements that all are scrolled independently of each other. Using the answer here: `-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7 I was able to get most of the pages working. There are still a few pages where the DIV holding the main content cannot be scrolled vertically when a side DIV is expanded.
The page structure looks like this:
...
<div id="paneTop">...</div>
<div id="paneLeft" class="expanded">...</div>
<div id="paneCenter">
<div>
<div style="overflow: hidden;">
<div id="mainContent" style="overflow: auto;">...</div>
</div>
</div>
</div>
<div id="paneRight" class="expanded">...</div>
...
Setting the touchstart event listener on #paneCenter worked for most of the pages but those didn't have the extra layer of divs. I have tried setting the touchstart event listener on #mainContent and all the way up the chain but #mainContent will not scroll when #paneLeft is expanded even though it works when #paneLeft is collapsed and it works whether paneRight is expanded or not.
Note: this issue has only been identified on an iPad running iOS7.
This is the correct behavior. If you want it to scroll vertically but hide it horizontally, then target it specifically: overflow-x: hidden (to hide horizontal excess), and don't set anything to overflow-y. This allows for some good control over elements.
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>