With Bootstrap 3 there is an easy solution to center multiple columns as described here: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns
Would it be possible to do this with Yahoo pure.CSS? And if yes, how?
For your suggestions and help many thanks in advance!
You can accomplish this by creating a new CSS helper class to center the .pure-u-* items within a pure grid div (.pure-g):
.center {
justify-content: center;
}
justify-content is used because .pure-g uses flexbox. Adding the .center class to the div that defines the pure grid will then center the children:
<div class="pure-g center" style="background-color:blue">
<div class="pure-u-1 pure-u-md-1-3" style="background-color:teal">
column 1
</div>
<div class="pure-u-1 pure-u-md-1-3" style="background-color:red">
column 2
</div>
</div>
This CodePen has two examples of centered responsive grids.
Related
I'm trying to add multiple leaflet maps dynamically in my Nuxt Vue 3 app.
I'd like to do something like this:
<div v-for="(item, index) in listitems">
<div id="map" :ref="dynamicmap[index]"></div>
</div>
and then in onMounted:
for(n=0; n<countitems; n++)
{
map2[n] = L.map(dynamicmap[n]);
}
How I can achieve this?
Thanks a lot!
Samuel
Have you tried to encapsulate a/one map as a separate Vue component?
<div v-for="(item, index) in listitems">
<MyLeafletMap :key="index"/>
</div>
MyLeafletMap.vue then consists only of
<div id="map" :ref="dynamicmap"></div>
we use Material Showcase in iOS and FancyShowCaseView in Android to provide tutorial-esque
Reveal animations
Focus user on a specific view or position
Is there anything we can use for bootstrap that would do the same? We had (in desperation) looked at modal popovers but they didn't really work well.
If it's jquery compatible it is still fine.
We'd like to simply pass a div and give it "focus" and have access to some sort of dismiss callback.
Does anyone have any experience of this sort of product?
I'n not super familiar with the two showcases you mentioned, but animations are possible with bootstrap and JQuery, with a wide variety of possibilities. I'll list a few I know of below.
Pure CSS
Pure CSS Animations the most basic, but not always very elegant.
More complex CSS
This example shows how to get a simple attention getting blink animation. It may be enlightening on how to make more complex CSS animations:
The HTML:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="container">
<div class="row">
<a href="#" class="intro-banner-vdo-play-btn pinkBg" target="_blank">
<i class="glyphicon glyphicon-play whiteText" aria-hidden="true"></i>
<span class="ripple pinkBg"></span>
<span class="ripple pinkBg"></span>
<span class="ripple pinkBg"></span>
</a>
</div>
</div>
</div>
The CSS:
.pinkBg {
background-color: #ed184f!important;
background-image: linear-gradient(90deg, #fd5581, #fd8b55);
}
.intro-banner-vdo-play-btn{
height:60px;
width:60px;
position:absolute;
top:50%;
left:50%;
text-align:center;
margin:-30px 0 0 -30px;
border-radius:100px;
z-index:1
}
.intro-banner-vdo-play-btn i{
line-height:56px;
font-size:30px
}
.intro-banner-vdo-play-btn .ripple{
position:absolute;
width:160px;
height:160px;
z-index:-1;
left:50%;
top:50%;
opacity:0;
margin:-80px 0 0 -80px;
border-radius:100px;
-webkit-animation:ripple 1.8s infinite;
animation:ripple 1.8s infinite
}
#-webkit-keyframes ripple{
0%{
opacity:1;
-webkit-transform:scale(0);
transform:scale(0)
}
100%{
opacity:0;
-webkit-transform:scale(1);
transform:scale(1)
}
}
#keyframes ripple{
0%{
opacity:1;
-webkit-transform:scale(0);
transform:scale(0)
}
100%{
opacity:0;
-webkit-transform:scale(1);
transform:scale(1)
}
}
.intro-banner-vdo-play-btn .ripple:nth-child(2){
animation-delay:.3s;
-webkit-animation-delay:.3s
}
.intro-banner-vdo-play-btn .ripple:nth-child(3){
animation-delay:.6s;
-webkit-animation-delay:.6s
}
MD Bootstrap Library
The MD Bootstrap Library has more complex animations that are easy to use and require less code to get functional than pure CSS animations. The Attention Seeker animations seem most similar to some of what I saw on a quick search for Material Showcase. The link above has lots of examples on one page so you can see what kind of behaviors are supported.
UI Cookies
This site also has many free and licensed examples of bootstrap animations that are even more complex.
Simply put, how can you change the border color of a Chosen jQuery select box? I am assuming you can do it with CSS but I can't quite figure out how.
$(".pnChosen").chosen({
search_contains: true
});
<select required class="pnChosen"></select>
I can use this to change the border color of all of them, but I only want to change ones that I mark as required.
.chosen-container{
border: 1px solid red;
}
And I also want to change the background color when they are disabled if that is possible.
You can use chosen's option inherit_select_classes.
Give required class on select element, and set css for this selector .required>chosen-single
$(".pnChosen").chosen({
search_contains: true,
inherit_select_classes: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css" rel="stylesheet" />
<style>
.required>.chosen-single {
border: 1px solid #EE0000;
}
</style>
<select required class="pnChosen required">
<option>Option 1</option>
<option>Option 2</option>
</select>
Another option is to use the adjacent sibling combinator (+) selector in CSS to achieve the desired styling.
For example:
HTML
<select id="myselect" required="required">
...
</select>
<div id="myselect_chosen" class="chosen-container chosen-container-single">
<a class="chosen-single">
...
</a>
</div>
CSS
select:required + div.chosen-container a { ... }
This would apply the desired style(s) to your div.chosen-container a DOM element immediately following select:required. Just be aware that you may still have to establish CSS priority if you're attempting to override an existing Chosen style so your definitions can supersede any existing chosen styles.
Reference: Adjacent Sibling Combinator
On a page, using ng-repeat, I try to place buttons on a grid layout.
Iterating through an array which is defined in a controller $scope.btnNames[]. buttons are place on Total number of buttons equal to array size of $scope.btnNames[]
I would like to put say 4 buttons per row.
As $scope.btnNames[] size is 20, then I like to place 20 buttons on 5 rows,
where each row will have 4 buttons.
1) on Controller :
- I have an array with button names
$scope.btnNames['aa', 'bb', 'cc','dd', 'ee', 'ff'....] whose size is 20.
2) on the page:
- using ng-repeat, iterate throught the
$scope.btnNames[] and put buttons as per follwoing code
<body ng-controller="PopupCtrl">
<div class="row responsive-sm">
<div ng-repeat="btnName in btnNames">
<button id={{$index}} class="button button-dark col" >{{btnName}}</button>
</div>
</div>
Please help me defining class="row" and class="col" and such a way that,
during ng-repate, after 4th button, it should add a new row and place 4 buttons till it reach end of ng-repeat.
Being new to both ionic and angulrJs, I'm not able to define class="row" during ng-repeat ( similar like a for loop, where, put a new class="row", when iterator counter in this case {{index}} greater than 4.
Use flex-wrap
You can get this behavior by using style="flex-wrap: wrap;" + the following CSS classes:
<div class="row" style="flex-wrap: wrap;">
<div class="col col-25" ng-repeat="btnName in btnNames">
<button class="button button-dark" >{{btnName}}</button>
</div>
</div>
http://codepen.io/Jossef/pen/doeJJP
You can find a possible solution here : https://stackoverflow.com/a/23780288/1015046
I have taken the above solution and implemented it for Ionic : http://codepen.io/arvindr21/pen/EaVLRN
<div ng-repeat="btnName in btnNames">
<div ng-if="$index%4==0" class="row">
<div class="col">
<button id={{$index}} class="button button-dark">{{btnNames[$index]}}</button>
<button id={{$index+1}} class="button button-dark">{{btnNames[$index+1]}}</button>
<button id={{$index+2}} class="button button-dark">{{btnNames[$index+2]}}</button>
<button id={{$index+3}} class="button button-dark">{{btnNames[$index+3]}}</button>
</div>
</div>
</div>
If you want the grid to be dynamic, you can take a look at : https://stackoverflow.com/a/27080632/1015046
Thanks.
Ok, So if you want to stack images like me in rows, See how the ng-repeat holds col-50.
<div class="row gallery">
<div class="col col-50" ng-repeat="photo in photos">
<img id="fitWidth" ng-src="{{photo.url}}"/>
</div>
</div>
Then with your css.
.gallery {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
Tested on IOS, Hope that helps :)
I would just like to add to the #Jossef Harush's answer (which, btw, worked).
However, when I tested it in the Ionic View application on iPhone, it didn't work. When I tested it in the Ionic View application on Android it worked as expected (multiple rows).
The solution was to add this as a style:
style="display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap;"
because, as you can see here Safari needs a -webkit prefix.
Hope this helps someone who will choose this solution over #Arvind's.
Worked for me as soon as I added flex-wrap: wrap in the styling.
Since i have set col-50 I started getting rows with two columns as intended.
Example:
<div class="row" style="flex-wrap: wrap;">
<div class="col col-50" ng-repeat="picture in pictures">
{{picture.src}}
</div>
</div>
There's a limitTo starting $index in AngularJS,
Maybe that can simplify things
<div class="row" ng-repeat="element in elements" ng-if="$index % 4==0">
<div class="element" ng-repeat="element in elements|limitTo:4:$index">...</div>
</div>
That will make sure that {{ index + 1 }} fall on a non-existent cell ..
I am building a responsive front-end using Typo3 & the gridelements extension. I want to wrap each individual content element inside of a gridelement column in a wrapper, like this:
<div class="row"> <-- wrap around whole gridelements content element
<div class="column size2"> <-- wrap around gridelements column
<div class="module> <-- wrap around content inside of gridelement column
CONTENT
</div>
<div class="module>
CONTENT
</div>
</div>
</div>
If I go and put a div class="module" wrap around all ordinary content elements, then it gets wrapped TWICE- once around the gridelements "element", and once around each child content element:
<div class="module"> <-- WRONG!
<div class="row"> <-- wrap around whole gridelements content element
<div class="column size2"> <-- wrap around gridelements column
<div class="module> <-- wrap around content inside of gridelement column
CONTENT
</div>
<div class="module>
CONTENT
</div>
</div>
</div>
</div>
I guess that I can either a) wrap all content elements with div class="module", EXCEPT for content element of type gridelements, OR b) wrap children of gridelements with div class="module". What would be the best approach, and what would the TypoScript for either of these options look like?
i am not sure, but i think this is what you are looking for.
# the grid element uid
1 < lib.gridelements.defaultGridSetup
1 {
columns {
# colPos ID
10 < .default
10.wrap = <div class="row">|</div>
# this adds the value "module" as class and wraps a content element
# which is inside this grid. (like a replace for csc-default)
default.renderObj.20 {
stdWrap.innerWrap.cObject.default.20.10.value = module
}
}
}
maybe there is a better solution. if so, let me know
EDIT:
hmm, i slightly misunderstood the whole thing, so i changed a bit :P