I am using sencha touch for one of my projects and surprisingly the letter 'i' does not appear properly(it looks like a small 'l' instead) Please check the picture that I have posted.
The font and the case of the text cannot be changed because that is the requirement of the client. I am not posting any code because there is no issue in the functionality but just the display of this one particular letter. I am frustrated with this but I am sure that someone out there can figure this out. Any help would be really appreciated. Thanks in advance.
P.S. When I change the resolution then the letter appears correctly
This is the css on the parent panel:
*, ::after, ::before {
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
-webkit-user-drag:none;
-webkit-user-select:none;
box-sizing:border-box;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
.x-stretched.x-container > .x-inner, .x-stretched.x-container > .x-body, .x-stretched.x-container > .x-body > .x-inner {
-webkit-box-flex:1;
-webkit-box-orient:vertical;
display:-webkit-box;
flex:1 0 auto;
flex-direction:column;
min-height:0;
}
.x-inner, .x-body {
height:100%;
width:100%;
}
.generalInfoMainName {
color: black;
padding: 10px;
font-size: 17px;
font-family: opensans-bold;
font-weight: bold;
}
This is the HTML for the div that holds the text "AMA Building":
<div class="x-inner x-panel-inner" id="ext-element-692">
<div class="x-innerhtml" id="ext-element-693">
<span style="color: white;">AMA Building</span>
</div>
</div>
Related
I am trying to make a component with buttons inside a div, I am having issues, because the styles are not applying on the buttons, I guess I should not use slot here. Can someone guide me?
Component
<template>
<div :class="[$style.btnGroup]" v-bind="$attrs">
<slot :class="$style[variant]">/>
</div>
</template>
How I use this
<ButtonGroup variant="warning">
<button>Test</button>
<button>Test</button>
<button>Test</button>
</ButtonGroup>
I use css module
<style module>
.btnGroup button {
position: relative;
border: none;
font-weight: 400;
border-radius: 0.25rem;
cursor: pointer;
font-size: 1rem;
padding: 0.5rem 1rem;
transition: 0.1s;
}
.primary{
background: var(--primary-bg);
border: 1px solid var(--primary-bg);
color: white;
}
.warning {
background: var(--warning-bg);
border: 1px solid var(--warning-bg);
font-size: 1rem;
padding: 0.5rem 1rem;
transition: 0.1s;
color: black;
}
etc. for each variant I have different style.
You are applying the class on the button group not the buttons that are inside, to solve this instead of binding the class to the slot bind another variable and use that variable binding on each button or you can solve it through css thats why i suggested you show us the css give a class to the buttongroup the way you are doing and in css do as so:
<slot class="buttongroupclass">/>
.buttongroupclass button{
//the css you want to apply
}
I am having trouble with this Github package for vuejs pagination. It seem to work on bootstrap 3 but when I use bootstrap 4, it just doesn't work. My problem basically is that bootstrap 4 doesn't style the list item correctly.
I put 'pagination' class on :container-class and it makes the list inline, but not style it like what a normal bootstrap pagination should look. It's just plain list that is inline. I even tried overriding it and putting my own 'mypagination' class on :container-class but still doesn't style it properly. Thanks in advance to you.
//VueJs Paginate code
<paginate
:page-count="20"
:click-handler="functionName"
:prev-text="'Prev'"
:next-text="'Next'"
:container-class="'mypagination'">
</paginate>
//My style code
<style scoped>
.mypagination{
list-style-type: none;
}
.mypagination li {
display: inline !important;
}
.mypagination > li > a,
.mypagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
</style>
You have to add the following properties for bootstrap 4:
<paginate
:page-count="20"
:click-handler="clickCallback"
:prev-text="'Prev'"
:next-text="'Next'"
:container-class="'pagination'"
:page-class="'page-item'"
:page-link-class="'page-link'"
:prev-class="'page-item'"
:next-class="'page-item'"
:prev-link-class="'page-link'"
:next-link-class="'page-link'"
:active-class="'active'">
</paginate>
Typically, to insert a Glyphicon inside a Bootstrap 3 app, it's as simple as:
<span class="glyphicon glyphicon-envelope"></span>
etc. In many apps, however, it is typical for Glyphicons to be "customized" so that they appear with numeric superscripts like so:
Above, this red/white "5" bubble might indicate that the user has 5 notifications. I'm wondering how this "numeric superscript" effect can be achieved in Bootstrap 3.
You mean something like this?
This is just some CSS basic styling, there is afaik no "standard" and certainly no special HTML tags nor "secret" bootstrap features that supports it. Below my suggestion - modify so it fit your expectations :
.rw-number-notification {
position: absolute;
top: -7px;
right: -6px;
padding: 3px 3px 2px 3px;
background-color: red;
color: white;
font-family: arial;
font-weight: bold;
font-size: 10px;
border-radius: 4px;
box-shadow: 1px 1px 1px silver;
}
markup :
<span class="glyphicon glyphicon-envelope">
<span class="rw-number-notification">7</span>
</span>
demo with some examples -> http://jsfiddle.net/rqfthhkx/
NB: Not completely related, but I do believe, though, that it is common practice to use the <i> tag when you are using glyphicons, fontawesome etc
<i class="glyphicon glyphicon-envelope"></i>
at least it renders as exactly the same -> http://jsfiddle.net/rqfthhkx/1/
Font Awesome
Example:
<i class="fa fa-envelope text-primary">
<span class="number-notification">7</span>
</i>
The .number-notification CSS is the same, except it seems impossible to adjust the position of the number container to fa-xx sizes and different font-sizes. The solution is to wrap the <i> element into <h> elements and specify the relative position in rem units :
.number-notification {
position: relative;
padding: 3px 3px 2px 3px;
background-color:red;
color:white;
font-family: arial;
font-weight:bold;
font-size: 10px;
border-radius: 4px;
box-shadow:1px 1px 1px silver;
}
.fa .number-notification {
top: -1rem;
right: 1rem;
}
h3 .fa .number-notification {
top: -1.2rem;
right: 1.2rem;
}
h2 .fa .number-notification {
top: -1.5rem;
right: 1.5rem;
}
h1 .fa .number-notification {
top: -2.2rem;
right: 1.8rem;
}
This should look more or less the same with different font sizes.
New fiddle -> http://jsfiddle.net/b86oj9gd/
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.
I have a dashboard in which I'd like a scrolling ticker. (We'll know if the UI sucks or not once it's been running on the wall for a while.) Because this is a specific purpose dashboard, we can assume a recent WebKit in our markup and use even the latest CSS3 markup if it's implemented.
This is some exemplary markup, but we're free to change it as needed, although I'd prefer to keep it relatively semantic if possible:
<div class="ticker">
<div class="itemDiv">
<img src="x">
<div class="itemBodyDiv">
<span>Upper Box</span>
<span>Lorem ipsum dolor sit amet</span>
<span>Lower Box has longer text</span>
</div>
</div>
</div>
This is the layout I'd like to achieve:
The outer solid black line is a div. The dashed line is a div that represents an individual item in the ticker. Items will scroll right-to-left using -webkit-marquee. The main body of the ticker item is the lorem ipsum text, which needs overflow-x set to cause the marquee behavior. The main body should be text-align: middle.
The problem I'm having is in finding suitable CSS markup to describe the position of the Upper Box and Lower Box. I've tried several permutations of display: inline and inline-block that didn't work. They either ruined the marquee behavior or moved the main body over. It seems that they need to be pulled out of the normal box model, but can't be absolute since they wouldn't have the marquee behavior. It seems like there should be some sort of relative positioning that is outside of the box model flow that doesn't preserve normal flow spacing that would handle cases like this, but I'm not finding it amid the many drafts of the many revisions of CSS and certainly not among the cargo cult of Google search results.
By request, this is my current non-working CSS at the state of my last experiment:
.itemDiv {
display: inline;
vertical-align: middle;
}
.itemDiv > img {
margin: 10px 10px 10px 30px;
vertical-align: middle;
height: 48px;
width: 48px;
/* border: 1px solid red; */
}
.itemBodyDiv {
display: inline;
vertical-align: middle;
}
.itemDiv span:nth-child(1) {
font-size: small;
clear:left;
vertical-align: top;
color: green;
}
.itemDiv span:nth-child(2) {
font-size: x-large;
vertical-align: middle;
color: white;
}
.itemDiv span:nth-child(3) {
font-size: smaller;
vertical-align: bottom;
color: gray;
}
Any suggestions?
You should wrap the entire scrolling message in a a div with its position set to relative. That way, you're free to absolutely position elements inside of the message absolutely while not breaking the marquee behavior:
.message
{
position: relative;
}
.upper-box
{
position: absolute;
top: 5px;
left: 10px;
}
.lower-box
{
position: absolute;
bottom: 5px;
left: 10px;
}