wrapping text disappearing after giving overflow hidden - javascript

to fix the wrapping issue of this text ---> testing the be Bhere I am here I am here I am here I am here I
am testing the be Bhere I am here I am here I am here I am here
I am 12 34 56 78 90 123 456 7778 88889 9999 999690909090
I used overflow: "hidden" in the class right_box.
wrapping text got fixed.
but when i decrease the screen size I am seeing some of the texts are getting hidden.
I googled and found line height will fix it,
so I gave it in the two classes sportsCardHeaderItemHeadingValue and right_box
but still its not fixing.
can you tell me how to fix it.
providing code snippet and sandbox below.
https://codesandbox.io/s/material-demo-e89n0
sportsCardHeaderItemHeadingValue: {
fontWeight: "bold",
fontSize: 20,
color: "#263238",
wordWrap: "break-word",
lineHeight: 1.2
},
right_box: {
border: "1px solid #000",
// padding: 5,
// background: '#ff0',
marginTop: 8,
marginRight: 8,
float: "left",
// width: 150,
height: 55,
overflow: "hidden",
lineHeight: 1.2
},
<div className={classes.right_box}>
0<div className={classes.sportsCardHeaderItemHeading}>Sports</div>
<div className={classes.sportsCardHeaderItemHeadingValue}>
testing the be Bhere I am here I am here I am here I am here I
am testing the be Bhere I am here I am here I am here I am here
I am 12 34 56 78 90 123 456 7778 88889 9999 999690909090
</div>
</div>

There is a height set on right_box so it can't grow height-wise to fit content. Also, when resizing the view to then restrict the width, it then overflows the content. When you add the CSS rule overflow:hidden; to right_box it then hides the overflow and you can't see it.
I commented out the height and overflow rules (approx lines 424-425) and now you can see the element expands to fill width and the height grows to fit content.
right_box: {
border: '1px solid #000',
// padding: 5,
// background: '#ff0',
marginTop: 8,
marginRight: 8,
float: 'left',
// width: 150,
// height: 55, // don't restrict height
// overflow: "hidden", // element can grow now so don't need to hide overflow
lineHeight: 1.2,
},
codesandbox

Related

React Native shadow

Im doing react-native and i have this problem,
I declare the shadow color and also elevation, but the top shadow is thinner than the bottom, i have tried shadowOffset with width: 0 and height: 0 but no use, anyone can help me ?
image
here's my style code
circle: {
marginTop: 48,
alignSelf: 'center',
width: 248,
height: 248,
borderRadius: 248,
backgroundColor: '#141414',
shadowColor: '#D8D8DF',
elevation: 24
}
I don't know if this will help you out but in the past I have used....
React Native Shadow Generator

Cannot Get Element Behind Another With Z-Index and Declaring Position

I have a div I'm using as header/nav menu. This div has a drop shadow. There is a dropdown menu when you hover over menu item "Configuration". I want this dropdown menu to appear behind the drop shadow. I am using declared positions and z-index for all elements. The dropdown is z-index 99 and header div is index 100. The dropdown will not appear behind the header div.
I am using Gatsby, React, and Radium. The syntax for the styling below is because I'm using a "styles" object in Javascript to apply the styles.
headerDiv: {
background: 'white',
marginBottom: '1.45rem',
paddingLeft: '10px',
paddingRight: '10px',
boxShadow: '0px 6px 6px rgba(0,0,0,0.2)',
zIndex: '100',
position: 'relative'
},
dropdownMenu: {
opacity: '1',
position: 'absolute',
top: '95%',
left: '0',
zIndex: '99',
padding: '20px 100px 0px 20px',
whiteSpace: 'nowrap',
float: 'left',
minWidth: '160px',
margin: '2px 0 0',
fontSize: '12px',
textAlign: 'left',
listStyle: 'none',
backgroundColor: 'white',
backgroundClip: 'padding-box',
boxShadow: '0 6px 12px rgba(0,0,0,0.175)'
}
I solved this with a workaround. I turned off z-index on all elements. Then I created an empty div and gave it the drop shadow. I gave this div a z-index of 99 and the header navigation menu a z-index of 99 (so it appears behind the empty div). Now it works as intended.

How to use borderRadius and borderLeftColor, borderBottomColor, borderRightColor, borderTopColor in CSS?

I want the circle with 25% coloured border and 75% transparent but got as unexpected 100% circle border with black colour.
I also tried borderRadius for each corner but it's not giving desirable output.
progressLayer: {
width: 200,
height: 200,
borderWidth: 20,
position: 'absolute',
borderLeftColor: 'transparent',
borderBottomColor: 'transparent',
borderRightColor: 'transparent',
borderTopColor: '#3498db',
borderRadius: 100,
}
});
circle with 25% colored border and 75% transparent.
To make some borders transparent, this should work:
border-right: 2px solid transparent;
And same for other borders.
A neat trick for using transparent instead of opacity is to use rgba colors, so , it would´t be borderLeftColor: 'transparent' , instead use borderLeftColor: 'rgba(0,0,0,0)'
[the last 0 is the transparency, if you use 0,0,0,1 it will be black and 0,0,0,0.5 gives a nice black overlay].
Another solution
Is just enable borderwidth for an specific direction.
progressLayer: { width: 200, height: 200, borderTopWidth: 20, position: 'absolute', borderTopColor: '#3498db', borderRadius: 100, } });
should work but not tested for a circle

What are the appropriate apis/css for styling extjs combobox heights

The extjs Ext.form.ComboBox item setting height is not working using the
maxHeight: 100
minHeight: 100
maxBoxHeight: 100
minBoxHeight: 100
Even the setting of height of the div of the list is not working.
By default the height of the contained div is set to 0px. Any idea how to manipulate the height.
The html structure would be of the form as its a list of divs within a div.
The setting you are searching for is listConfig. Here you can set configuration properties that will be passed to the Ext.view.BoundList's constructor.
Ext.create('Ext.form.ComboBox', {
//[...]
listConfig: {
minWidth: 300,
maxHeight: 40
}
});
Here is a full example:
https://fiddle.sencha.com/#view/editor&fiddle/21bc
I done this before and it worked for me.
You can give cls config to your comboBox.
cls: 'textTransparent'
and you can give height in cls.
.textTransparent {
height: 25px !important; // this will give the height
font-size: 12px;
font-weight: bold;
color: white;
margin: 0 !important;
}

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>

Categories

Resources