I want to create a file separator styled menu in react. I'm not very familiar with css, so i need a starting point. I have found many such menu components but all of them are full page.
I dont understand how to create the shape of the component, if it were a simple rectangle it would be possible, but the shape is the rectangle plus the button, i dont know how to manage that.
It will look something like this :
Alter clicking on "Filter Menu", it will slide into view:
Try like this
.menu-container {
display: inline-block;
position: fixed;
top: 30%;
left: 0;
}
.menu-body {
display: inline-block;
height: 200px;
width: 100px;
border: 1px solid black;
}
.activate-button {
display: inline-block;
height: 50px;
width: 20px;
border: 1px solid black;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
vertical-align: top;
}
<div>
<div class="menu-container">
<div class="menu-body">
</div>
<div class="activate-button">
</div>
</div>
<div>
That is actually a CSS/HTML only question.
However, to develop from scratch:
Draw a two column table and have the button in the second field
Or
Use Div containers and style them accordingly
Side Note:
Usually you'd use something like bootstrap or even ant.design.
There you have ready to use table components with possibility to filter (at least with ant.design) and for the filter seection popup you could use stuff like the modal component.
Related
I'm fairly new to developing in Angular and I'd like some help with finding the best way to create a variable CSS height in Angular CLI V12. To simplify my question by a lot I'll present my problem as follows. I've got three boxes as seen below.
Picture of boxes:
These three boxes were made by three components. The code of which is below.
app.component.html:
<app-top></app-top>
<app-center></app-center>
<app-bottom></app-bottom>
top component:
.box {
width: 500px;
height: 100px;
padding: 10px;
border: 5px solid black;
margin: 0;
}
<div class="box">top box</div>
center component:
.box {
width: 500px;
height: 100px;
padding: 10px;
border: 5px solid green;
margin: 0;
}
<div class="box">center box</div>
bottom component:
.box {
width: 500px;
height: 100px;
padding: 10px;
border: 5px solid yellow;
margin: 0;
}
<div class="box">bottom box</div>
What I want to do here is change the height of the center box dynamically through a variable in the typescript portion of my Angular project. I don't think what I'm trying to do here is all that complicated but all the sources I find online for this are somewhat outdated and a bit confusing to follow if you are new to the development scene. What would be the best way to go about doing this? Thank you.
You can just use ngStyles to add style to html tags.
For eg:
<div class="box" [ngStyle]="{'height': myCustomHeight}">center box</div>
Here "myCustomHeight" will be the variable whose value you can change accordingly in typescript.
CSS styles not applying to React heading and paragraph.
Under 1 div, 1 heading and paragraph is getting CSS but other is not
ive tried giving them the same className and Different class names
If I put the heading and paragraph of :
Meet Babish... and Im launching my... with the Stay in loop and Many products the styles is the same like where it is currently situated, but only the Stay in looop and more products.. area is not getting css.
CSS is working for all other things, im adding new styles for the same component
Result:
I want the styles to be as in Meet babish cookware
const Cookware = () => {
return (
<div className="CookwareMainDiv">
<h4 className="CookwareMainDivSubDiv1h41">meet babish cookware</h4>
<p className="CookwareMainDivSubDiv1p1">I’m launching my all-new line of cookware in three phases;<b>starting with everything you need to prep your meals.</b>
<br/><br/> I wanted to create a high quality line of products with a price point palatable for everyday chefs. The basics, simply made better.</p>
<button className="CookwareMainDivSubDiv1b1">VISIT THE AMAZON STORE</button>
<hr/>
<h4 CookwareMainDivSubDiv1h41>STAY IN THE LOOP</h4>
<p CookwareMainDivSubDiv1p1>More products are coming in the coming weeks and months. If you’d like to stay in the loop about the next Babish Cookware release, add your email to the mailing list!</p>
</div>
</div>
)
}
export default Cookware
css
/*
Cookware
*/
.CookwareMainDiv
{
width: 80%;
height:500px;
margin: auto;
box-shadow: none;
}
.CookwareMainDivh11,.CookwareMainDivh12
{
font-weight: 100;
text-align: center;
margin-top: 5%;
}
.CookwareMainDivSubDiv1h41
{
text-transform: uppercase;
margin-top: 10%;
font-size:large;
letter-spacing: 3px;
}
.CookwareMainDivSubDiv1p1,.CookwareMainDivSubDiv1p2
{
margin-top: 5%;
word-spacing: 5px;
font-weight: 300;
}
.CookwareMainDivSubDiv1
{
width: 50%;
height: 400px;
margin: auto;
}
.CookwareMainDivSubDiv1b1
{
height: 60px;
width: 300px;
background-color: transparent;
border: 2px solid black;
border-radius: 16px;
letter-spacing: 2px;
margin-left: 20%;
}
.CookwareMainDivSubDiv1h41
{
margin-top: 5%;
margin-bottom: 5%;
}
.CookwareMainDivSubDiv1 input
{
width: 400px;
height: 30px;
border: 2px solid black;
background-color: transparent;
}
.CookwareMainDivSubDiv1b2
{
width: 100px;
height: 50px;
background-color: transparent;
border:2px solid black;
margin-left: 30%;
}
.CookwareisSubmitted input
{
width: 90%;
height: 50px;
text-align: center;
border: 2px solid rgb(203, 207, 211);
}
.CookwareisSubmitted button
{
width: 30%;
height: 50px;
text-align: center;
margin-bottom: 20%;
}
Please add the "className" to both of the tags.
<h4 className="CookwareMainDivSubDiv1h41">STAY IN THE LOOP</h4>
<p className="CookwareMainDivSubDiv1p1">More products are coming in the coming weeks and months. If you’d like to stay in the loop about the next Babish Cookware release, add your email to the mailing list!</p>
Where is your stylesheet vs where you're importing it into? Is the stylesheet global or component specific? Typically, these issues usually mean the CSS file isn't recognizing the element because it wasn't linked properly to the file the element lives in. (Sometimes, I forget that I gave an element an ID rather than a class.)
Some frameworks don't like certain naming conventions. It helps to look up their official standard. Check out this article from FreeCamp. This article talks about adding a stylesheet with Create React App.
GetBEM did an excellent article on naming conventions, too.
This code is working. Delete that extra "</div>" at the end (It might have been a problem if it didn't already cause an error).
You forgot to give the attribute of className to the Stay in loop and its below paragraph. And you are applying to give css styles as it is a class but it's not.
Your code
<h4 CookwareMainDivSubDiv1h41>STAY IN THE LOOP</h4>
It has to be
<h4 className="CookwareMainDivSubDiv1h41">STAY IN THE LOOP</h4>
Similarly in the paragraph section.
you have all seen that explanatory text boxes that appears when the visitor hovers over specific element, I want to add something similar for the table datas on my webpage which explains what these table datas mean. However, I don't want to go through all that creating a new div with text inside, a function that displays that div and onmouseover-onmouseout events that triggers that function(Too complicated to do such a simple thing). Is there any easier and quicker way to do that? Maybe something similar to alt attribute in img tags?
I think you can do the trick with pseudo-elements and data attributes.
[data-test] {
border: 1px solid black;
position: relative;
}
[data-test]:hover::before {
content: attr(data-test);
position: absolute;
left: 5px;
top: calc(100% + 5px);
padding: 5px 10px;
border-radius: 2px;
background: black;
color: white;
font-size: 0.8em;
}
<div data-test="tootip">Hover me</div>
I'm trying to create a slider whose handle jumps to where one clicks on the track, in addition to being able to be dragged.
Right now, I can drag it; but it doesn't respond when I click somewhere on the track.
PS: Just found the reason. I have another div placed on top of the slider track acting as a progress bar, so that when I click on the slider track, I'm actually clicking the progress bar div. My solution was to set the slider div's background to "transparent" and "z-index: 2" in the css file. Apparently this allows the display of the progressbar div underneath it while preserving the function of clicking on the track.
#audio_slider{
position: absolute;
margin-top: 5px;
height: 12px;
width: 95%;
float: left;
border: 2px solid white;
z-index: 2;
background: transparent;
}
#audio_progress {
position: absolute;
margin-top: 6px;
border: none;
float: left;
width: 95%;
height: 11px;
display:inline-block;
}
I am using bootstrap "list grid products view" sample and grid elements are displayed fine when description and picture height is the same.
Working sample: https://codepen.io/ajaypatelaj/pen/zIBjJ
Problem comes in when description, price and picture are of different height and do not display elements in line:
https://codepen.io/getkitchendeal/pen/gRgGeG
i tried to fix with=>
display: inline-block;
vertical-align: top;
There is a way to fix this, but it's ugly. It's called the clearfix hack.
Check out this thread What does the clearfix class do in css?
What I would do here is fix min-height for each block for grid system.
Create a new css rule:
.list-group-item .thumbnail {
min-height: inherit;
}
And add another one in .thumbnail
.thumbnail {
margin-bottom: 20px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
min-height: 400px; #new rule
}