I am using the Scriptaculous Draggable/Droppable scripts and have a problem when dragging into a scrolling div. I have the following layout (based on this question):
#grid-container { left:33px; position:relative; width:300px; }
#grid { width:310px; height:400px; overflow:auto; margin-bottom: 15px; }
#grid-container ul { width:400px; list-style-type:none; white-space: nowrap; }
#grid-container li { display:inline; list-style-type:none; padding:5px 15px 5px 15px; height:88px; text-align:center }
.image-row { margin-left: 10px; }
.grid-image { height:50px; margin-left:-20px; }
Here is the html:
<div id="grid-container">
<div id="grid">
<div id="row1" class="image-row">
<ul>
<li><img id="img1" class="grid-image" src="images/img1.jpg"></li>
<li><img id="img2" class="grid-image" src="images/img2.jpg"></li>
<li><img id="img3" class="grid-image" src="images/img3.jpg"></li>
<li><img id="img4" class="grid-image" src="images/img4.jpg"></li>
</ul>
</div>
<div id="row2" class="image-row">
<ul>
<li><img id="img5" class="grid-image" src="images/img5.jpg"></li>
<li><img id="img6" class="grid-image" src="images/img6.jpg"></li>
</ul>
</div>
</div>
</div>
I have another div with draggable items, while all of the img elements are droppable. This works very well for most cases, but when there are too many images for the grid and it has to scroll, I run into issues. I can still drag/drop into most items in that div, but when I scroll down and then try to drag onto an item in the bottom of the list, it drops on the row that was at the bottom before I scrolled the div.
Even if I set the scroll attribute when creating the Draggable items, it will scroll the grid div, but not use the proper Droppable item.
Is there any way to make the Draggable items drop onto the proper Droppable element regardless of if the containing div is scrolled or not?
Yesterday I found this drag-drop-problem-in-scroll-div when having the same problem. Basically the solution is to add Position.includeScrollOffsets = true; to your code.
Hope it helps
Related
I'm using Ionic5 Angular and I would like to create a highlight around ion-avatar when the user clicked on it and will be disappeared if the user clicked on it again.
Users can click on each image (one at a time) and there will be a highlight around the image.
HTML:
<ion-card class="scrolling-wrapper">
<div class="item" *ngFor="let item of list">
<ion-avatar>
<img [src]= "source to image" >
</ion-avatar>
</div>
</ion-card>
SCSS:
.scrolling-wrapper {
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
.item {
display: inline-block;
margin: 4px;
}
}
You have to proceed like this:
Declare an empty variable (example: highlightedAvatar = "";)
Capture the id of the clicked item from the .html
If your variable has a value, you empty it, otherwise you assign the id
create the styles you want to add to the .css (e.g. brightness...)
Load the css class with a condition
You seriously need to provide some code so you can understand exactly the procedure
Edit:
HTML:
<ion-card class="scrolling-wrapper">
<div class="item" *ngFor="let item of list">
<ion-avatar [class.highlighted]="highlighted == item.id" (click)="selectAvatar(item.id)">
<img [src]= "source to image" >
</ion-avatar>
</div>
</ion-card>
TS:
export class AppComponent{
highlighted = "";
...
selectAvatar(id){
if (this.highlighted === "") {
this.highlighted = id;
} else {
this.highlighted = "";
}
}
SCSS:
.highlighted{
filter: brightness(120%);
}
Of course you can toy around with the css to style your way of highlighting
I have just added a Google Adsense ad to my page. I have a navbar on my page that is fixed to the top of the screen. The adsense ad is inside a DIV that normally behaves normally and displays under the navbar, but once the ad is displayed the ad displays ontop of the navbar.
Navbar code:
#navbar {
position: fixed;
width: 100%;
height: 66px;
background-color: #1C1C1C;
}
<div id="navbar">
<!-- Orange bar in Navbar-->
<div id="topbar"></div>
<div id="buttons">
<!--Home button-->
<p class="button">- Home</p>
<!--Divider-->
<div class="divider"></div>
<!--Raffles Button-->
<p class="button">Raffles</p>
<!--Divider-->
<div class="divider"></div>
<!--Get tokens Button-->
<p class="dbutton">Get<br>Tokens</p>
<!--Divider-->
<div class="divider"></div>
<!--Token lotto Button-->
<p class="dbutton">Token<br>Lotto</p>
</div>
<div id="signin">
</div>
<div id="profile">
</div>
</div>
Ad DIV:
div#ad300x600 {
margin-left: 50px;
height: 600px;
width: 300px;
background-image: url("miscimg/YUADBLOCK.jpg");
background-size: 0 0;
float: left;
}
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- csgohumblelargeskyscraper -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-xxx"
data-ad-slot="xxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
I have tried giving the Ad DIV a z-index: -100; and the Navbar a z-index: 1; but that hasn't helped. How can I make the ad display under the Nav bar. Also something that would be nice instead would be if the ad wouldn't move. But if I give it the position: fixed; tag it pops into the top right corner of the screen and stays there.
http://i.stack.imgur.com/Wts4Q.png
(The grey is the Navbar the white is the Ad)
Seems that if I do an exaggerated amount of z-index like "99999999999" it works fine. Sorry to have posted this and figured out a solution myself.
I am trying to show a grid in one of my ionic views that has a 4x3 grid. I want the grid to fit into the view, making all the rows have the same height and all the columns same width also all the content in the cells aligned center both vertically and horizontally.
I'm not so good at CSS so I'm having a hard time with it, any help?
Ionic has built in grid classes. You can do something like this
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
They have a very nice documentation on their grid system and other ways to set up rows and columns. link: http://ionicframework.com/docs/components/#grid
for css centering this should work: just place a div around your rows and columns and apply this the classes. I am not great a css but i will try to help :P
<div class=container>
<div class="row contained">
<div class="col">Centered!</div>
</div>
</div>
div.container {
height: 50%; }
div.contained {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
I would like to have a form which has a horizontal layout on the first level, but then within one row there can be a form "inline" which I want to have a vertical (the default) layout. Is there an easy way to achieve this?
Note: .form-inline doesn't do what I'm looking for, as it doesn't put the inside labels on top of the inputs.
So far I have something like this:
<div class="form-horizontal">
<div class="control-group">
<label class="control-label">
outer label
</label>
<div class="controls ### SOMETHING TO CLEAR/OVERRIDE form-horizontal ###">
### INLINE FORM WITH SAME STRUCTURE IS HERE ###
</div>
</div>
</div>
Boostrap can't do this by default, but I've included this in my fork https://github.com/jasny/bootstrap/blob/master/less/jasny-forms.less#L40
Please consider using Jasny's extensions to Bootstrap http://jasny.github.com/bootstrap
or just use this CSS
.form-vertical .form-horizontal .control-group > label {
text-align: left;
}
.form-horizontal .form-vertical .control-group > label {
float: none;
padding-top: 0;
text-align: left;
}
.form-horizontal .form-vertical .controls {
margin-left: 0;
}
.form-horizontal .form-vertical.form-actions,
.form-horizontal .form-vertical .form-actions {
padding-left: 20px;
}
.control-group .control-group {
margin-bottom: 0;
}
With the HTML
<form class="form-horizonal">
# Horizal controls here
<div class="form-vertical">
<div class="control-group">
<label class="control-label">Label</label>
<div class="controls">Something here</div>
</div>
</div>
</form>
Here is #jasny-arnold-daniels CSS updated for Boostrap 3. In 3 form-group replaces control-group, form-control replaces control. Also needs #user9645 's change to width. New CSS is:
.form-vertical .form-horizontal .form-group > label {
text-align: left;
}
.form-horizontal .form-vertical .form-group > label {
float: none;
padding-top: 0;
text-align: left;
width: 100%
}
.form-horizontal .form-vertical .form-control {
margin-left: 0;
}
.form-horizontal .form-vertical.form-actions,
.form-horizontal .form-vertical .form-actions {
padding-left: 20px;
}
.form-group .form-group {
margin-bottom: 0;
}
You do not need to write custom CSS for Bootstrap 3. Instead of putting your class of form-horizontal on the form tag, only put a wrapper div with that class around the form elements that you want to be horizontal (and supporting column-size classes for the horizontal items).
For example, this would work:
<form>
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">I'm a horizontal form element</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<label>I'm a vertical form element</label>
<input type="text" class="form-control">
</div>
</form>
This works because the vertical form is automatically used for a form with no class explicitly stated. That 'lack of a class' can be seen in the docs here.
I was unsure exactly what you were looking for but I tried to guess.
I made a form with a two vertical lines the second line with multiple form elements.
I used inline-block to do this.
http://jsbin.com/icoduh/1/edit
I just want to use the like button and not show any comment popup. How can I do this?
Thanks.
Yes, you can do it with a little but of css to hide the DOM element that Facebook adds.
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
display: none !important;}
I didn't have success with the above approach. What worked for me was to create a container element with the exact dimensions of the facebook like button and set overflow="hidden" to the container. This worked perfectly for me.
.fb_edge_widget_with_comment iframe { height: 20px !important; overflow: hidden; }
<style>
#fb-container {
height: 20px !important;
width: 93px !important;
overflow: hidden !important;
}
</style>
<div id="fb-container">
<div id="fb-root">
<div class="fb-like" data-href="https://www.facebook.com/youraddr" data-layout="button_count" data-width="100" data-show-faces="false" data-share="false">
</div>
</div>
</div>
just add this style to the style="overflow: hidden !important;" to the div like i have done below
<div class="fb-like pull-right" data-href="http://thegoldbook.in/demo/singlequestion.php?ques_no='.$ques_id.'" data-width="100" data-layout="button" data-action="like" data-show-faces="false" data-share="true" style="overflow: hidden !important;"></div>