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>
Related
I have the following for a polymer web application. The whole page scrolls. I would like for the contents of and to scroll independently. foo has a longer view and bar is generally able to fit in the page with maybe a little vertical scrolling.
How do I make the two contents of vaadin-split-layout scroll independently vertically?
<app-drawer-layout fullbleed force-narrow>
<app-drawer slot="drawer">
<app-toolbar>
<div main-title>Models</div>
</app-toolbar>
<section>
<div style="margin-bottom:90px;width:100%;"></div>
</section>
</app-drawer>
<app-header-layout>
<app-header slot="header" fixed effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<iron-icon id="logo" src="icon.svg"></iron-icon>
<div main-title>Spliter Sample</div>
</app-toolbar>
</app-header>
<section>
<vaadin-split-layout orientation="horizontal">
<foo></foo>
<bar></bar>
</vaadin-split-layout>
</section>
</app-header-layout>
</app-drawer-layout>
Thank you for any advice.
You can style the panels of a vaadin-split-layout as any other div as the panels are in the light DOM as you can see when inspecting their examples.
Thus give them an explicit height and an overflow:auto or overflow-y:auto; to enable scrolling. The style rules be placed in your usual CSS.
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 have one .rdlc report and rendered it in a web page using microsoft's ReportViewer control.
This report contains one table to display records. When I export this report to PDF, the table in pdf is left aligned (while on webpage,it was center aligned).
Is there any settings for the table to display it in center in pdf? Any help will be highly appreciable.
From my own experience of using Rotativa to produce PDFs, I was had to style every field that was included in the PDF view. What I did to align my fields to right and left was:
<div style="float:right; padding-right:150px">
<div class="form-group">
<b>#Html.LabelFor(model => model.HouseNo, "HouseNo")</b>
<span style="padding-left:60px">
#Html.DisplayFor(model => model.HouseNo)
</span>
</div>
</div>
Try wrapping a div around your table with the float and padding attributes to centre it.
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 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.