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.
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'm using css modules. Each css module is a scss file and looks something like the following:
.componentWrapper {
border: solid cadetblue;
border-radius: 40px;
padding: 10px;
width: 95%;
&.componentTitle {
font-size: 18px;
width: 15%;
background-color: white;
margin-top: -25px;
}
}
Is it considered an anti-pattern to use & inside css modules?
Well no. Just keep in mind that this forces you to have the html in an appropriate structure to make that work. So in case the styles are only used in this module and not needed anywhere else, that is absolutely fine. But if you need those Styles somewhere else, in another context which does not have the appropriate html structure, another approach, f.i. by using classes, would be better. Then the #extend directive can come in handy.
No, sass-loader will run first and spit out plain CSS
CSS modules takes the CSS and scopes it.
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.
I am working with editable slick grid and copied the code from here:
Code
Demo Example
I have included required JS files and the CSS. But when the grid loads, the LongText fields acts as Text field and remains uneditable.
See below image for more information.
I do not see any JS error on the console. What could be the reason for this behavior??
Upon further investigation, my friend found out that the pop-up which shows the textarea, does comes up but the its style is set as disply:none . This style is applied to the div which actually shows the pop-up. If we change the style for this div to diplay:block I can see the pop-up.
element.style {
z-index: 10000;
position: absolute;
background-color: white;
padding: 5px;
border: 3px solid gray;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
top: 489px;
left: 505px;
display: none;
background-position: initial initial;
background-repeat: initial initial;
}
Update: I just came to know the issue is due to wrong version of jquery being used. Please check this link for working example:
problem: On index.html page, if I change the jquery version from 1.7 to 1.9, the pop-up on description field does not appear. I am using following CDN for jquery. I cannot switch back to lower version of Jquery as I am using version 1.9 for other purpose in my project.
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
To answer my own question, I am now using latest version of slick grid (2.2.2 at the time of publishing this answer) which supports jquery 1.9 as well. I must give credit to #BelowTheRadar for his suggestion.
I'm trying to edit a wordpress theme and I'm getting some problems with some images that just don't want to appear on IE8. Other versions of IE render the website as it should, but IE8 gives me this headache that I don't know how to cure.
Please take a look.
I really don't have any clues why this is happening.
Help!
The problem is caused by the images having this CSS rule:
max-width: 100%;
To fix it, you can remove that rule altogether if you don't actually need it, remove it just for Internet Explorer 8 (see this question), or add these two CSS rules to the parent a tag:
display: block;
width: 300px;
You have issue with your CSS on IE8. Try adding "width:30%;" on the div that holds the image something like this:
<div class="hentry post publish post-1 odd author-admin category-oferte-pelerinaje" id="post-32">
<div style="float: left; width: 30%;">
<A title="Pelerinaj la Schitul Sfantului Ierarh Modest – Judetul Arges" href="http://pelerinaje.tapet-online.ro/pelerinaj-la-schitul-sfantului-ierarh-modest-judetul-arges/"><IMG class="archive-thumbnail featured" alt="Pelerinaj la Schitul Sfantului Ierarh Modest – Judetul Arges" src="http://pelerinaje.tapet-online.ro/wp-content/uploads/2012/12/117491_ierah-modest-220x150.jpg" width=300 height=225></A>