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.
Related
In Bulma, how does one change text color for multiple items at once?
That is, being low-vision, I want to change all text on a navbar to be black rather than the fainter gray.
I'm new to Bulma and so far see I can use "has-text-black" helper but have to add them to every link.
<nav id="navbarMain" class="navbar is-spaced" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item is-size-4 has-text-black" href="/">
<span class="icon is-large is-circle">
<i class="fas fa-cube has-text-primary fa-lg"></i>
</span>
My Site
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item has-text-black" href="/about/">
<span class="icon has-text-link">
<i class="fas fa-info-circle"></i>
</span>
About
</a>
....
I was hoping to add the helper just in one place in the class on one div or container containing the navbar link items but that doesn't seem to work.
I looked in the customization docs and tried setting $text: black; but that didn't work either.
Is there a way to set all the grayish text color in a section or container to black?
And, how does one set/customize the global or site-wide text color from grayish to black (or something else?
(Otherwise, is there detailed directions for all the color variables and how to revise them in the correct order?)
Thanks in advance.
Ralph
The key is to pay attention to documentation. Bulma provides SASS variables for all its components or elements to play around with for making your own customization. The objective is to write the custom CSS AS LESS AS POSSIBLE. Here's the link
https://bulma.io/documentation/components/navbar/#colors
In your project's global SCSS file, you can add these SCSS variables and add the colors of your choice:
$navbar-burger-color: #f1f1f1;
$navbar-background-color: #273643;
$navbar-item-hover-background-color: #3f4f62;
$navbar-item-hover-color: $white;
$navbar-item-color: #f1f1f1;
$navbar-dropdown-arrow: #f1f1f1;
$navbar-tab-active-color: #f1f1f1;
$navbar-tab-active-background-color: #273643;
$navbar-dropdown-background-color: $primary;
If you are confused over the color combination, visit--> https://coolors.co
Cheers!! :)
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'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 am trying to arrange several dynamically multi-sized DIVs to fit in a container. As per members advice here in stackoverflow, I am trying to get the benefit of jquery masonry to get my job done. But I have problem as described below.
Is their any special tricks when using jquery masonry to solve this problem? I read their documentation, but I surely missed something.
If anybody can help, it'll be highly appreciated.
HTML CODE:
<div class="blockscont">
<div class="blocks" style="width:200px;height:200px">A</div>
<div class="blocks" style="width:400px;height:400px">B</div>
<div class="blocks" style="width:200px;height:200px">C</div>
<div class="blocks" style="width:200px;height:200px">D</div>
<div class="blocks" style="width:200px;height:200px">E</div>
<div class="blocks" style="width:200px;height:200px">F</div>
<div class="blocks" style="width:600px;height:200px">G</div>
<div class="blocks" style="width:200px;height:200px">H</div>
<div class="blocks" style="width:200px;height:200px">I</div>
<div class="blocks" style="width:400px;height:200px">J</div>
</div>
JQUERY MASONRY:
$(function() {
$(window).load(function(){
$('#blockscont').masonry({
itemSelector : '.blocks',
columnWidth : 0
});
});
});
OUTPUT:
I don't see a problem using Masonry for this layout, as long as the container is the correct size you will get the format you want.
I've set up your example in jsFiddle and it seems to work ok.
HTML (same as yours)
<div id="blockscont">
<div class="blocks" style="width:200px;height:200px">A</div>
<div class="blocks" style="width:400px;height:400px">B</div>
<div class="blocks" style="width:200px;height:200px">C</div>
<div class="blocks" style="width:200px;height:200px">D</div>
<div class="blocks" style="width:200px;height:200px">E</div>
<div class="blocks" style="width:200px;height:200px">F</div>
<div class="blocks" style="width:600px;height:200px">G</div>
<div class="blocks" style="width:200px;height:200px">H</div>
<div class="blocks" style="width:200px;height:200px">I</div>
<div class="blocks" style="width:400px;height:200px">J</div>
</div>
Script (simplified for use in jsfiddle)
$(function(){
$('#blockscont').masonry({
itemSelector: '.blocks'
});
});
I've removed the option columnWidth : 0 as it does not seem to make any difference.
CSS
.blocks {
background-color: #D7E4BC;
outline:1px solid white;
}
outline is used, not border, to show the blocks but prevent their size increasing and messing up the layout (in Chrome at least).
There should be no need to apply floats to any element as it is Masonry's job to position the blocks.
Just for posterity (as i came across this while having a similar problem) Gaps in the layout can be cause by incorrectly setting the columnWidth.
If you don't explicitly state the columnWidth it is taken from the width of the first item. My problem came about because my first item was supposed to cross two columns. I got over this by using another item's width to set columnWidth.
$('#m-container').masonry({
itemSelector: '.m-item',
columnWidth: $('.size1')[0]
});
I am trying to draw two google treemaps and keep them in tabs and am getting the error:
A negative value for svg attribute <width> is not allowed
Only one of the treemaps is visible. I am assuming the other one is not able to finish drawing. There is no other description of the error in the console. (Google chrome).
My code:
http://jsfiddle.net/tTqjr/
Solved the problem. The div element on which Google Annotated timeline was being created had display:none property. Just made sure that display:none is changed to display:block before calling the draw function.
Appreciate this wasn't the OP's issue, but I had the same error, and setting display: block; didn't make any difference for me, but I had padding-top: 50px; on the div for the chart, and removing that resolved the issue for me!
I wrapped my two divs in a boostrap row/col pair to solve and togglke them with hide()/show()/toggle() buttons.
From
<div class="row">
<div class="col-md-12" id="chart_div">
</div>
</div>
<div class="row">
<div class="col-md-12" id="chart_div2">
</div>
</div>
to:
<div class="row">
<div class="col-md-12">
<div id="chart_div">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="chart_div2">
</div>
</div>
</div>