We are using PHP to dynamically generate form HTML using Bootstrap 3.
In bootstrap 2 it was a bit easier to switch the form styling without changing the markup within the form. We only had to change the form class from "form" to "form-horizontal". This made it extremely easy to dynamically generate form code and change the design/display.
In bootstrap 3 this is no longer possible and the html markup within the form has to be modified to add the "col" classes for a horizontal form. We need to be able to override all of the col-xx-x classes if they are within a form with the class "form" or "form-inline" to prevent us from having to change the markup for each form class. Do I need to write a new mixin for this? If so any examples?
A small example of the resulting CSS would be something like:
.form .col-lg-1, .form .col-lg-2, .form .col-lg-3, .form .col-lg-4,
.form .col-lg-5, .form .col-lg-6, .form .col-lg-7, .form .col-lg-8,
.form .col-lg-9, .form .col-lg-10, .form .col-lg-11, .form .col-lg-12,
.form .col-lg-13, .form .col-lg- 14, .form .col-lg-15, .form .col-lg-16,
.form .col-lg-17, .form .col-lg-18, .form .col-lg-19, .form .col-lg-20,
.form .col-lg-21, .form .col-lg-22, .form .col-lg-23 {
float: none
}
It seems it might be easier to just override these using the "control-label" class and then also add another class to the div that surrounds the controls.
Example:
.form .control-label,
.form .controls {
float: none;
width: auto;
padding: 0;
}
As long as the has a class of "control-label" and the div surrounding the actual input has a class of "controls" this seems to work fine.
It seems an attribute selector would work well here too:
.form [class^='col-lg-'], /* starts with col-lg- class */
.form [class*=' col-lg-'], /* contains later value starting with col-lg- */
.form-inline [class^='col-lg-'],
.form-inline [class*=' col-lg-'] {
float: none;
}
Related
I am working in a "Nuxt" app and using "Vuetify" as my framework. this is the code of one of my components:
<template>
<v-text-field
color="var(--color4)"
class="px-15"
>
<template v-slot:label>
<span class="labelClass">
please enter your name
</span>
</template>
</v-text-field>
</template>
<style scoped>
.labelClass {
font-size: 1.2rem;
}
</style>
I wanted to increase the font-size of label in input. according to Vuetify ducomentation we must use "slots" for doing that. so I added a new template and "slot" to that. Then I used labelClass for the span inside that to control the font-size. the font-size changed but the problem here is that if I increase font-size (for example to 1.8rem), some parts of the text of that disappears:
And it becomes worse, if the font-size increases. I also read this question, but it did not help me. I also tried to set "height" prop for v-text-field and some classes like v-text-field__slot but they did not work for me.
The problem is, that after render the input get this css style:
.v-input input {
max-height: 32px;
}
To solve this, you simply need to overwrite this. If you don´t want to override this for every input, just add another class to your v-text-field:
<v-text-field
color="var(--color4)"
class="px-15 my-class"
>
... and then use it like this:
.v-input.my-class input {
max-height: 32px;
}
Edit: Looks like you also need to override the following style:
.v-input .v-label {
height: 20px;
line-height: 20px;
letter-spacing: normal;
}
This is the style of the label, you need to increase height and line-height. Another override needs to be done at:
.v-text-field input {
flex: 1 1 auto;
line-height: 30px;
padding: 8px 0 8px;
max-width: 100%;
min-width: 0;
width: 100%;
}
The line-height needs to be increased.
As your html in your slot is only displayed in the slot, line-height and max-width from parents affect the visible space.
you can use class="text-h3" inside
<v-text-field
v-model="item"
label="label"
class="text-h3"
></v-text-field>
I want to create a CSS grid with columns that have auto widths so that it fits the data in a way that makes the most sense automatically.
My problem is that I don't know have the same automatic columns widths for each column when looping through a list of items that produces a grid with 4 columns.
Temporarily, I set the first 2 columns to a set pixel amount, but I would like them to all be matching automatic widths.
HTML
<div repeat.for="milestone of milestoneHistory">
<div class="grid">
<div>${milestone.statusDescription}</div>
<div>${milestone.quantity}</div>
<div>${milestone.milestoneDate | dateTime}</div>
<div>${milestone.createDate | dateTimeFromUtc}</div>
</div>
</div>
SASS
.grid {
display: grid;
grid-template-columns: 100px 75px auto auto;
//grid-template-columns: auto auto auto auto; //This is how the first picture is styled
border-bottom: 1px solid lightgrey;
&.header {
font-weight: 600;
border-bottom: 2px solid #black;
margin-bottom: 3px;
}
}
I want it to go from this:
To something more like this this:
<div id="abc">
<div id="bac" ngIf="show">
<!-- Content -->
</div>
<div id="cde">cds</div>
</div>
I have a div want to add or remove from DOM slowly(show and hide) using *ngIf and likewise adding or removing of div.id ="bac" should cause div.id='cde' to move left or right slowly like it is animating.
*ngIf probably is not he best thing you are looking for, instead of this, use ngClass and define the css transitions and positions for these animations.
*ngIf fully hides/shows a node from/in DOM, it's like display: none/block which is not able to be animated through css-transitions
here is an example
<div class="animated" [ngClass]=" { 'show': show, 'hide': !show }">
content
</div>
then in the css
.animated {
display: inline-block;
width: 100%;
height: 80px;
background: gray;
transition: 1.5s linear margin-left;
}
.animated.show {
margin-left: 0;
}
.animated.hide {
margin-left: -120vw;
}
Height also can be changed, depends on which effect you expect.
Here is stackblitz with working code
I'm using a CMS theme that contains all of Bootstrap 3. Is it possible to add a title block manually in HTML/CSS? I'm not sure if that's the block's official name... it's the purple full-width block containing the text:
CSS
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
in the following link (for example):
http://getbootstrap.com/css/
This title block is built into my theme and is available based on the design for the page I select.
But I was wondering if this block is available separately from Bootstrap, like a Navbar, panel, well, etc. component, that I can just include some HTML/CSS code and have it appear in the body of a page, for example.
No it's not in bootstrap but it's pretty easy to grab the style and use it anywhere:
.bs-docs-header {
font-size: 24px;
padding-bottom: 60px;
padding-top: 60px;
text-align: left;
}
.bs-docs-masthead, .bs-docs-header {
background-color: #6F5499;
background-image: linear-gradient(to bottom, #563D7C 0px, #6F5499 100%);
background-repeat: repeat-x;
color: #CDBFE3;
padding: 30px 15px;
position: relative;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
check this jsfiddle
If you look at their source, they are using a stylesheet called docs.min.css, they have defined the background in here. Other then that it is just a simple <div class="container"><!--title and subtitle here-->. So the answer is a yes and a no. You can, of course, use containers seperately from your CMS when using bootstrap, but the background will not be available unless you strip it from the getbootstrap.com source.
Edit
If you see their styles, they are using this code in their docs.min.css:
#media (min-width: 768px)
.bs-docs-header h1 {
font-size: 60px;
line-height: 1;
}
}
This means, when the width of your window is above 768 pixels, it gives the h1 a font-size of 60px. When you fall under it, this code is ignored and the default bootstrap font-size is being applied.
Edit 2
To get a background-color behind it, don't apply the background color to the .container. wrap a div around it without a width value. The container width is not full width, so if you apply a background to it, its only behind the container that is centered.
Edit 3
A simple HTML structure would be something like this (you still have to include all bootstrap styles and default html tags etc.
<html>
<body>
<div id="bgColorDiv">
<div class="container">
<h1>My title</h1>
<p>Paragraph below the title</p>
</div>
</div>
</body>
</html>
This button is before CSS Sprites
<input type="image" src="/images/search-button.png" value="" id="search-button">
I'm trying to implement CSS Sprites with one of my search form and the problem is that if I use
<input id="search-button" class="sprites1" type="submit" value="">
it will look something like this.
As you can see the image on the right doesn't look right, but it is click-able.
Then I tried with
<span id="search-button" class="sprites1"></span>
Then it looks right! But!! I can't click on it.
So here is my CSS sprites code.
What I have to implement to get it look the one I want and I can click on it?
.sprites1 {
background: url('result.png');
}
#search-button {background-position: -0px -462px;
width:16px; height:16px; float:right; }
The problem here is the default css that the browser uses on elements. You should try resetting that css. I often use the following snippet:
/* reset css of buttons */
.cssresetbutton {
border-width: 0px;
border-style: none;
background: inherit;
font: inherit;
color: blue;
padding: 0px; }
.cssresetbutton:active {
border-width: 0px;
border-style: none;
background: inherit;
outline: 0;
box-shadow: none; }
try adding the cssresetbutton class to your input element and see if it works.
EDIT:
You can also try not using a input[type=submit] element. For example:
<span id="search-button" class="sprites1" onClick="document.getElementById('formid').submit()"></span>
It will submit the form#formid element when clicked.