Is there any way to wrap el-option element so that the width of it was not larger that the el-select field in which this element is?
I have fount an answer to my question:
.el-select__tags .el-select__tags-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 150px;
display: inline-block;
vertical-align: middle;
}
https://jsfiddle.net/4u6b9tye/13/
Related
There is only one button in the card and I want it to be exactly at the centre from vertical and centre from horizontal.
Actually having no content in my card is making it shrink
.card{height:200px;width:200px}
.card-body {
padding: 1.25rem;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
border:1px solid #ccc
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
<div class="card shadow">
<div class="card-body">
<div class="text-center">
Center align
</div>
</div>
</div>
<div>
<button>Submit</button>
</div>
So, suppose this Div is the card and inside it button is the chlid. for making the button horizontally and vertically center just apply display Property Flex, justify-content property Center and align-items property to Center.
And the second issue "having no content in my card is making it shrink", it is because, having no content inside the card means there is no way that it could take some place in the browser as there is no child inside the card. but if you define a height and width to the card you will see that the card is not shirking.
Problem
I wanted to create a 3 containers, one being the main big container which will take up most of the screen, and the others almost positioned as hotbars at the left and bottom.
something like this.
What i've tried
I have tried the ion grid but it just seems not to work with responsive layout as well as I thought maybe there was a better way to do it?
You can use flexbox for these situations, it is a group of native css commands.
Read more about it here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
This is a quick example of a layout like your image, you can tweak it to serve your purpose and use your research into flexbox to expand it.
html
<div id="main-wrapper">
<div id="side-bar"></div>
<div id="other-content">
<div id="main-content"></div>
<div id="footer"></div>
</div>
</div>
css
#main-wrapper {
width: 100%;
height: 300px;
display: flex;
align-items: stretch;
background-color: grey;
padding: 10px;
box-sizing: border-box;
}
#side-bar{
background-color: blue;
width: 90px;
}
#other-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
margin-left: 10px;
}
#main-content {
flex: 1;
background-color: blue;
margin-bottom: 10px;
}
#footer {
height: 90px;
background-color: blue;
}
Here is a fiddle to get you started.
https://jsfiddle.net/7wj31ucb/69/
i just hosted a small portfolio via github pages, and I tried to use media query to make it work on various device size.
The portfolio section includes these flipping card which i've been told are bogus on IOs devices when using chrome.
In fact it seems the back face are diplayed mirror on the Y axis.
I tried to debug by using CrossBrowser but without success.
Here's the repo with the code,
Here's a link to the bogus section.
Here some code should be enough to reproduce the issue (but i would still suggest to consider the repo code since i could miss something here)
html
<figure class="fig-container">
<div class="card">
<div img class="front face" style="background-image: url('http://img.youtube.com/vi/x10dBwZFi2Q/0.jpg');"></div>
<div class="back face">
<p><b>Location:</b> loc</p>
<p><b class="text-medium-big">Description: </b> desc</p>
</div>
</div>
</figure>
css
figure{
margin-bottom: 0px;
}
.fig-container {
max-width: 450px;
min-height: 160px;
/* horizontal center*/
margin-left: auto;
margin-right: auto;
}
.card {
box-sizing: border-box;
min-height: 250px;
transform-style: preserve-3d;
transition: all 0.5s linear;
border: 2px solid white;
border-radius: 20px;
}
.fig-container:hover .card {
transform: rotateY(180deg);
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 17px;
}
.face.front {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
color: white;
font-size: 0.5em;
text-align: justify;
line-height: 1.5;
overflow-y: auto;
}
Anyone is able to see the bug and understand what it could be the problem?
I succesfully implemented featherlight.js plugin on my wordpress blog to display some photos as a lightbox.
By default featherlight.js shows up the nextIcon and previousIcon only when the mouse hovers a certain area of the image.
But I would like the nextIcon/previousIcon to be always visible outside of the image when the lightbox is invoked.
Made some tests with "span.featherlight-next" resp. "span.featherlight-previous" so that the left/right icons are outside of the image...but until now I didn't find out how to do it.
Does someone know how to modify the CSS file so that the nextIcon and previousIcon to be always visible ?
Any help is greatly appreciated.
Thank you for your answer. Well, I came up with a solution which satisfies my needs. In fact I just moved the previous/next navigation icons inside the border of .featherlight-image, and the icons just are just visible on a mouse hover (which is the default).
First I set a bigger white border to the image:
.featherlight .featherlight-image {
max-width: 100%;
border: 32px solid #fff;
}
then I fine tuned .featherlight-next & .featherlight-previous and it's span classes based from featherlight.gallery.css, like this:
.featherlight-next,
.featherlight-previous {
display: block;
position: absolute;
top: 25px;
right: 0px;
bottom: 0;
left: 80%;
cursor: pointer;
/* preventing text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* IE9 hack, otherwise navigation doesn't appear */
background: rgba(0,0,0,0);
}
.featherlight-previous {
left: 0px;
right: 80%;
}
.featherlight-next:hover,
.featherlight-previous:hover {
background: rgba(0,0,0,0.0);
}
.featherlight-next span,
.featherlight-previous span {
display: none;
position: absolute;
top: 50%;
width: 80%;
font-size: 22px;
line-height: 50px;
/* center vertically */
margin-top: -40px;
color: #777;
font-style: normal;
font-weight: normal;
text-shadow: 0px 0px 3px #888;
}
.featherlight-next span {
right: 7px;
left: auto;
text-align: right;
}
.featherlight-previous span {
right: 0px;
left: 7px;
text-align: left;
}
.featherlight-next:hover span,
.featherlight-previous:hover span {
display: inline-block;
}
/* Hide navigation while loading */
.featherlight-loading .featherlight-previous, .featherlight-loading .featherlight-next {
display:none;
}
Putting the background to white could also help hiding the white image border / frame so that the navigation icons are more distinctive when hovering:
.featherlight:last-of-type {
background: rgba(255, 255, 255, 0.6);
}
Hope this helps someone ;-)
Check the source. You'll find how the hide/show is achieved:
.featherlight-next span,
.featherlight-previous span {
display: none;
// ...
}
.featherlight-next:hover span,
.featherlight-previous:hover span {
display: inline-block;
}
So you simply need to override the display: none with your own custom rule.
I am trying to make a handle bar element with a nice textured line pseudo element that is horizontally and vertically centered in the middle of it.
I understand that lots of people do this effect with background images but I want this to be vector so that it works even on high density displays.
Demo: jsFiddle
The whole thing just uses a single element and uses this CSS:
html, body
{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
*
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.header_handle
{
width: 100%;
height: 7px;
position: relative;
background: #9e978b;
border-top: 1px solid #b8b1a5;
border-bottom: 1px solid #827c72;
text-align: center;
cursor: s-resize;
}
.header_handle:before
{
content: '';
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
*display: inline;
background: #ff0000;
width: 10px;
height: 100%;
}
.header_handle:after
{
content: '';
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
*display: inline;
width: 42px;
height: 1px;
background: #ada599;
outline: 1px solid #ada599;
border-top: 1px solid #6b665e;
border-bottom: 1px solid #6b665e;
}
Here is a second demo that shows the basic effect in action at a bigger level. It just has aligning inline-block element and then the centered inline-block element.
The desired effect should look like this:
The first demo above works at heights above 22px and if you turn off the height attribute it expands to 22px so it seems to think the pseudo element is 22px or something like that.
What the heck is going on here?
Add font-size: 0; to the main element .header_handle. This eliminates any space between inline elements.
I got the trick from the Fighting the Space Between Inline Block Elements on CSS-Tricks.