Develop Reference

Pseudo element not showing in React on paragraph tag despite using display block

This pseudo element ::after won't show up in my browser at all. I am using React.js and Material UI makeStyles.
This is the code:
modalTitle: {
borderBottom: '2px solid red',
display: 'block',
margin: '10px 15px',
padding: '0',
width: '100px',
'&::after': {
background: 'green',
content: '',
display: 'block',
height: '2px',
width: '2px',
},
},
Note that the code below modalTitle shows up and works, only the pseudo element doesn't go through. Any thoughts?

This is a tricky one. When you use makeStyles, it accepts a styles object (or a function that returns an object). This object has the class names as keys and objects containing attribute-value pairs as values. These values are strings (like "block", "green", or "10px 15px").
The ::before and ::after pseudo-elements in CSS allows us to insert content onto the page. Every pseudo-element must have a CSS content property, without it the default value of content is set to normal/none, and no content is displayed.
The problem with your code is that you add content: '' in your object, but you need to pass an empty string as the CSS value, like this: content: '""'.
Similarly, if you want to insert some text using content you can't simply add the string, you need to use quotes around the text and pass it as a string:
// ❌ this one doesn't work
{
content: 'some text',
}
// ✅ this one does work
{
content: '"some text"',
}
So, you can use the following and it will add the element:
const useStyles = makeStyles({
modalTitle: {
borderBottom: '2px solid red',
display: 'block',
margin: '10px 15px',
padding: '0',
width: '100px',
'&::after': {
background: 'green',
content: '""',
display: 'block',
height: '2px',
width: '2px',
},
},
});

how to set the min-height and max-height in slimScroll?

how to add min-height and max-height in slimScroll plugin? I applying this plugin in text area , the textarea max-height reach it need to be scroll, textarea by default min-height 120px and max-height 200px
<script>
$(".editTextarea").slimScroll({
color: '#e5e5e5',
position: 'right',
alwaysVisible: false
});
</script>

if you look at the source code you can see the default option
var defaults = {
//Add these lines in your plugin source code
minHeight:'auto',
minWidth:'auto'
width : 'auto',
height : '250px',
size : '7px',
color: '#000',
position : 'right',
distance : '1px',
start : 'top',
opacity : .4,
alwaysVisible : false,
disableFadeOut : false,
railVisible : false,
railColor : '#333',
railOpacity : .2,
railDraggable : true,
railClass : 'slimScrollRail',
barClass : 'slimScrollBar',
wrapperClass : 'slimScrollDiv',
allowPageScroll : false,
wheelStep : 20,
touchScrollStep : 200,
borderRadius: '7px',
railBorderRadius : '7px'
};
i think you cannot add min-height and min-width through the plugin there are two options
study the source code and then add extra style attribute
or/ try to use css
add the commented lines in your source line (164 and 176)
var wrapper = $(divS)
.addClass(o.wrapperClass)
.css({
position: 'relative',
overflow: 'hidden',
width: o.width,
height: o.height
/*
min-heigth:o.minHeight,
min-width:o.minWidth
*/
});
// update style for the div
me.css({
overflow: 'hidden',
width: o.width,
height: o.height,
/*
min-heigth:o.minHeight,
min-width:o.minWidth
*/
});

Your question is hard to understand but I think what you are saying is to make the textarea only scrollable when it exceeds the max-height you want to set? You can not do that by default but you can change some of the source code.
height: o.height and change to 'max-height': o.height (line: 156 and 163)
Described in more detail in this thread: https://github.com/rochal/jQuery-slimScroll/issues/70

set height: auto and set the parent min-height
<div class='parent' style='min-height:400px;'>
<div class='scroll'>
//content
</div>
</div>
<script>
$(".scroll").slimScroll({
height: 'auto'
});
</script>

jQuery UI Dialog - content from iframe

