Can someone suggest or help with the border on full calendar V5.3. Border is incomplete on both the top and left. CSS worked in V4, can't see where/if this changed in V5.
#calendar {
max-width: 600px;
max-height: auto;
margin: 60px auto;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
font-size: 11px;
}
.fc td,
.fc th {
border: 1px solid darkgreen;
}
thanks
Jsfiddle
Related
I need to align label and content in a form but no code I tried worked.
Expected
currently look like
The css code I created is this:
.crm-webform, .crm-webform-label, .crm-webform-fieldset, .crm-webform-input-label, .crm-webform-group, .crm-webform-input, .crm-webform-label-content {font-family: Open sans, 'Open sans', Lato, sans-serif; font-size:14px; color:black; margin: 0px 0px 3px 0px; }
.crm-webform-input {height: 32px; } .crm-webform-icon {height: 22px; line-height: 30px;} #LEAD_UF_CRM_5BEF2B8E126AA { padding: 1px 3px 1px 3px; height:60px; resize: both;
overflow: auto;} label[for=LEAD_UF_CRM_1550937652], label[for=LEAD_UF_CRM_1550937755] {height:0px; color:transparent; opacity:0; margin: 0px 6px 0px 6px;}
.flexible-middle-width, .crm-webform-header-container {background-color:transparent; background-opacity:0.4;}
/*#bx_form_iframe_6 , .crm-webform-block .bx_form_iframe_12 */
.*, * {background-color:transparent; background-opacity:0.4; font-family:Open-sans, Open sans, 'Open sans', Lato, sans-serif; color:black; }
h1, .crm-webform-header {color:black; font-family:Open-sans, 'Open sans', Lato, sans-serif; font-weight: bold; size:26px; letter-spacing: 1px; margin: 6px 0px 0px 0px;}
.crm-webform-input {font-weight:600; } .crm-webform-checkbox-container, .crm-webform-checkbox-radio, .crm-webform-checkbox-name {display:inline; font-family:Open-sans,'Open sans', Lato, sans-serif; font-size:14px; color:black; padding: 0px 4px 0px 9px;}
If you set these attributes to this class .crm-webform-field-string (or create another class as well) it will work:
.crm-webform-field-string {
display: flex;
align-items: center;
}
The rest is only to set a margin-right to the label container.
For example:
margin-right: 30px;
I've got the following:
HTML:
<div class="boxy"><img><p>Paragraph testing.</p></div>
CSS:
.boxy{
width= 150px;
background: #E5E5E5;
filter:alpha(opacity=90);
opacity:0.9;
color: #e9e9e9;
font-family: "Century Gothic", arial, sans-serif;
border-radius: 8px;
font-size: 12px;
font-weight: bold;
padding: 2px 2px 2px 5px;
margin:0 auto;
overflow: visible;
}
I notice that on jsfiddle the div appears long although I've limited it by width. I've also added Overflow:Visible but did not work. Would appreciate any advise. Thanks!
Change:
width= 150px;
To this:
width: 150px;
I have a problem with a span element in IE (currently tested against IE9 and IE10). When I open F12 Developer Tools and select that span element I can't find it on screen. However, if I manually assign a background-color other than transparent or inherit it is shown at its expected place.
The problem is, that the span element is used as alignment element for a popup, but since the element is missing, the popup is incorrectly aligned.
I wasn't able to observe that behavior in jsfiddle, yet. And also can't test it in other browsers.
Here is how the significant markup looks like:
<div id="div1">
<div id="div2">
<span>
<input id="in" value="Somename"></input>
<label for="in">Person surname:</label>
</span>
</div>
</div>
And the corresponding CSS like shown in the developer tools (except for the background-color attributes):
#div1 {
background-color: grey;
cursor: auto;
font-family: Thoma, Verdana, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
text-align: left;
color: #000000;
bottom: 0px;
height: auto;
left: 0px;
position: absolute;
right: 0px;
top: 0px;
width: auto;
}
#div2 {
background-color: blue;
cursor: auto;
font-family: Thoma, Verdana, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
text-align: left;
color: #000000;
}
span {
/* background-color: red; */
font-family: Thoma, Verdana, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
text-align: left;
color: #000000;
margin-left: 0px;
margin-right: 0px;
box-sizing: border-box;
width: 100%;
}
input {
/*background-color: transparent;*/
color: #000000;
padding: 1px 2px 1px 3px;
font-family: Thoma, Verdana, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
margin: 1px;
border: 1px solid #b9b9b4;
overflow-x: hidden;
overflow-y: auto;
width: 90%;
}
label {
cursor: auto;
font-family: Thoma, Verdana, Helvetica, sans-serif;
font-weight: normal;
text-align: left;
color: #000000;
left: 0px;
top: -99999px;
font-size: 0px;
position: absolute;
}
Any ideas, why the span tag could be missing?
Maybe I should clarify, I'am not so much interested in a solution (since I already found one), but in an explanation why I observe this different behavior. Both for IE vs Jsfiddle and with vs without background-color.
I am not responsible for the HTML markup, and can't change that. I have only limited access to change the CSS.
Either use display:block or float:left
Tested on IE9-10
Also note that: use div instead, span tag is not designed to use like this and not a problem to create another #div3 unless you have something specific.
span {
background-color: red;
display:block; /* float:left; */
font-family: Thoma, Verdana, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
text-align: left;
color: #000000;
margin-left: 0px;
margin-right: 0px;
box-sizing: border-box;
width: 100%;
}
Add "display: block;" to the span element css.
The span element default display property is inline and with this you can't set width, height, margin or padding properties. So the span element is not missing but have a 0px width and the height of the line-height of font property.
Regards!
Definition and Usage
The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
The <span> tag provides a way to add a hook to a part of a text or a part of a document.
more about span
I am using below CSS for my button
.ui-button-text {
background-color:#3e9cbf !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #F0F8FF !important;
width: 50px;
}
Here if you will check ,i am using width: 50px; but i want the width of button shuold be flexible it should change width according to text size if button text is Submit then button width will small but if text is something like this Post Your Question now button width should change.
How can we achieve this with css ?
If you are using a div then you need to set it to display:inline-block then you do not need to set a width.
DEMO http://jsfiddle.net/kevinPHPkevin/kw3La/
.ui-button-text {
background-color:#3e9cbf !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #F0F8FF !important;
padding: 10px;
display:inline-block;
width: auto !important;
}
Do it like this: demo
CSS:
.ui-button-text {
background-color:#3e9cbf !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #F0F8FF !important;
padding:2px 6px;
}
html:
<button class="ui-button-text">Submit</button>
<button class="ui-button-text">Post your question</button>
However if you're talking about overriding the css that is coming from .ui-button-text, then do as here : http://jsfiddle.net/bcqPG/1/
CSS:
.ui-button-text {
background-color:#3e9cbf !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #F0F8FF !important;
width:50px;
}
button.ui-button-text{
width:auto;
padding:2px 6px;
}
I was toying with some made code on codepen, trying to get used to html/css since I am not really comfortable on the positioning. This must be pretty silly but I can't make it work.
HTML:
<div id="hh">
<h1>Wacom Hover Effect</h1>
</div>
<div id="cl">
Read More
Learn More
Read Article
Download
</div>
CSS:
*, :before, :after{ #include box-sizing('border-box'); }
body{ padding: 1em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #eee; }
#hh{
position:absolute;
left:50%
}
h1{
position:relative;
left:-50%;
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
}
#cl{
clear:both;
}
.button,
[class*="button-"]{
position: relative;
display: inline-block;
overflow: hidden;
float:left;
margin: 0 1em 1em 0;
padding: 0 4em;
height: 3.5em;
font: 300 1em/3.5em 'Open Sans', sans-serif;
text:{
decoration: none;
shadow: 0 1px 3px rgba(black, .35);
}
letter-spacing: .08em;
color: #fff;
background: #0090C0;
border: solid 1px #fff;
border-radius: 2px;
#include transition(.35s ease all);
}
}
There is some irrelevant code after that about hovering etc.
The result is this: http://codepen.io/roygbiv/full/FjLcA
So I wanted h1 at center and I found here the method of putting #hh absolute, left:50% and then h1 relative left:-50%. And it screwed up the positioning.
What I want is h1 on center top, then the 4 "a"s under it (not center, just not overlapping).
Putting position: absolute on an element makes all other elements ignore it. This can be solved by putting display: inline-block on the h1 and text-align: center on #hh:
Check new pen: http://codepen.io/anon/pen/kovaC
#hh {
text-align: center;
}
h1{
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
display: inline-block;
}
inline-block makes the element's box adapt to the width of its text. I presume the desired look of the header is for the blue box to not be 100% width, which is otherwise the case with h1 and other block elements.
i have done the following modification in css and it is working as expected:
#hh{
text-align: center;
margin-left:auto;
margin-right:auto;
width:40%;
}
h1{
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
}