I want to do a twitter-bootstrap layout that have one sidebar on the left and the rest of the screen should be a dynamic.
Something like this:
http://wbpreview.com/previews/WB042R743/
or this:
http://wbpreview.com/previews/WB001365H/main.html
(if it asks for login: enter demo:demo)
Can somebody help me?
if you take a look into the dom of the second link you'll see:
<section class="container-fluid">
<div class="row-fluid">
<div class="span2"></div>
<div class="span10"></div>
the fluid classes set the width at 100% of viewport.
look into the docs of twitter bootstrap
edit
in html:
<div class="span10 content">
in css:
.container-fluid span10.content { margin-left: 0; }
but remember with fluid grids twitter bootstrap defines all margins with percentage values for all spans
.row-fluid [class*="span"]
Related
I have the following code:
<xp:section id="section1" type="box" header="Left Text Right Text">
Section content
</xp:section>
I'm using the Bootstrap3.2.0_flat theme so it displays the following: http://bit.ly/1kRu9QM
Is there a way to modify the xp:section header to have "Right Text" right aligned so that it displays the following?: http://bit.ly/1kRugMi
Thanks in advance for any tips.
I am not sure how you would do it with xpages sections, but with bootstrap you can use this.
<span class="pull-left">Left Text</span>
<span class="pull-right">Right Text</span>
Maybe you can drop the span in the section or maybe use bootstrap sections instead of xpages ones?
If you are looking to do something with bootstrap sections this is what I use.
Here is some css.
.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}
And here is how I handled the div
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseOne"
href="#collapseOne">
Section Header
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
</div>
Not sure if this is going to get you exactly where you want to be.
[edit]
Thinking more about this. I think you can use these sections. I have mine initially closed, and then you click on a section to expand.
I'm trying to align four pictures with their captions in a square grid.
I'm using the following HTML code:
<div class="grid">
<div class="post-block">
<img src="img1.jpg" />
<div class="caption">caption1</div>
</div>
<div class="post-block">
<img src="img2.jpg" />
<div class="caption">caption2</div>
</div>
<div class="post-block">
<img src="img3.jpg" />
<div class="caption">caption3</div>
</div>
<div class="post-block">
<img src="img4.jpg" />
<div class="caption">caption4</div>
</div>
</div>
and the following CSS code:
.post-block {
display: inline-block;
position: relative;
text-align: center;
}
If images and captions are the same size everything is ok, but when they are different I get this (an example):
I've tried to align images and captions of different sizes using CSS with no success. I need something like this:
Any help would be appreciated.
Thanks in advance
You'll need to use separate block elements at the same DOM level for the image and the caption to achieve what you've shown in the "RIGHT" image. Right now your caption DIV is nested inside the image DIV, and that's gonna do what you've shown. The caption DIV needs to be outside the image DIV.
You will probably want two separate div wrappers around each 2 photos..
Then align images vertically to bottom.
Vertical align images to bottom
<div class="myWrapClass">
<img src="my image">
<img src="my image">
</div>
<div class="myWrapClass">
<img src="my image">
<img src="my image">
</div>
then set the styling via inline or your css file
<div style="vertical-align:bottom;">
or
.myWrapClass{
vertical-align:bottom;
}
check out this site... Use the css properties there to keep it responsive
Example
How can I make a layout shown in this image
I could have done it easily with grid system but I want the first post's description off the grid system or below the both column. However, for mobile devices I want it to appear with the image or in the same grid like the image below
I don't expect you can do this with Bootstrap's CSS only cause the order of your elements change from desktop to mobile.
Try this html:
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12" style="background-color:red;">1</div>
<div class="rightblock col-md-6 col-xs-12">
<div class="row">
<div class="col-xs-12" style="background-color:lightgreen;">3</div>
<div class="col-xs-12" style="background-color:lightyellow;">4</div>
</div>
</div>
<div class="clearfix visible-md visible-lg"></div>
<div class="col-md-12 col-xs-12 lefttext" style="background-color:lightblue;">2</div>
</div>
</div>
Where 2 = the caption of your first item (1) and 3 and 4 are your second and third item.
For the mobile version use javascript to swap 2 (.lefttext) and the 3/4 block (.rightblock):
$(window).resize(function () {
if ($(window).width() < 992) {
$(".rightblock").insertAfter($(".lefttext"));
}
});
Demo: http://bootply.com/94560
Note 1: $(window).resize only will called on a real resize (from big to small) and not when opening the small screen direct. See here for better solution to react on screen size changes: How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?
Note 2: see http://getbootstrap.com/css/#grid-responsive-resets for explanation of the clearfix
I am starting with Twitter Bootstrap and have a question about how layout functions in it. Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Test</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">a</div>
<div class="span8">b</div>
</div>
<div class="row">
<div class="span12">c</div>
</div>
</div>
</body>
</html>
style.css:
div.container
{
background-color:#aaa;
}
div.span4, div.span8, div.span12
{
background-color:#eee;
border: 1px solid #888;
border-radius:3px;
}
Adding border to span4 and span8 increases their width and I end up with this:
span4 and span8 get stacked while they should be on the same line. I realize I could decrease their width in my .css file and correct this, or use this:
http://paulirish.com/2012/box-sizing-border-box-ftw/
but does Bootstrap provide means to correct this (not adding extra CSS every time I add or remove border, etc)
The span classes in bootstrap have specific widths so adding a border throws off the total for the row and forces them to wrap. To get around this I usually put the border styling on a div inside the div with the span class. Something like this:
HTML
<div class="row">
<div class="span4">
<div>a</div>
</div>
<div class="span8">
<div>b</div>
</div>
</div>
CSS
.span4 > div, .span8 > div
{
background-color:#eee;
border: 1px solid #888;
border-radius:3px;
}
I had exactly the same issue and playing with the box-sizing didn't help at all. The only solution that worked for me in the end was to use row-fluid.
The difference with row-fluid is that they are based on percentages, not fixed pixels. Then the child spans in a row always add up to 12, instead of adding up to their parent span width in the normal pixel width rows.
So for example yours would now be
<div class="container">
<div class="row-fluid">
<div class="span4">a</div>
<div class="span8">b</div>
</div>
<div class="row-fluid">
<div class="span12">c</div>
</div>
</div>
Now you don't get any issues with changing margins, paddings, or borders.
It sounds like you want your divs to stay on the same line, yes? To do that you'll have to specify a width and float them. Divs tend to always want to stack on top of each other.
Here's a fiddle: http://jsfiddle.net/me73v/
Another option would be to tweak the span widths with JQuery:
$(".some-bordered-container [class*=span] ").each(function(index) {
$(this).width($(this).width()-1);
});
It seems to work well for me. I don't miss the pixels.
You may also use negative margins :
div.span4, div.span8, div.span12
{
background-color: #eee;
border: 1px solid #888;
border-radius: 3px;
margin: -1px;
}
It's not as good a solution as using box-sizing: border-box, IMHO, but it's just worth noticing it works, if you're forced to use box-sizing: content-box.
I have HTML like
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN">
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<HTML>
<BODY class=" ext-border-box ext-ie ext-ie7 ext-windows" style="OVERFLOW: hidden">
<DIV class=" x-viewport x-component x-border-layout-ct" id="x-auto-0" style="WIDTH: 1280px; HEIGHT: 862px" __eventBits="16384">
<DIV class=" x-panel x-component x-border-panel" id="x-auto-9" style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; LEFT: 224px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 1054px; TOP: 35px; BORDER-RIGHT-WIDTH: 0px">
<DIV class="x-panel-bwrap"><DIV class="x-panel-body x-panel-body-noheader" style="WIDTH: 1054px; HEIGHT: 775px" __eventBits="16384">
<DIV class=" x-tab-panel x-component" id="x-auto-17" hideFocus style="WIDTH: 1052px" __eventBits="6909">
<DIV class="x-tab-panel-header x-unselectable" style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; WIDTH: 1052px" unselectable="on">
<DIV class="x-tab-strip-wrap" style="WIDTH: 1052px" role="presentation">
<UL class="x-tab-strip x-tab-strip-top">
<LI class="x-tab-strip-closable x-component x-tab-strip-active " id="x-auto-17__x-auto-180" hideFocus style="MozOutline: none" __eventBits="125" role="tab">
<A class="x-tab-strip-close" role="presentation"></A>
</LI>
</UL>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>
I am not able to click Object with <A> tag which has class attribute. I tried using three different ways
1. ie.link(:class,"x-tab-strip-close").click
2. ie.li(:class,"x-tab-strip-closable x-component x-tab-strip-active ").link(:class,"x-tab-strip-close").click
3. ie.li(:xpath,"//li[#class='x-tab-strip-close']").click
All the three types resulted in element not found exception. Please let me know how do I click the element.
Hey just try to do something like
.link(:class, "x-tab-strip-closable x-component x-tab-strip-active").exist? == true
begin
browser.link(:class, "x-tab-strip-closable x-component x-tab-strip-active").click
rescue => e
rescueHandle(e)
end
else
puts "FAILED! Could not find Class for Component"
return false
end
I think you will get to know more if some error are there.
This should work with the HTML you have provided:
browser.link(:class => "x-tab-strip-close").click
If you get "element not found" check if the link is in a frame. It could also be a timing issue, the link is not there when you are looking for it.
This looks like it's part of some custom tab control that is using a lot of CSS and javascript running on the client. I can find some postings in the Sencha "Ext JS" community forum that has similar class names. Looking at some of their samples.
As with any page that has a lot of client side code doing CSS and other magic, you may need to wait a second or two after the page loads for the client side code to execute. So that would be one of the first things I would try.
If not, I notice that a lot of the tab code is creating onmouseover events, and the contents of the DOM are changing on the fly when I mouseover tabs, so you may have to see if you can first fire an 'on-mouseover' event prior to trying to click on the item, potentially that could take it from a state where it is able to be clicked.
The other folks with similar tab names are 'EXT.NET' Again I can find stuff in their forums where these class names appear. I can also find examples of this (it's a button to close a tab) in their examples page for some of the tabs. Similar advice regarding waiting, or trying onmouseover first, applies here as well.
If firing an event first doesn't work, and I'm right about the source of the controls, please see if you can find your control somewhere among their samples/examples and if so post the link, that will let folks here interact with a control of that style and gives us a better chance to figure out what makes it tick.
We also had a similar request from someone a few months back on the Watir google group, but the original poster ("Mahesh") never replied to potential answers so it is unknown if/how they resolved the issue.