I have looked over several different questions helping me get to this point however I can't figure out the selector that allows me to get to an outside DIV.
If I remove the two containing DIVs the code works perfectly, However with formatting I need the divs to be able to control the look. Any help would work I know the ~ is the child selector which is why it works without the DIVs.
How do I select any DIV?
Code:
.reveal-if-active {
color: #ccc;
font-style: italic;
opacity: 0;
transform: scale(0.8);
max-height: 0px;
transition: 0.5s;
}
input#photo1:checked ~ div#portraits,
input#photo2:checked ~ div#wedding,
input#photo3:checked ~ div#other {
color: #f00;
font-style: normal;
transform: scale(1);
opacity: 1;
max-height: 150px;
}
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form>
<div class="eight columns" data-scroll-reveal="enter bottom move 100px over 0.6s after 0.2s">
<label for="photo">
<span class="error" id="err-phone">Please Select What you are looking for?</span>
</label>
<input class="radio_activator_portraits" name="photo" id="photo1" type="radio" value="portraits">
<label for="photo1">Portraits</label>
<input class="radio_activator_weddings" name="photo" id="photo2" type="radio" value="wedding">
<label for="photo2">Wedding</label>
<input class="radio_activator_other" name="photo" id="photo3" type="radio" value="other">
<label for="photo3">other</label>
</div>
<div class="eight columns reveal-if-active" id="portraits" name="portraits">Portraits</div>
<div class="eight columns reveal-if-active" id="wedding" name="wedding">Wedding</div>
<div class="eight columns reveal-if-active" id="other" name="other">Other</div>
</form>
</body>
</html>
I think you can't yet style a parent based on descendants with CSS only, you might consider using Javascript or jQuery maybe. Look at this links:
Parent Selectors in CSS, Is there a CSS parent selector?
Try this HTML structure:
<body>
<form>
<div class="eight columns" data-scroll-reveal="enter bottom move 100px over 0.6s after 0.2s">
<label for="photo">
<span class="error" id="err-phone">Please Select What you are looking for?</span>
</label>
<input class="radio_activator_portraits" name="photo" id="photo1" type="radio" value="portraits">
<label for="photo1">Portraits</label>
<input class="radio_activator_weddings" name="photo" id="photo2" type="radio" value="wedding">
<label for="photo2">Wedding</label>
<input class="radio_activator_other" name="photo" id="photo3" type="radio" value="other">
<label for="photo3">other</label>
<div class="eight columns reveal-if-active" id="portraits" name="portraits">Portraits</div>
<div class="eight columns reveal-if-active" id="wedding" name="wedding">Wedding</div>
<div class="eight columns reveal-if-active" id="other" name="other">Other</div>
</div>
</form>
</body>
In order to get this working, you'll need to have the items that have the reveal-if-active class in the same div container with the option. Check this article.
To position them outside of the parent <div> use positioning on .reveal-if-active class:
position:absolute;
top: 40px;
See Example.
cchacholiades is correct -- you will need javascript to do what you want. +1
On a CSS hover event, can I change another div's styling?
However, the javascript for what you desire is quite simple -- it would look something like this:
$(document).ready(function(){
$('input[name="photo"]').click(function(){
var phot = $(this).val();
$('#'+phot).show().css({'background':'yellow','opacity':'1'});
});
});
jsFiddle Demo
Notes:
(1) Because you already have the ID of the desired DIV stored as the value of the clicked radio button, it is simple to capture that value: $(this).val() -- $(this) refers to the element that was clicked on
(2) I demonstrated using both .show() -- which is the same as css display:block, and actually using css statements themselves.
Frankly, I think it will be faster for you just to use jQuery to do this. The only caveat is you must load the jQuery library, usually in the <head> tags like this:
<head>
<!-- other stuff in head -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
If you want some fast lessons on jQuery, find free video tuts here:
https://www.thenewboston.com/videos.php?cat=32
or at
http://phpacademy.org
Related
I'm a beginner at this. I have text and input buttons in a div on a tumblr theme, intending it to show up only on the homepage, but it shows up on all pages at the bottom. Is there a way to hide it for all others, set some sort of parameter, etc?
There is more than one way to achieve this. The easiest one is to add at the head section <style> #id, or .class {display: none}</style> you use either class or id or hide the div that contains them.
You could slice your page content like this:
There are three types of HTML models :
Layouts (or Templates, Grids), which represent a structure to hold Components.
Components (or Modules) which represent a sufficient and consistent auto part.
Contents (or Datas) which represent data could be found into HTML, JSON or MongoDB (database).
e.i.
<body class="layout-class">
<section class="component-class-1"></section>
<section class="component-class-2"></section>
<section class="component-class-3">
<input class="input" />
</section>
</body>
So if you have an input like this:
<body>
<div>
<input class="input" />
</div>
</body>
with this CSS
.input {
display: inline
}
you could only hide this on the homepage layout like this:
<body class="home">
<div>
<input class="input" />
<div>
</body>
and
.home .input {
display: none;
}
or only on the overview component
<body>
<div class="overview">
<input class="input" />
<div>
</body>
and
.overview .input {
display: none;
}
or only on overview into homepage, etc.
<body>
<div class="overview">
<input class="input" />
<div>
</body>
.homepage .overview .input {
display: none;
}
Just a quick question can a CSS radio button effect something outside the element it's in.
For example:
<div class="radio">
<input id="radio-green" type="radio" name="radio-b"/>
<label for="radio-green">Green</label>
<input id="radio-blue" type="radio" name="radio-b" checked />
<label for="radio-blue">Blue</label>
<input id="radio-yellow" type="radio" name="radio-b"/>
<label for="radio-yellow">Yellow</label>
<input id="radio-red" type="radio" name="radio-b"/>
<label for="radio-red">Red</label>
<input id="radio-white" type="radio" name="radio-b"/>
<label for="radio-white">White</label>
</div>
<div class="square"></div>
With the CSS something like this?
.square {
width:300px;
height:300px;
margin:0 auto;
background:red;
}
input#radio-green:checked .square {background:green;}
Or would I need to use JS?
Here's a JS fiddle http://jsfiddle.net/m8fxw/
Thanks
If they weren't inside their parent <div> you could do it, because they'd be siblings. Unfortunately CSS rules don't let you traverse back up the tree.
If you took them out the <div class="radio"> then you could use the ~ sibling combinator:
#radio-green:checked ~ .square {background:green;}
Demo
Otherwise, I'd probably use JS to add a class to the <div class="radio> when each radio was clicked and then style the square accordingly.
If you know jQuery, you can use:
$('input[type=radio]').click(function() {
var $this = $(this);
$('.square').css('background', $(this).next().text());
})
Updated Fiddle
I got a following set up using the lastest twitter bootstrap framework:
http://jsfiddle.net/hfexR/2/
I now want that the input field takes the maximum width when there is no button next to.
How can I do this with pure css or with twitter-bootstrap itself?
Something like inline-block should go, I just don't get it at the moment...
You can use te class input-block-level like in this fiddle
<div class="container">
<div class="span4 well">
<form class="form-search">
<input type="text" class="input-block-level search-query">
</form>
<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Cancel</button>
</form>
</div>
</div>
EDIT : since bootstrap v3, classes have evolved so use col-xx-X classes to obtain the result explained below (further changes may be necessary)
Live demo (jsfiddle)
You could use a .row-fluid and use .spanX to make the inputs fill their container :
<form class="form-search">
<div class="row-fluid">
<input type="text" class="input-medium search-query span12">
</div>
</form>
<form class="form-search">
<div class="row-fluid">
<input type="text" class="input-medium search-query span8">
<button type="submit" class="btn span4">Cancel</button>
</div>
</form>
It appears that a little fix is needed for the button/input combination :
/* May not be the best way, not sure if BS has a better solution */
/* Fix for combining input and button spans in a row */
.row-fluid > input + button[class*="span"] {
float: none; /* Remove the */
display: inline-block; /* floating */
margin-left: 0; /* Stick it to the left */
}
Last thing, you shouldn't combine .spanX and .well because of the padding and borders and other things, here is an example of why (jsfiddle).
How do I make a Bootstrap input field be exactly 100% as wide as its parent?
As steve-obrien wrote in Bootstrap Issue #1058:
Setting to 100% does not work when applied directly to an input field as it does not take in to account the padding. So you end up with 100% of the container plus the padding on the input box, so the input box usually breaks outside its container.
That ticket offers various solutions, but I'm looking for the best way to do it -- preferably a CSS class already provided by Bootstrap.
Applying the input-block-level class works great for me, across various screen widths. It is defined by Bootstrap in mixins.less as follows:
// Block level inputs
.input-block-level {
display: block;
width: 100%;
min-height: 28px; // Make inputs at least the height of their button counterpart
.box-sizing(border-box); // Makes inputs behave like true block-level elements
}
This is very similar to the style suggested by 'assembler' in his comment on issue #1058.
Just add box-sizing:
input[type="text"] {
box-sizing: border-box;
}
If you're using C# ASP.NET MVC's default template you may find that site.css overrides some of Bootstraps styles. If you want to use Bootstrap, as I did, having M$ override this (without your knowledge) can be a source of great frustration! Feel free to remove any of the unwanted styles...
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
For anyone Googling this, one suggestion is to remove all the input-group class instances. Worked for me in a similar situation. Original code:
<form>
<div class="bs-callout">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" name="time" placeholder="Time">
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<div class="input-group">
<select name="dtarea" class="form-control">
<option value="1">Option value 1</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<input type="text" name="reason" class="form-control" placeholder="Reason">
</div>
</div>
</div>
</form>
New code:
<form>
<div class="bs-callout">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" name="time" placeholder="Time">
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<select name="dtarea" class="form-control">
<option value="1">Option value 1</option>
</select>
</div>
</div>
</div>
<div class="row">
<input type="text" name="reason" class="form-control" placeholder="Reason">
</div>
</div>
</form>
I found a solution that worked in my case:
<input class="form-control" style="min-width: 100%!important;" type="text" />
You only need to override the min-width set 100% and important and the result is this one:
If you don't apply it, you will always get this:
In order to get the desired result, you must set "box-sizing: border-box" vs. the default which is "box-sizing: content-box". This is precisely the issue you are referring to (From MDN):
content-box
This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.
border-box
The width and height properties include the content, the padding and border, but not the margin."
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Compatibility for this CSS is good.
Use .container-fluid, if you want to full-width as parent, spanning the entire width of your viewport.
What about?
input[type="text"] {
max-width:none;
}
Checking that some css file is causing problems. By default bootstrap displays over the entire width. For instance in MVC directory Content is site.css and there is a definition constraining width.
input,select,textarea {
max-width: 280px;}
just add:
width: 100% !important;
How can I align button right next to my input text. Example here
HTML
<div id="frm">
<label>Select an Item:
<input type="text" /><input type="button" value="..." class="open">
</label>
<label>Price:<input type="text" /></label>
CSS
#frm label
{
display:block;
float:left;
padding-right:6px;
}
#frm input
{
display:block;
}
Edit
I want my form elements horizontally aligned in blocks & I like the popup button to align with just one textbox.
I'd suggest to move the <input> outside the <label>, like this:
<div id="frm">
<div class="group">
<label for="item">Select an Item:</label>
<input type="text" id="item" />
<input type="button" value="..." class="open">
</div>
<div class="group">
<label for="price">Price:</label>
<input type="text" id="price" />
</div>
</div>
If you want to separate the inputs from the label, you should place the label text inside an own element, and not mix label text and input into a common tag.
Then, you can use the following CSS:
#frm .group {
display: block;
float: left;
padding-right: 6px;
}
#frm label {
display:block;
}
See how it looks like, is this what you want?
-Easiest way to solve your problem, is to remove all CSS - input is inline by default, so it won't wrap to the next line if you add no CSS.
-And I'd add an extra div to make sure your fields are on seperate lines, no CSS needed either.
Like this:
<div id="frm">
<div class="field">
<label>Select an Item:</label>
<input type="text"><input type="button" value="..." class="open">
</div>
<div class="field">
<label>Price:</label>
<input type="text">
</div>
</div>
http://jsfiddle.net/ckfZE/15/
http://jsfiddle.net/ckfZE/18/
added a span-tag though
This CSS is causing that conflict:
#frm input {
display:block;
}
You could set .open to display:inline to fix this.
Be a little more specific with your question. If you took the CSS out completely they would be aligned right next to each other. If you want them on separate lines add a <br/> after the text input.