I want to use the ui-select component. But I am getting a weird behaviour, the dropdown area is larger than the select.
I am not an expert in CSS, if someone can help me on this, that would be nice.
I am posting the css that goes with it (when I click on the dropdown via Chrome webtool, code inspector)
element.style {
}
.select2-drop.select2-with-searchbox.select2-drop-active {
}
.select2-drop-active {
border-color: #66afe9;
}
.select2-drop-active {
border: 1px solid #5897fb;
border-top: none;
}
.select2-drop {
width: 100%;
margin-top: -1px;
position: absolute;
z-index: 9999;
top: 100%;
background: #fff;
color: #000;
border: 1px solid #aaa;
border-top: 0;
border-radius: 0 0 4px 4px;
-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
}
.select2-container, .select2-drop, .select2-search, .select2-search input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheetdiv {
display: block;
}
Pseudo ::before element
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Pseudo ::after element
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Inherited from div.col-md-7.ui-select-container.select2.select2-container.ng-pristine.ng-valid.select2-allowclear.select2-container-active.select2-dropdown-open.open
.select2-container {
margin: 0;
position: relative;
display: inline-block;
zoom: 1;
vertical-align: middle;
margin-left: -12px;
}
Inherited from div#tab1.tab-pane.active
.tab-content > .active {
display: block;
visibility: visible;
}
.tab-content > .tab-pane {
display: none;
visibility: hidden;
}
Inherited from body.ng-scope.modal-open
body {
background-color: #e4e6e9;
min-height: 100%;
padding-bottom: 0;
font-family: 'Open Sans';
font-size: 13px;
color: #393939;
line-height: 1.5;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333333;
background-color: #ffffff;
}
body {
background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
}
Inherited from html.js.flexbox.flexboxlegacy.canvas.canvastext.webgl.no-touch.geolocation.postmessage.websqldatabase.indexeddb.hashchange.history.draganddrop.websockets.rgba.hsla.multiplebgs.backgroundsize.borderimage.borderradius.boxshadow.textshadow.opacity.cssanimations.csscolumns.cssgradients.cssreflections.csstransforms.csstransforms3d.csstransitions.fontface.generatedcontent.video.audio.localstorage.sessionstorage.webworkers.applicationcache.svg.inlinesvg.smil.svgclippaths
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
code of the ui-select
{{$select.selected.nom}}
It seems that when I remove : class="col-md-7" the problem disappear. But I need it as I am working in a bootstrap grid.
Thanks in advance.
Related
I am seeking assistance with this extra space in front of my message field on the contact form.
When you click to start typing in the message field, it will begin where it says the word "Message." The following lines are in the exact placement.
I hope this is enough for a resolution. Please let me know if there is any additional information I can provide.
Image of contact form: https://imgur.com/a/SFfwREA
.wpcf7-form-control {
width: 300px;
height: 90px;
font-size: 24px;
float:left;
margin: 0;
padding: 0px;
}
/*
.wpcf7-form-control-wrap textarea {
text-indent: -30px;
}
*/
/*CF7*/
.wpcf7-form input {
border-radius:26px;
/* Makes the edges rounded */
}
.wpcf7-form textarea {
border-radius:6px; /* Makes the edges rounded */
}
.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-textarea{
padding-left:50px;
}
.wpcf7 input[type="checkbox"]{
margin:0 !important;
background-color: red !important
}
.wpcf7 p{ position: relative; }
.wpcf7 p .fa{
position: absolute;
color: #152135 ;
z-index: 100;
font-size: 18px;
top: 28%;
left: 3%;
}
.wpcf7 p .fa-pencil{ top: 5%; left: 1.5%}
.wpcf7 label{
font-size: 25px !important;
margin-bottom:5% !important;
}
#responsive-form{
max-width:80%;
margin:0 auto;
width:100%;
padding: 20px 0 20px 0;
}
.column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.column-half{
float: left;
position: relative;
padding: 0.65rem;
width:50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/**---- Media query -**/
#media only screen and (max-width: 799px) {
.column-half{
width: 100%;
}
}
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"] {
height:57px;
}
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea, .wpcf7 input[type="tel"] {
width: 85%;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #cacaca;
font-size: 14px;
color: #3e4644 !important;
background-color: #f0f0f0;
font-weight: 200;
}
/* Contact Form 7 Submit Button
-------------------------------*/
.wpcf7 input[type="submit"] {
color: #ffffff;
font-size: 13px;
font-weight: 700;
background: #E2272E;
padding: 15px 25px 15px 25px;
border: none;
border-radius: 5px;
width: auto;
text-transform: uppercase;
letter-spacing: 5px;
}
.wpcf7 input:hover[type="submit"] {
background: #494949;
transition: all 0.4s ease 0s;
}
.wpcf7 input:active[type="submit"] {
background: #000000;
}
So far I tried to use the text-indent, padding, and margin to adjust it but have had no luck.
The text-indent worked the best because I was able to get the first line to look normal and type normal but when I got to the second line it started doing the same ident. Maybe if there is a way I can get the text-indent to apply to all the lines in the text box?
Lastly, thank you in advance for any help, solution, or suggestion that is provided on this post.
I have css reset with next code
* {
margin: 0;
padding: 0;
list-style: none;
border: 0;
font-size: 100%;
outline: none;
font-family: Verdana, Arial, sans-serif;
vertical-align: baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
And I want these styles to apply to all elements except those that are in an element with a special class.
Like that
*:not(.without-reset) * {
margin: 0;
padding: 0;
list-style: none;
border: 0;
font-size: 100%;
outline: none;
font-family: Verdana, Arial, sans-serif;
vertical-align: baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
But it does not work. How to do it?
I think what you are looking for is something in the line of this:
*:not(.without-reset),
*:not(.without-reset *){
margin: 0;
padding: 0;
list-style: none;
border: 0;
font-size: 100%;
outline: none;
font-family: Verdana, Arial, sans-serif;
vertical-align: baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
This prevents the styling on both the .without-reset elements, plus, it prevents all styling on their children (.without-reset *).
I think what you are looking for is something in the line of this:
*:not(.without-reset),
*:not(.without-reset *){
margin: 0;
padding: 0;
list-style: none;
border: 0;
font-size: 100%;
outline: none;
font-family: Verdana, Arial, sans-serif;
vertical-align: baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
This prevents the styling on the .without-reset elements, as well as preventing all styling on their children (.without-reset *).
I'm using a child theme to modify the Twenty Thirteen theme. However, when I activated it some of the CSS seems to have reverted back to the year 2000. Screenshot for reference. Why did this happen? My style sheet for the child theme is pretty blank...Note - I removed the other parts of the comment that I've read are unnecessary, such as description and whatnot.
/*Theme Name: Twenty Thirteen Child
Template: twentythirteen
**/
<style>
#fd_question_submit_button {
position:absolute;
}
</style>
Inspect element on Chrome
element.style {
}
localhost/media="all"
#fd_question_submit_button {
position: absolute;
}
localhost/media="all"
#anspress *, #anspress *:before, #anspress *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheetinput:not([type="image" i]), textarea {
box-sizing: border-box;
}
user agent stylesheetinput[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
padding: 1px 6px;
}
user agent stylesheetinput[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
padding: 2px 6px 3px;
border: 2px outset buttonface;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: buttonface;
box-sizing: border-box;
}
user agent stylesheetinput[type="button" i], input[type="submit" i], input[type="reset" i] {
-webkit-appearance: push-button;
-webkit-user-select: none;
white-space: pre;
}
user agent stylesheetinput {
-webkit-appearance: textfield;
padding: 1px;
background-color: white;
border: 2px inset;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
}
user agent stylesheetinput, textarea, keygen, select, button {
margin: 0em;
font: 13.3333px Arial;
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
}
user agent stylesheetinput, textarea, keygen, select, button, meter, progress {
-webkit-writing-mode: horizontal-tb;
}
Inherited from div.ap-a-cells.clearfix
localhost/media="all"
#anspress .ap-a-cells {
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 3px;
margin-left: 70px;
padding: 10px;
font-size: 14px;
}
Inherited from div#anspress
localhost/media="all"
#anspress {
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
font-size: 14px;
line-height: 1.4;
word-wrap: break-word;
background: #fff;
}
Pseudo ::before element
localhost/media="all"
#anspress *, #anspress *:before, #anspress *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Pseudo ::after element
localhost/media="all"
#anspress *, #anspress *:before, #anspress *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
If that is your CSS stylesheet, you don't need to have the style tags in it, it's not an HTML file. That could be causing a lot of problems with other CSS files, depending on the order they load.
How can I remove the dropdown-arrows without messing up the height and at the same time hide the border when I use Bootstrap 3?
Here is a plunk where I try to do this. The hide arrow (class custom-select) is based on this blog copying this code.
Perhaps better check out the plunk, but here is the CSS:
.no-border {
border: 0;
box-shadow: none;
}
.custom-select {
background-color: #fff;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 0 2em;
padding: 0;
position: relative;
width: 100%;
z-index: 1;
}
.custom-select:hover {
border-color: #999;
}
.custom-select:before {
color: #333;
display: block;
font-family: 'FontAwesome';
font-size: 1em;
height: 100%;
line-height: 2.5em;
padding: 0 0.625em;
position: absolute;
top: 0;
right: 0;
text-align: center;
width: 1em;
z-index: -1;
}
.custom-select select {
background-color: transparent;
border: 0 none;
box-shadow: none;
color: #333;
display: block;
font-size: 100%;
line-height: normal;
margin: 0;
padding: .5em;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.custom-select select::-ms-expand {
display: none; /* to ie 10 */
}
.custom-select select:focus {
outline: none;
}
/* little trick for custom select elements in mozilla firefox 17/06/2014 #rodrigoludgero */
/* pseudo class https://developer.mozilla.org/en-US/docs/Web/CSS/:any */
:-moz-any(.custom-select):before {
background-color: #fff; /* this is necessary for overcome the caret default browser */
pointer-events: none; /* https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events */
z-index: 1; /* this is necessary for overcome the pseudo element */
}
Edit: If I add !important to my no-border border, then it solves the border-related problem:
.no-border {
border: 0 !important;
box-shadow: none;
}
So then remains the height-change issue when toggeling custom-select for removing/adding the dropdown-arrows...
Using !important should really be used only as a last resort.
In my opinion, its the lazy way out.
In your .custom-select class, you have two things
.custom-select {
background-color: #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 0; /* "0 0 2em" reads as margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: 2em; (32px) */
padding: 0;
position: relative;
width: 100%;
z-index: 1;
}
Your margin was margin: 0 0 2em;, and you were giving it a border, youself. I just removed that, instead. Or you could just change it to border: 0;
Also: Semantics... But:
<select id="status" class="form-control" ng-class="{'no-border': border}" id="inputEmail3">
<option>First option</option>
<option>Another option</option>
<option>We also have a tird</option>
</select>
You have two id attributes. You should remove one.
I was using this code to create a ruler on my site:
CSS:
.ruler, .ruler li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
/* IE6-7 Fix */
.ruler, .ruler li {
*display: inline;
}
.ruler {
background: lightYellow;
box-shadow: 0 -1px 1em hsl(60, 60%, 84%) inset;
border-radius: 2px;
border: 1px solid #ccc;
color: #ccc;
margin: 0;
height: 3em;
padding-right: 1cm;
white-space: nowrap;
}
.ruler li {
padding-left: 1cm;
width: 2em;
margin: .64em -1em -.64em;
text-align: center;
position: relative;
text-shadow: 1px 1px hsl(60, 60%, 84%);
}
.ruler li:before {
content: '';
position: absolute;
border-left: 1px solid #ccc;
height: .64em;
top: -.64em;
right: 1em;
}
/* Make me pretty! */
body {
font: 12px Ubuntu, Arial, sans-serif;
margin: 20px;
}
div {
margin-top: 2em;
}
HTML:
<ul class="ruler"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
It was working OK with bootstrap2:
http://jsfiddle.net/Uvt5U/4/
Now I'm migrating to bootstrap3 and the ruler is broken:
http://jsfiddle.net/Uvt5U/
How can I get it working?
Kind Regards.
This is because in Bootstrap 3 box-sizing style is set to border-box, while in Bootstrap 2 it's not.
My Firebug points me that this rule is setting this style:
*, *:before, *:after {
-moz-box-sizing: border-box;
}
bootstrap.min.css line 9