My pagers will not align correctly on an Xpages view. The blank table cells on the left and right are huge.
Any help would be greatly appreciated:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<div
class="panel panel-default">
<!-- Default panel contents -->
<div
class="panel-heading">Panel heading</div>
<xp:viewPanel
rows="30"
id="viewPanel1"
viewStyleClass="table"
var="rowData">
<xp:this.facets>
<xp:pager
partialRefresh="true"
layout="Previous Group Next"
xp:key="headerPager"
id="pager1" />
</xp:this.facets>
<xp:this.data>
<xp:dominoView
var="view1"
viewName="(PC)" />
</xp:this.data>
<xp:viewColumn
id="viewColumn1">
<xp:this.value><![CDATA[#{javascript:""}]]></xp:this.value>
<xp:link
escape="true"
id="link1"
value="">
<xp:this.text><![CDATA[#{javascript:rowData.getColumnValue("serialNumber");}]]></xp:this.text>
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="complete">
<xp:this.action>
<xp:openPage
name="/xpPCForm.xsp"
target="openDocument">
<xp:this.documentId><![CDATA[#{javascript:rowData.getDocument().getUniversalID()}]]></xp:this.documentId>
</xp:openPage>
</xp:this.action>
</xp:eventHandler>
</xp:link>
<xp:viewColumnHeader
id="viewColumnHeader1"
sortable="true"
value="Serial Number" />
</xp:viewColumn>
</xp:viewPanel>
</div>
</xp:view>
=============================================================
I am still getting a space where I don't want it. Not horrible, but I do not like not knowing why something is occurring.
As you can see there is space to the left of the pager. It is a table column. I tried Bryan's suggestion and used several of the other facets, but that didn't work either. If I put the pager in northWest, then the first column of the table was extremely wide.
Oliver's suggestion shrunk the margin for top and bottom (so closer to the button and closer to the start of the view, but no change to the left column).
Just baffled as to why it is doing this?
You should use a different facet for the pager on the view panel. Sven Hasselbach had a good blog post explaining the layout of the various viewPnael facets: http://hasselba.ch/blog/?p=793. These additional facets explain why you can see empty table cells in firebug.
So you could try using the North or Northwest facets, instead of the headerPager facet:
<xp:this.facets>
<xp:pager
partialRefresh="true"
layout="Previous Group Next"
xp:key="north"
id="pager1" />
</xp:this.facets>
UPDATE:
If sticking with the headerPager facet and viewStyleClass="table", you could work around the spacing in a few ways.
Make that first empty TD invisible
.panel > .table > tbody > tr:first-child > td:first-child {
display:none;
}
Or re-style the pager to alter its position:
<xe:pagerSizes id="pagerSizes1"
xp:key="headerPager"
style="left:-20px;position:relative;">
</xe:pagerSizes>
In both cases, adding Oliver's suggested margin change helps too.
Usually I add this to my CSS:
.pagination {
margin: 0;
}
Though I've never seen those big spaces...
Related
I have tried a lot to keep a span valign middle. At the moment it looks like:
But I want that:
Here you can play around: Link
.wrapper{
display:table-row;
}
.image-left{
width:50px;
height:50px;
background-color:grey;
}
.text-block{
display:table-cell;
vertical-align:middle;
}
<div class="wrapper">
<div class="image-left">
</div>
<div class="text-block">
<span>One does not simply css.</span>
</div>
</div>
Whenever I need to align text, I tend to use display: table-cell with vertical-align:middle on the parent element of the span or the div where the text is inside.
But there are literally tons of ways to achieve this. I suggest you google a bit and see which one fits best in your situation. I just prefer table-cells since they auto adjust to all content in the row, and look clean.
Detailed info: http://phrogz.net/css/vertical-align/
Your link didnt work btw.
If you enable position:relative for the right one, you will see that it overflows the left one:
http://jsfiddle.net/bfwhoem5/1/
why?
How to solve that (while maintaining position:relative too). Also, I want when mouseover with INSPECT, the right one should not be overflowed over left.
p.s. I dont wish calc, because it is not yet well supported...
Here is one solution:
#left {
position:relative;
float:left; width:180px; background:#ff0000;
}
#right {
position:relative;
width: calc(100% - 180px); background:#00FF00;float:left;
}
<div>
<div id="left">
leftttt
</div>
<div id="right">
rightttt
</div>
</div>
Your issue is with one div having a float and the other not - also if you are going to put two items side by side you cannot have one with a width of 100%, either they will go on top of each other or go to the next line depending on their position relative to each other.
Ok, this will probably be simple to resolve, but I am a graphic designer & not a developer so wondering if someone can help me out. I have played around with positions but not such luck.
So I have a header div with a backgroud image within it, but when I preview the html/css on ebay the background image within this div appears at the top of the browser (conflicting with the ebay standard header) & not being positioned relative to the container div it is placed in. So basically the bg image is outside the div. I need it to be contained with the div I want it in.
Any help would be appreciated. (This may be a repetitive topic, so sorry about that)
Code:
<div id="HeaderContainer">
<div id="BGHeader"></div>
</div>
#HeaderContainer{
position:relative;
}
#BGHeader {
position:absolute;
top:0;
height:420px;
width:100%;
background-image:url(imagehere.jpg);
background-repeat:repeat-x;
}
You should post your html and css. At least the relevant parts. But having not seen them I would say my best guess is you're using absolute positioning on the header.
You need to wrap that in another element that's relative positioned.
<div id="container">
<header>header here</header>
</div>
where your css is like so:
#container{
position:relative;
}
header{
position:absolute;
top:0;
left:0;
}
If I'm wrong about your needs or situation let me know and I can update.
I am using orbit for slideshow requirements, however I am not able to add captions.
The documentation says this :-
<div id="featured">
<img src="overflow.jpg" alt="Overflow: Hidden No More" />
<img src="captions.jpg" alt="HTML Captions" data-caption="#htmlCaption" />
<img src="features.jpg" alt="and more features" />
</div>
<!-- Captions for Orbit -->
<span class="orbit-caption" id="htmlCaption">I'm A Badass Caption</span>
I am using haml and doing something like this :-
.container
.row
.two.columns
=render "left_navigation"
.ten.columns.destination_tabs
.contianer
.row
.ten.columns
%h3 Featured Destination
%hr
-if #preferred.blank?
%h5 No Featured destinations currently
-else
#featured
-#preferred.each do |destination|
-destination.destination_photos.each do |photo|
=image_tag(photo.picture.thumb_large.url, :alt =>"html captions", :data-caption => "#htmlCaption")
.orbit-caption#htmlCaption
="sfsdf"
This obviously gives error because I cannot give a syntax like :data-caption I tried lot of stuff but couldn't get it right yet can anyone help?
You can use arbitrary strings as symbols by simply quoting them:
:"data-caption" => "#htmlCaption" #note the quotes around data-caption
I am trying to show a component,
<div dojoType="dojox.layout.TableContainer" cols="2" labelWidth="50%" colspan=2 id="durationPane" style="display: none;margin-left: 9px;" showLabels=false>
<div dojoType="dijit.form.DateTextBox" required="true" onChange="var x=arguments[0];x.setDate(x.getDate()+1);dijit.byId('toDate').constraints.min = x;" constraints="{datePattern:'MMM dd yyyy'}" label=" From Date :" id="fromDate" placeHolder="From Date" style="margin-bottom: 50px"></div>
<div dojoType="dijit.form.DateTextBox" require="true" onChange="var x=arguments[0];x.setDate(x.getDate()-1);dijit.byId('fromDate').constraints.max =x;" constraints="{datePattern:'MMM dd yyyy'}" label="To Date :" id="toDate" placeHolder="To Date" name="vpnReport._toDate" ></div>
</div>
dijit.byId('durationPane').show();
But it's not showing.
This is a recurring problem with some Dojo "animation" effects such as show, hide, wipeIn, wipeOut, etc. For some reason, if you want page elements to start hidden, so you can show them latter, you cannot initialize them with "display: none" or "visibility: hidden" in the CSS.
Three different workarounds (all of which imply you do not have "display:none" set in the "durationPane" style):
Add the following CSS to the duration pane: position: absolute; left: -999em; then, when you call .show(), also set style to left:0 - you only need to this the first time you call show, because on the next .hide() / .show(), everything works well. This is probably the worst solution because you have to make your element absolute, which can be messy.
Start with the element visible, and then hide it onload, e.g.
dojo.ready(function() { dijit.byId('durationPane').hide(); });
Start with the element visible, and the add the display:none also onload, e.g.
dojo.style('durationPane', { 'display' : 'none' });
This will do what you want. If anyone out there knows why Dojo has this strange behavior, and if there is a more elegant way to fix this problem, please let us know...