I'm using Bootstrap 3 and want to override the default margin-bottom when screen min-width is 768, for inline form groups belonging to a form identified by #filter. So I did:
#media screen and (min-width: 768px) {
#filter .form-inline .form-group {
margin-bottom: 4px;
}
}
But it doesn't work, even when I added important! on the rule.
However, it does work after I removed the #filter in selector:
#media screen and (min-width: 768px) {
.form-inline .form-group {
margin-bottom: 4px;
}
}
That's really weird! I'm sure and tested that #filter can select the form. Can anyone tell me why?
The piece of code in Bootstrap I want to override is:
#media (min-width: 768px) {
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
...
}
But I only want to override this for the form #filter
The HTML code for the form is:
<form class="form-inline" id="filter" method="GET" action="<%= url("/blogs", false) %>">
<div class="form-group">
<label for="id" class="control-label">ID</label>
<input class="form-control" id="id" name="id" value="<%= params[:id] %>" />
</div>
<div class="form-group">
<label for="user_id" class="control-label">UID</label>
<input class="form-control" id="user_id" name="user_id" value="<%= params[:user_id] %>" />
</div>
...
<button type="submit" class="btn btn-default">Filter</button>
</form>
You are using the wrong selector #filter .form-inline. This means that .form-inline is the child of #filter which is incorrect.
What you need is #filter.form-inline which is a multi-selector. See Multiple Class / ID and Class Selectors
Related
I have developed a custom quote form for a client and when the user scroll down I add a class called .quoteform-fixed it also has an id called #quoteForm however I am trying to hide the entire quote form using media queries. Here is the css I am using....
#media screen and (max-width:1670px) and (min-width:1199px){
.quoteform-fixed {display:none !important}
}
#media screen and (max-width:1198px) and (min-width:767px){
.quoteform-fixed {display:none !important}
}
#media screen and (max-width:766px) and (min-width:220px){
.quoteform-fixed {display:none !important}
}
Here is the main rules for quoteform-fixed...
.quoteform-fixed {
position: fixed;
top: 35px;
right: 35px;
display: block;
}
here is the form HTML...
<div id="quoteForm" class="quote-form">
<div id="quoteFormHead"></div>
<form action="<?php the_permalink(); ?>" method="post">
<div id="quoteFormBody">
<div class="formfullwrapper">
<input type="text" name="message_fname" placeholder="Enter your full name here...">
</div>
<div class="formfullwrapper">
<input type="email" name="message_email" placeholder="Enter your email address here...">
</div>
<div class="formfullwrapper">
<input type="number" name="message_phone" placeholder="Enter your phone number here...">
</div>
<div class="formfullwrapper">
<textarea name="message_msg" placeholder="Details, please! Audience? Word count? Type of document? Tone? Deadlines? Sensitive content?"></textarea>
</div>
</div>
<div id="quoteFormFooter">
<div class="formfullwrapper">
<input type="submit" id="submitform" value="Get my free quote">
</div>
</div>
</form>
</div>
And here is the Javascript to add the class on scroll...
window.onscroll = function(){
var top = window.pageYOffset || document.documentElement.scrollTop;
var form = document.getElementById('quoteForm');
if (top > 800) {
form.classList.add("quoteform-fixed");
} else {
form.classList.remove("quoteform-fixed");
}
}
Many thanks,
Phillip
Not sure why you are adding three media queries to apply the same property, but creating it with the max and min flipped should work.
form {
width: 100vw;
height: 600px;
background: tomato;
}
#media (min-width: 300px) and (max-width: 600px) {
.quoteform-fixed {
display: none;
}
}
<form class='quoteform-fixed'>
</form>
<div class="form-group">
<label for="Description">"Description"</label>
<input type="text" id="Description" class="form-control"
[(ngModel)]="description" name="Description"
required />
</div>
Is there anyway to add a star (*) after label( label::after) without changing anything in the code by just adding CSS selector? AFAIK there is no support for previous css selector (has) so I cannot use something like:
label:has(+ input:required)::after {
content:" *";
}
No.
Via CSS-only there is no way to achieve the result without changing markup or javascript in the code unless
1) label and input are in the same line, side by side and
2) the background is a solid color
as in the example below, so you could cheat by always adding the star, but if the sibling input is not [required] then cover the star using a box-shadow.
input { border: 1px #ccc solid }
label::after {
content: "*";
width: 1.5em;
margin-right: 1.5em;
}
label + input:not([required]) {
box-shadow: -3.2em 0 0 #fff;
}
<label>Username</label>
<input name='username' required />
<br /><br />
<label>Username</label>
<input name='username' />
But I'd suggest to at least revert the order of the elements in the markup (and showing them in the right order with display:flex and flex-direction: row-reverse)
If you are fine with adding a div around your every label and input group, then below approach can help you.
input {
border: 1px #ccc solid
}
input[required]+label::after {
content: "*";
color: red;
width: 1.5em;
margin-right: 1.5em;
}
.form-group {
display: flex;
}
.form-group label {
order: -1;
width: 100px;
}
<div class="form-group">
<input name='username' required />
<label>Username</label>
</div>
<br /><br />
<div class="form-group">
<input name='username' />
<label>Username</label>
</div>
The correct selector would be
.form-group:has(:required) label
But, alas, as the :has pseudo class is CSS Selectors Level 4 and has no browser support at all.
You can use it with jQuery though:
jQuery($ => {
$('.form-group:has(:required) label').each((i,el) => {console.log(el); el.classList.add('required')})
})
label.required:after {
content: ' *';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="Description"><span>Description</span></label>
<input type="text" id="Description" class="form-control"
name="Description"
required />
</div>
Since you seem to use angular, this might get a little tricky. I don't know, if there is something like this in Angular.
I am using a form-inline class on my form and it looks great on a desktop. But when I get to the XS width EVERYTHING stacks one ontop of each other, but it's unnecessary. I only need each form-group to stack, not the form inputs inside each.
I would like to have the 3 date selects on one row and the 2 time selects on a new row below.
My HTML:
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Passengers</label><br />
<input type="text" class="form-control" id="exampleInputName2" placeholder="2">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Departure Date / Time</label><br />
<select class="form-control" style="max-width:100px"><option>31</option></select>
<select class="form-control" style="max-width:100px"><option>Jan</option></select>
<select class="form-control" style="max-width:100px"><option>2015</option></select> <strong>at</strong>
<select class="form-control" style="max-width:100px"><option>12</option></select> <strong>:</strong>
<select class="form-control" style="max-width:100px"><option>00</option></select>
</div>
</form>
The Bootstrap example for .inline-form states:
Add .form-inline to your form (which doesn't have to be a ) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
The CSS they include is:
#media (min-width: 768px)
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
so this is why the form changes to vertical at a small resolution.
You should be able to prevent this behavior by adding the CSS:
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
(the same as Bootstrap's CSS, but without the media query)
How can I make an element with class properties display as inline-block for laptops and desktops and a list for tablets and mobiles?
Whenever I shrink the width of my browser, iPad design elements do not fit properly.
.properties {
display: inline-block;
}
#media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
.properties {
display: inline-block;
}
.propertyButton {
display: inline-block;
}
}
#media (max-width: 900px) {
.properties {
display: list-item;
list-style-type: none;
}
.propertyButton {
margin-top: -2%;
margin-left: 30%;
}
}
<div class="propertyWrapper" style="width:100%;">
<div style="float:right">
<span ng-click="addProperty()" class="button buttonPrimary pull-right">Add Property</span>
</div>
<div class="properties">
<label>Name</label>
<input type="text" />
</div>
<div class="properties">
<label>Name</label>
<input type="text" />
</div>
<div class="properties">
<label>Name</label>
<input type="text" />
</div>
<div class="properties">
<label>
IsRequired(TE):
</label>
<input type="checkbox" ng-model="property.TradeEarthRequired" name="UsedEquipmentPropertyList[0].TradeEarthRequired" class="ng-pristine ng-valid">
</div>
<div class="propertyButton">
<span class="button primaryAction" ng-click="addProperty()">Add</span>
<span class="button primaryAction" ng-click="removeProperty(property,$index)">Delete</span>
</div>
</div>
Sometimes, you just need to duplicate the code.
Keep an inline-block view for windows sized over 1200.
When you are under 1200, just hide it and show a fresh new list ?
I think you've just got your CSS a bit wrong - the media queries shouldn't be nested like that, as far as I can tell. Is this JSFiddle more like what you wanted?
.properties {
display: inline-block;
}
#media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
.properties {
display: inline-block;
}
.propertyButton {
display: inline-block;
}
}
#media screen and (max-width: 900px) {
.properties {
display: list-item;
list-style-type: none;
}
.propertyButton {
margin-top:-2%;
margin-left: 30%;
}
}
I have this code and I'm using input-small to make my textbox width shorter. It works on desktop and tablet but not on mobile.
<div class="input-append date">
<input id="month" type="text" placeholder="Select Month" class="input-small"><span class="add-on"><i class="icon-th"></i></span>
</div>
On Desktop & tablet
Didn't worked on handphone though:
Any idea on how I can solve this? Thanks in advance.
In your bootstrap-responsive.css, there is more specific css over riding that:
.input-prepend input,
.input-append input,
.input-prepend input[class*="span"],
.input-append input[class*="span"] {
display: inline-block;
width: auto;
}
To change all .input-append to use that .input-small width, do this after all other css:
#media (max-width:767px) {
.input-append .input-small {width:90px;}
}
OR be more specific if you only want to deal with that .input-append.
#media (max-width:767px) {
.small-input-append.input-append .input-small {width:90px;}
}
Change your html to:
<div class="small-input-append input-append date">
<input id="month" type="text" placeholder="Select Month" class="input-small"><span class="add-on"><i class="icon-th"></i></span>
</div>