So, I find myself in a strange place. In an XPage, I pop up a Dialog control from the Extension Library. Nothing special.
Now, that dialog must contain an <iframe> and that's where it gets hairy.
That iframe holds some content, so I need to style it so it is large enough to show everything without scroll bars. Hence, I need to resize the Dialog to accommodate that.
The pared-down html for the dialog is as follow :
<div
class="dijitDialog dijitDialogFocused dijitFocused"
role="dialog"
...
style="position: absolute; left: 624px; top: 250px; opacity: 1; z-index: 950;"
>
<div ... class="dijitDialogTitleBar"...>
...
</div>
<div class="dijitDialogPaneContent" style="width: auto; height: auto;">
<div id="view:_id1:dialogEditPerson:_content">
<form id="view:_id1:dialogEditPerson:_content:form1" method="post" action="..." class="xspForm"...>
<div ...>
<iframe ... src="..."></iframe>
</div>
</form>
</div>
</div>
</div>
So far, the dijitDialogEtc classes come from tundra.css, out of the box. I suppose I'll overload them in my own .css
Now I'm a bit puzzled by some traits :
where does the inline style, specially height and width, come from ? How can I act on them ?
inside the <div class="dijitDialogPaneContent" ... is another div, nameless, classless. How do I get hold of it ? Ultimately, that's my core concern : until I style it the way I see fit, all other efforts are in vain.
Any hint greatly appreciated.
Thanks
Add a panel as the root element to your dialog box and give it a width and height:
<xe:dialog
id="dialog1">
<xp:panel
style="width:500px;height:300px">
... your elements like iframe ...
</xp:panel>
</xe:dialog>
The size of dialog box gets automatically computed depending on your content size. It is the panel with the given size in this case.
If the iframe is the only content of your dialog box then you can set the size to iframe itself:
<xe:dialog
id="dialog1">
<iframe style="width:500px;height:300px" src="http://..." />
</xe:dialog>
Related
Hi I am showing items from library to the main page using Content Query. TO scroll this items i am using Marquee now i want to stop when OnMouseOver and again start on out i use onmouseover="stop()" onmouseout="start()" and button to stop but its not working please is the code i have. Can anyone help how use or is there any option. Thank you.
<marquee id="test" bgcolor="rgba(235,235,235,0.8)" scrolldelay="10" direction="up" scrollamount="2" style="width: 435px; height: 252px;">
<div>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
<div class="ms-rtestate-notify ms-rtestate-read 7678e8de-25e2-420f-a052-a9ae8bd6a173" id="div_7678e8de-25e2-420f-a052-a9ae8bd6a173" unselectable="on">
</div>
<div id="vid_7678e8de-25e2-420f-a052-a9ae8bd6a173" unselectable="on" style="display: none;">
</div>
</div>
<style>
#WebPartWPQ2 a {
color:#000000 !important;
}
</style></div></marquee>
Looks like, if I understand you correctly, you would like to add a MouseOver and MouseOut effect to a marquee. If that is correct. all you needed to do is tell the browser that you wanted THIS marquee and it would have worked. your code right now does not say which marquee you want the JavaScript to work towards.
syntax = some-event="(What)*Target****.*(Which)action();"
this.stop(); or this.start
onMouseOver="this.stop();"
Hope this is what you were looking for. If not could you rephrase your
question. I had a hard time understanding you.
<style>
#WebPartWPQ2 a {
color: #000000 !important;
}
</style>
<marquee onmouseover="this.stop();" onmouseout="this.start();" id="test" bgcolor="rgba(235,235,235,0.8)" scrolldelay="10" direction="up" scrollamount="2" style="width: 435px; height: 252px;">
<div>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
<div class="ms-rtestate-notify ms-rtestate-read 7678e8de-25e2-420f-a052-a9ae8bd6a173" id="div_7678e8de-25e2-420f-a052-a9ae8bd6a173" unselectable="on">
</div>
<div id="vid_7678e8de-25e2-420f-a052-a9ae8bd6a173" unselectable="on" style="display: none;">
</div>
</div>
</div>
</marquee>
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
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.
I'm trying to create a small html fragment (a div element) consisted of three parts: a label, textbox, and a button.
Within that div element the label would be on the left (autosized), the button would be on the right (again, autosized) and the textbox should take up all remaining space within the parent div element.
This is what I've tried (assuming I want my div to be 400 pixels wide):
<div style="width:400px">
<div style="float: left">Label</div>
<input style="width:100%"> <!-- doesn't work -->
<button type='button' style='float: right'>Click</button>
</div>
The trouble is, my textbox does not get resized automatically. Add 'width=100%' to the textbox doesn't work.
What would be the way to make it take up all remaining space between the label and the button? Ideally it should be done just by applying some styles, not by introducing new elements.
(I guess the issue isn't related only to div element, but that just happens to be my work scenario.)
Perhaps something like this will be what you want. Yeah I know it's cheating. And yeah, I agree with #Paul re: label, so i swiped his id. :)
EDIT: Obligatory Self-Referencing Demo
Warning: not tested in all browsers.
CSS:
div {
display: table;
width: 400px;
white-space: nowrap;
}
label {
display: table-cell;
padding-right: 3px;
width: 1em;
}
input {
display: table-cell;
width: 100%;
}
span {
display: table-cell;
padding-left: 6px;
width: 1em;
}
HTML:
<div>
<label for="my-very-special-input">Label</label>
<input id="my-very-special-input"/>
<span><button type="button">Click</button></span>
</div>
The only way I could think of making this work was with percents. I enclosed everything in seperate divs (probably uneccesary) and then assigned percentages to each div. Take a look:
<div style="width=400px">
<div style="float:left; width:10%">Label</div>
<div style="float: left; width:70%"><input style="width:100%"></div> <!-- doesn't work -->
<div style="float: right width:20%"><button type='button' style=''>Click</button></div>
It's by no means a perfect solution, but hopefully it will suit your needs to some extent.
Elliott
Does it help if you wrap the <input> in a <div> with overflow: hidden?
<div style="width: 400px;">
<div style="float: left;">Label</div>
<div style="overflow: hidden;">
<input style="width: 100%;">
</div>
<button type="button" style="float: right;">Click</button>
</div>
See xHTML/CSS: How to make inner div get 100% width minus another div width.
And although it’s off-topic, please note that your label should be, well, a <label>.
<div style="width: 400px;">
<label for="my-very-special-input" style="float: left;">Label</label>
<div style="overflow: hidden;">
<input id="my-very-special-input" style="width: 100%;">
</div>
<button type="button" style="float: right;">Click</button>
</div>