I wanted to make a custom select in HTML with CSS only. So I did the trick with the around the select in order to have a custom arrow (View here).
I want to set the text-overflow of the select to 'ellipsis'. But now long options overlap my custom-arrow. Is there a way to limit the max. text-width of a select, so that the ellipsis would be before my custom arrow?
PS: I am using Firefox and I only want to use CSS for this. So please no solutions in JS.
Thanks in advance
This should help:
.truncate {
max-width: TRUNCATION-BOUNDARY;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Fiddle
So in your case just set max-width to something like 90% (or even less), so it doesn't overlap you arrow anymore.
Related
I'm trying to make all links on my page have a custom underline similar to this.
Here's what I have so far of a menu that's going to use this feature:
CodePen
The underline, instead of appearing under each link, appears under the "toolbox" div (the link objects' grandparent).
I've tried just making the first CodePen but with the features SCSS allows you (& and nested rules), but I seem to be missing something and won't even show the underline. I'm guessing it has something to do with my use of the parent selector.
How do I make my current code work correctly? If the issue is with my use of parent selectors in general, what is the correct selector to use in this case?
(Stack Overflow is making me put this)
You are using position: absolute in ::after therefore the underline will have absolute position not related to the <a>. Just add position relative to <a> thus inclosing the absolute ::after content to it.
.navbar {
background-color: #191919cc;
padding: 10px;
border-radius: 10px;
a {
position: relative; // here
margin: 0 10px;
}
}
codepen link: https://codepen.io/ashwin-chandran/pen/BaZjQLz
I need a component exactly like below picture.
image code is here but i need that codes for typescript.
and also copy codes not working!
any body can help with an example in https://codesandbox.io/.
thanks a lot
Recently I used react-multi-carousel with typescript.
Maybe that carousel's parent style is like this.
display: flex;
Carousel doesn't work with that style so you should change the parent style.
It's not a problem caused by Typescript
display: block or add this style.
min-width: 400px; max-width: 400px;
it works for me.
I am trying to create a multi-line label for a v-checkbox. The first line would be a title and the second line would be a sub-title. I tried using the label slot, but it keeps everything on the same line. My code is below. Any suggestions welcome, thanks.
<v-checkbox>
<template v-slot:label>
<div class="primary--text">Imaging Orders</div><br/>
<div>1 Imaging Order(s) Selected</div>
</template>
</v-checkbox>
I found a better solution, instead of changing the display property, was to just change the flex direction (from the default of row) to column. I also ran into the items not being left aligned, so I added the declaration after flex-direction (you may find you need this too). I had to target the element more directly, but I did not need !important. I also needed to use a deep selector. Here is some documentation on that. For that, you would just need a class on your v-checkbox and that would be '.a' in the documentation's examples and the following selector would be '.b'.
<style scoped>
.v-input--selection-controls .v-input__slot > .v-label {
flex-direction: column;
align-items: flex-start;
}
</style>
That happens because the v-label inserted into the DOM is a display: inline-flex by default.
You could overwrite this rule with some custom css if you really need to.
Caution: Heavily test if you don't accidentally cause other labels to act weird because of this. Really depends on if you have more labels in use or not. I'd be very careful with overwriting css just like that.
<style scoped>
.v-label {
display: block !important;
}
</style>
I use Prestashop 1.7.5.1.
I want the description block and product details on the product page to be on the right side of the page and also fill the entire width of the page. How can I do this? What changes should be made to the product.tpl file or to the corresponding CSS file.
It is difficult to assist you because you did not post a fiddle with your HTML/CSS code, please try to edit/update your question.
However, I'm assuming you are using the default template coming with PrestaShop 1.7.x so you should have two columns with the class "col-md-6" inside your product.tpl file.
Simply put style="float:left;" on the one containing the product picture and style="float:right;" on the other.
Regarding the width of these columns, there are currently constrained by the element:
#media (min-width: 1200px)
.container {
width: 1140px;
max-width: 100%;
}
You can for the width to 100% with width: 100%; instead, I wouldn't recommend doing this though.
Final result:
i actually really like this approach that is big img background, but i want it to be fluid with windows's height as well (before we scroll down to other section or div), so before reaching mobile screen, its height can always stretch and fill the whole browser screen while logo & content inside is always in the middle
i like this site, http://peterfinlan.com/, i emailed to enquire but never get any response about how to make it, i try to follow its css, but i just couldnt make my header as its, i dont really see any other flexbox css other than div.hero-content, and yes i am new to flexbox, does it have javascript or what?
can you help me?
To make a div fill the site using flex box, you need to do the following:
<body>
<div id="mainWrapper">
<div id="headerWrapper">
<!-- HEADER CONTENT HERE -->
</div>
</div>
</body>
with the following CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#mainWrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
#headerWrapper {
flex: 1;
}
See an example in action here.
In this particular context, however, you don't necessarily need a flexbox as #mainWrapper already stretches over the complete site.
While flexbox is nice, don't force its usage just because it's new. Getting rid of flexbox and #headerWrapper wouldn't do any harm here.
Please note that I did not include any vendor prefixes here, so it may not work in all browsers as is. I recommend you use a tool like autoprefixer before you deploy your CSS.