I know a lot of variation of this question are available but none of them is working for what I have.
Currently I have div exposed on a page and I use following jQuery code create a dialog box control and style it:
hoverApplet = $("#s_" + actAppletPH + "_div");
hoverApplet.hide();
hoverApplet.dialog({ height: 'auto',
width: 'auto',
modal: true,
autoOpen:false,
title:'Hello World',
overlay: { opacity: 0.5, background: 'black'}
}).dialog("widget")
.find(".ui-dialog-titlebar").css({
"float": "right",
border: 0,
padding: 0
})
.find(".ui-dialog-title").css({
display: "none"
}).end()
.find(".ui-dialog-titlebar-close").css({
top: 0,
right: 0,
margin: 0,
"z-index": 999
});
Then I use following code to open this dialog on button click.
hoverApplet.dialog("open").dialog('option', 'position',[event.clientX,event.clientY]);
Now this below URL is suppose to give me same DIV at run time
http://localhost:8080/start.swe?SWECmd=GetApplet&SWEApplet=Activity+Form+Applet+-+SA&IsPortlet=1&SWESM=Edit&KeepAlive=1
I need to show the same dialog now that should get its content from iframe where source is above mentioned URL.
I don't know what change should I make to work properly.
Thanks

Javascript Libraray SLY - Scrollbar does not work

I'm having a problem with Sly scrollbars.
I want to set up a timline in which I cann scroll by dragging with the mouse and with a scrollbar. Scrolling with the mouse works fine but I can't get the scrollbar to work and there is no proper documentation.
Also there are no errors on the console.
this is my scrollbar:
<div id="scrollbar">
<div class="handle"></div>
</div>
this is the css:
#scrollbar {
width: 100%;
height: 30px;
background: #f00;
margin-top: 10px;
line-height: 0;
}
#scrollbar .handle {
width: 50px;
height: 30px;
background: #00f;
position: absolute;
}
and the javascript call to initate the scrolling
$("#timeline").sly({
dragSource : '.frame',
horizontal : 1,
itemNav: 'basic',
smart : 1,
activateOn : 'click',
mouseDragging : 1,
touchDragging : 1,
releaseSwing : 1,
scrollBy : 1,
activatePageOn : 'click',
speed : 50,
easing : 'easeInOutBounce',
swingSpeed : 0.07,
elasticBounds : 1,
dragHandle : 1,
dynamicHandle : 1,
clickBar : 1,
scrollbar : '$("#scrollbar")',
dragHandle : 1
});
I need this for a university project, so it would be really cool if somebody has a solution to my problem.

There are two little mistakes.
Change the line
scrollbar : '$("#scrollbar")'
to
scrollBar : $("#scrollbar")
and everything should work as expected.

Set fancybox-skin to fixed size and center all images

Im using fancybox version: 2.1.3 and what im trying to do is :
Set the width and height to 600px x 400px fixed.
If image is smaller than popup box make it center and dont resize.
For now this is my current setting :
index.html
$('.fancybox-buttons').fancybox({
minWidth: 600,
maxWidth: 600,
minHeight: 400,
maxHeight: 400,
width: 600,
height: 400,
autoScale : false,
fitToView : false,
jquery.fancybox.js
$.extend(F, {
// The current version of fancyBox
version: '2.1.3',
defaults: {
padding : 15,
margin : 20,
width : 600,
height : 400,
minWidth : 600,
minHeight : 400,
maxWidth : 600,
maxHeight : 400,
autoSize : false,
autoHeight : false,
autoWidth : false,
autoResize : false,
autoCenter : !isTouch,
fitToView : false,
aspectRatio : false,
and the result is something like this :
http://i.imgur.com/WX2ak.jpg but when i click next http://i.imgur.com/1HXhe.jpg .. you can see the size is not fixed that is the main problem ..
what i want if image is smaller the popup and image size should be like this
P/s : this is first time i try to modified fancybox maybe its a bit confusing for me.

I have "ugly way", but i do not have more time search for a suitable combination of options.
And so, adding jquery-options:
fitToView : false,
wrapCSS: 'myclass'
and add styles:
.myclass,
.myclass .fancybox-skin
{
width: 600px !important;
height: 400px !important;
text-align: center;
}
.myclass .fancybox-skin
{
line-height: 400px;
}
.myclass .fancybox-outer {
height: inherit;
width: inherit;
}
.myclass .fancybox-inner {
display: inline-block;
vertical-align: middle;
}