I would like to display the hidden button content in my card when hovering over it. I am currently attempting to use the adjacent sibling selector to do this, by connecting a hover element (the card) to another element (the hidden button) to achieve this. The code is is as follows
<div class="container">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<div class="card-white">
<div class="secret-button">
<img src="images/approve.svg" id="i">Hidden button
</div>
<img src="images/chococake2.jpg"
style="width: 245px; height: 191px;"
/>
<h3>Recipe</h3>
<h4>German Chocolate Cake</h4>
<p>5/5</p>
<p>reviews</p>
<p>make it again</p>
</div>
</div>
My hidden button is currently set as display none on my css purposely, but I would like to then make it visible by doing the below
.card-white:hover{
background-color: #8C8C8C;
border: 5px solid green;
text-decoration: none;
}
.secret-button{
display: none;
}
.card-white:hover + .secret-button{
display: block;
}
The issue is that despite my attempt above, this is not changing my html page. The plus button appears as orange on my sublime text, which suggests to me it does not like or recognize the selector as valid css code for some reason.
I think the main problem is that I may need to restructure the html/css as these two elements may not be proper siblings, but just want to know how best to go about this.
I am having a layout which has text and a button on the left side and the image on the right side. The layout is working fine on the desktop but when i switch to the mobile view the ui breaks. On the mobile only the image is showing up. The text and the button is not there.I am using flex for the UI.
<div className='container-1'>
<div className='container-2'>
<div>
<h1>heading</h1>
<p>
Loren Ipsum
</p>
<Button>button</Button>
<p>
lorem ipsum
</p>
</div>
<div>
<img
src={homepage}
width="300"
height="300"
alt='home'
/>
</div>
</div>
</div>
My Css File
.container-1 {
position: relative;
background-image: linear-gradient(180deg, #0000FF 0%, #0000FF 70%);
min-height: 100%;
width: 100%;
}
.container-2 {
display: flex;
flex-direction: row;
justify-content: space-around;
padding-top: 10%;
}
The Problem was it was using display flew as row for mobile as well. I used a media query to display flex as column for mobile and it worked. Thanks
I am fairly new to React. I am also new to asking questions on this forum.
I have a pretty basic two column layout and I am trying to dynamically set the image size in the RH column to match the height of the text content of the LH column.
I have figured out I can't get the scrollHeight value of the ref'd element until the page is rendered but I don't want to render the page until I know the scrollHeight value to render the image...and around in circles I go.
I can get the ref'd value if I put a console.log inside a useEffect() but I don't know to adapt this to help me solve the specific problem.
Can anyone help with a solution or another method to achieve this same idea?
const tickList = useRef();
useEffect(() => {
console.log(tickList);
}, [])
<div className='ticklist-container' ref={tickList}>
<TickCrossList items={tickListItems} />
</div>
<div className='image-container p-1 flex flex-center'>
<img
src={imageUrl}
alt={imageAltText}
style={{ width: tickList.current.scrollHeight * 1.77 }}
/>
</div>
I believe this is, at core, an XY problem. You're asking how to technically achieve a nearly impossible task (1) when you're actually trying to answer another question: how to make some text and an image look good side by side (2) (which, by and large, is not an actual coding problem - it's a graphical design problem).
Most notably, you're not providing either the text or the image, so you're asking for a general solution, which would work in all cases. That solution doesn't exist. Picture how the result would look if the text was 1 letter long and how it would look if it was 2 pages long.
Last, but not least, the problem is not strictly related to React. In general, you should ask yourself:
is this achievable in DOM (HTML + CSS + JS)?
does it need JS?
once you answer both of the above with "yes", and you know how the output should look like, the React part is generally easy.
In more detail...
(1). When you're changing the image size, provided you maintain its ratio, you're going to affect the paragraph's width, causing it to re-wrap, changing its height, potentially creating a loop. In many cases, you'd need to re-run the script multiple times until the text no longer re-wraps when adjusting the image height.
In some cases, depending on the amount of text, a solution doesn't even exist.
In other cases, the script will jump between two positions, basically two different numbers of text rows, each resizing the image, causing the text to jump to the other number of rows, causing the whole thing to tremble indefinitely. I've actually seen this quite a few times, on production websites. The general fix is to record each resizing step and, should the script get any of the previous values, kill it. An ugly fix for an ugly bug.
And, in some other cases, you might find multiple possible "solutions". Which one should the script pick?
Picture all this in the context of resize events (a user flipping their tablet from landscape to portrait and back) and you got a recipe for disaster, UX-wise.
Not to mention browsers nowadays allow users to override font-size or font-family, giving control over readability. How would your script cope with this change?
(2) How this problem is typically solved.
There are a few distinct considerations:
the image needs to have a minimum size, at which it conveys whatever message it carries. It needs to remain "readable" at all times. Not too small, but not too large, either. It has to be in balance with the amount of text.
if there's too much text, you either make its box scrollable (depending on case) or you crop the sides of the image (if image is "croppable" - from a graphical POV).
the text needs to remain readable (with ease) at all times (lines shouldn't be too long or too short)
typically, you want to roughly determine a ratio between the minimal image size and a paragraph width good for readability and set a consistent ratio (throughout the whole app/website) between the two (design consistency pays off in how your website is perceived as a whole - it provides rhythm and an overall feeling of confidence and reliability, when done right). Go with 1:1, 2:1, 3:1, 1:2, 1:3, based on paragraph length and readability. Another good ratio is 1:1.618 (the golden ratio - it's pleasing to the eye, without an exact explanation - debugging humans is particularly difficult)
a typical solution is to wrap the paragraph into a slightly bigger, visible box, with a slightly different background or border color. This gives you significantly more flexibility in matching the image height. See the examples below.
below a particular container width, you want the two elements (the image and the text box) to wrap, so they both remain readable and attractive (e.g: responsiveness)
A few bad examples you probably want to avoid (but you're currently asking for), followed by a possible answer to the Y problem:
.container {
display: flex;
max-width: 600px;
margin: 0 auto;
margin-top: 1rem;
justify-content: space-between
}
.proper img {
width: 50%;
}
.proper div {
background-color: #F5f5f5;
display: flex;
align-items: center;
justify-content: center;
padding: 2em;
}
.proper.two div {
background-color: transparent;
border: solid #ddd;
border-width: 1px 0 1px 1px;
}
<div class="container">
<h3>What you probably don't want</h3>
</div>
<div class="container">
<div>Spiff up your work with our random beer Lorem Ipsum generator. Beer!</div>
<img src="https://random-ize.com/lorem-ipsum-generators/beer/suds3.jpg" style="max-width: 528px">
</div>
<div class="container">
<div>Spiff up your work with our random beer Lorem Ipsum generator. Beer!
</div>
<img src="https://random-ize.com/lorem-ipsum-generators/beer/suds3.jpg" style="max-width: 515px">
</div>
<div class="container">
<div>Spiff up your work with our random beer Lorem Ipsum generator. Beer!
</div>
<img src="https://random-ize.com/lorem-ipsum-generators/beer/suds3.jpg" style="height: 1em">
</div>
<div class="container">
<div>Spiff up your work with our random beer Lorem Ipsum generator. More Beer!
</div>
<img src="https://random-ize.com/lorem-ipsum-generators/beer/suds3.jpg" style="height: 2em">
</div>
<div class="container">
<h3>What you probably want</h3>
</div>
<div class="container proper">
<div>Spiff up your work with our random beer Lorem Ipsum generator. Beer!</div>
<img src="https://random-ize.com/lorem-ipsum-generators/beer/suds3.jpg">
</div>
<div class="container proper two">
<div>Spiff up your work with our random beer Lorem Ipsum generator. Beer!</div>
<img src="https://random-ize.com/lorem-ipsum-generators/beer/suds3.jpg">
</div>
As a bonus, what golden ratio can do for you:
* {
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0 2.1rem;
}
.container {
padding: 2.1rem 0;
max-width: 500px;
margin: 0 auto;
min-height: 100vh;
display: flex;
align-items: center;
}
.golden-ratio {
border-radius: .35rem;
overflow: hidden;
display: flex;
justify-content: space-between;
background-color: white;
color: #aaa;
aspect-ratio: 1.618;
box-shadow: 0 1px 5px 0 rgb(0 0 0 / 10%), 0 2px 2px 0 rgb(0 0 0 / 07%), 0 3px 1px -2px rgb(0 0 0 / 06%)
}
.image-container {
flex-grow: 1;
background: #ddd url('https://random-ize.com/lorem-ipsum-generators/beer/suds3.jpg') 100% /cover;
}
.content {
flex: 0 0 61.8%;
font-size: 1.5rem;
font-style: italic;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10%;
}
#media (max-width: 600px) {
.golden-ratio {
flex-direction: column-reverse;
aspect-ratio: unset;
}
.content {
flex-basis: 50%;
padding: 3rem;
font-size: 1.2rem;
}
.image-container {
aspect-ratio: 4.16;
flex-basis: 50%;
}
}
<div class="container">
<div class="golden-ratio">
<div class="content">Spiff up your work with our random beer Lorem Ipsum generator. Beer!</div>
<div class="image-container"></div>
</div>
</div>
I created a dropdown menu that opens when you click on a text box, and then when you chose a string for that dropdown list, it puts it in the text box.
I would like to make that when you hover your mouse on the strings in the dropdown, they get slightly highlighted! how can I achieve this?
<div class="row">
<div class="col-xs-12 max300" uib-dropdown is-open="vm.descriptionDropdownOpen">
<textarea name="remarks" class="form-control" ng-model="vm.presence.description" ng-click="vm.toggleDescriptionDropdown()" autofocus></textarea>
<ul id="descriptionDropdown" uib-dropdown-menu>
<li ng-repeat="descr in vm.loadedDescriptions" ng-click="vm.presence.description = descr.text; vm.descriptionDropdownOpen = false;">
{{descr.text}}
</li>
</ul>
and the css to keep the dropdown aligned with the textbox:
#descriptionDropdown {
width: 100%;
line-height: 150%;
padding-left: 8px;
position: relative;
}
thank you very much
you can do something like this
#descriptionDropdown li:hover{
background-color:#eaeaea;
}
Change the color code to your desired color code.
And remove the padding from ul to avoid space around background when you hover. Instead, use padding on li
#descriptionDropdown li{
padding-left:8px;
}
You could add this css :
li:hover {
background-color: blue;
}
I want to change the class of one div while hovering over another div using AngularJS directives. Here is what I have so far http://jsfiddle.net/E8nM5/38/
HMTL
<div ng-controller="Ctrl" ng-app>
<div ng-class="my-class">This div will change class when one hovers over bottom DIV </div>
<br/>
<div class="hover-div" ng-mouseenter="my-class = 'highlight'" ng-mouseleave="my-class = 'lowlight'">HOVER OVER ME TO CHANGE THE UPPER DIV's CLASS</div>
</div>
CSS
div.highlight {
padding: 10px;
background: red;
color: white;
}
div.lowlight {
padding: 10px;
background: blue;
color: white;
}
div.hover-div {
padding: 10px;
background: green;
color: white;
}
JS
function Ctrl($scope){
}
Any ideas?
Change my-class to myclass (i.e. the dash causes problem).
<div ng-controller="Ctrl" ng-app>
<div ng-class="myclass">This div will change class when one hovers over bottom DIV </div>
<br/>
<div class="hover-div" ng-mouseenter="myclass = 'highlight'" ng-mouseleave="myclass = 'lowlight'">HOVER OVER ME TO CHANGE THE UPPER DIV's CLASS</div>
</div>
Updated: the reason my-class isn't allowed in the expression is because AngularJS treats the dash as minus symbol and tries to parse it that way. Apparently, it can't parse the statement my - class = 'highlight'. Unfortunately, after reading AngularJS parser code, I can't find a way to "help" it distinguish between dash and minus.
You need to remove the hyphen from my-class so it will work properly in your Controller. Other than that it looks like you have it mostly done. Here's a little snippet - I also added it as text in the div so you can see it change
Your HTML File:
<div class="{{myClass}}"> {{myClass}} </div>
<div class="hover" style="height:50px; width:50px; border:1px solid black;" ng-mouseleave="myClass='test'" ng-mouseenter="myClass='hola'"> </div>
Controller
function Ctrl($scope){
$scope.myClass="test";
}