Struggling with UX design here. Working on an app in React with Material UI, aiming for a look similar to this:
https://i.sstatic.net/h1alm.png
My goal is to make the "Some Title" section dynamic from my database, along with the contents. Can't seem to find a classy way to incorporate the title into the outline. Any suggestions?
To achieve this effect, you can use absolute positioning for the title along with a negative top margin. Make sure the title is set to display:inline-block with a white background and padding to prevent the border from showing through.
.borderd-content {
border: 1px solid #0000ff;
border-radius: 4px;
height: 100px;
margin-top: 20px;
position: relative;
}
.borderd-content .title {
margin: -10px 0 0 10px;
background: #fff;
padding: 3px;
display: inline-block;
font-weight: bold;
position: absolute;
}
.borderd-content .content {
padding: 10px;
}<div class="borderd-content">
<div class="title">Title</div>
<div class="content">asdsad</div>
</div>Is there a way to change the color of the asterisk to red without having a separate label for the TextField? <TextField id="outlined-basic" label="Name" variant="outlined" required/> ...
The table inside the "center" div is causing the contents in the "left" div to be offset by a few pixels from the top (about 8 in my browser). When you add some text before the table, this offset disappears. Why is this happening? Is there a way to preven ...
Recently, I started working on a web project on Codepen using Bootstrap 4 and JQuery quick-adds. The results were perfect on Codepen but when I copied the same code to my text-editor and ran it from there, the formatting of the page was completely off. I t ...
While I don't have a specific code snippet to share, I did have an idea and attempted to implement it. Unfortunately, it didn't yield the desired results. const validateEmailAddress = function (e) { const regex = /^[a-zA-Z0-9.!#$%&&apos ...
Is there a way to animate text based on scrolling? <p class="class">TEXT</p> transform:translateX(-500px);opacity:0; transform:translateX(0px);opacity:1; ...
I am currently facing an issue with a gap that I can't seem to fix right now. Below, you will find a screenshot along with the HTML and CSS code that I have used. Despite trying various methods and looking for solutions on platforms like Youtube and ...
Looking to align images at the bottom of each column in a div with 3 columns, but struggling due to varying text lengths. Any tips on how to achieve this? https://i.sstatic.net/fuPgl.png Thank you, Carolin #content_row{ margin-top:150px; marg ...
I am a beginner in the world of coding and I am currently experimenting with flexbox to create the layout for my website. However, I am facing a challenge where I need to overlay some text and an image on top of the pink rectangular section that is part of ...
I've been experimenting with different methods to vertically align caption text in the middle of an image, but I haven't had much luck. I've tried using table-cells and other techniques, without success! Currently, I have an <li> elem ...
My current theme is Redmond, but I would like to change the color of the home icon in the breadcrumb. To achieve this, I have included the hot-sneaks theme in the pom.xml file: <dependency> <groupId>org.primefaces.themes</groupId&g ...
In the process of developing a sophisticated front-end system using plugins, we are exploring different methods for composing CSS rules. Currently, we are considering two main approaches: Including parents in the class name Nesting parents in the selecto ...
<div className="row align-items-center justify-content-center"> <div className="col-md-3 mt-3"> <div className="card bg-light"> <div className="card-img-top"> <N ...
I have a total of 7 div elements. Given that the column width can only go up to 12, I am unable to evenly divide them using the .col-md-2 class. Instead, I am opting to use the .col class for equal distribution. To ensure responsiveness, I aim to set the ...
I've been tasked with creating a button on a client's website that links to another page, like Google, for the purpose of assisting someone seeking help in case of an emergency. The challenge is finding a way to prevent the user from easily retur ...
My current design consists of a red bar inside a container that is positioned between two black boxes. The size of the boxes remains fixed, while the red bar and container are both based on percentages. I am aiming to decrease the size of both the contain ...
Check out this jsfiddle for my current project's nav setup. I want to center the logo in the middle of the nav with three links centered around it. However, I need the design to be responsive across various screen widths. Any advice on how to achieve ...
Here is an example of a splash screen I have created. HTML <div id="spalsh"> <span> <img src="{% static 'dbexplorer/img/loading.gif' %}" style="height: 100px;" > </span> </div> CSS #spalsh{ width: 98%; ...
I have defined two classes in my embedded CSS on the Default.aspx page. If necessary, I can move the code to an external CSS file. Is it possible to write C# code that allows me to select between these two styles for my table after clicking a button? I ha ...
Why am I unable to select options 2 & 3 when I open #s1? Instead, when I click on them, the cursor goes into #s2. How can I resolve this issue? I initially considered that it might be related to the z-index, but after attempting to adjust it, the prob ...
My images on mobile have too much space between them: mobile version They appear fine in Dev Tools: dev tools version This is my HTML: <div class="container-fluid"> <!-- <br> --> <div class="row"> ...