I'm redesigning a frontend for a uni project written with ExtJS 6.
right now I'm wondering how to properly add an image to a container that fits the size:
I tried a displayfield using value: "img=.../>" but I can't seem to make the image fit properly - it's just way to big. The same goes for "html: img=.../>".
also adressing id: 'TopMenu' with #TopMenu{} in css seems to have no effect whatsoever regardless of the options I try to change :(
I suspect ExtJS defaults have higher priority than my own settings or I'm simply not adressing the container right.
Ext.define('textImager.view.menu.TopMenu', {
extend: 'Ext.panel.Panel',
// id für css: #TopMenu
id: 'TopMenu',
xtype: 'TopMenu',
layout: 'hbox',
items: [
// goethe logo
{
flex: 1,
id: 'GoetheLogo'
},
// Website titel
{
flex: 8,
id: 'Titel',
html: 'TextImager'
},
// dropdown menu
{
flex: 1,
id: 'DropdownMenu',
xtype: 'button',
html: 'menu',
menu: [
{xtype: 'button',
html: 'test1'}]
},
]
});
the current css:
#TopMenu-body{}
#GoetheLogo-body{
background-image:url(../resources/images/menu/TT_logo_transparent.png);
background-position: right center;
background-size: contain;
background-repeat: no-repeat;
background: rgba(123,123, 123, 0.8);
}
#Titel{}
#DropdownMenu{}
simply resizing would be a bad workaround and I also have to adjust the background which currently is not working either.
I would greatly appreciate some insight on how to properly adress the containers with css.
I've found a solution - it might not be the best, but I'm quite happy with the result:
// TT logo mit Link zur Website
{
flex: 1,
xtype: 'button',
height: '100%',
//TODO: add link
html: '<div class="TT_logo"><img src="./resources/images/menu/TT_logo_transparent.png"></div>'
},
css:
.TT_logo{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
.TT_logo img{
max-width: 100%;
max-height: 100%;
}
Related
I have struggled the whole day to create a centered carousel with react-alice-carousel library and the results are those. Link to the library here
Basically I achieve the results showcased on the gif which were fulfilling enough for me but the fact that the focused image (the one on the left) is not centered is bugging me a lot. I have tried overwriting certain CSS properties but the results were not great (carousel item disappears if I try absolute positioning). My question is - is there a certain algorithm I can add to my logic so that the centered image would be in the middle of the carousel always? (2nd item in array of 3, 3rd item in array of 5, 4th item in an array of 7 and etc.) and if such algorithm does not exist how can I achieve to make my carousel centered-oriented.
Sandbox: https://codesandbox.io/s/happy-lichterman-knwbce?file=/src/App.js
Targeted tile (plays the role of the product in my gif) is marketed in red color
Also mostly my carousel in the project:
// Carousel helper properties / functions
const responsive = {
2000: {
items: 11,
},
1200: {
items: 5,
},
800: {
items: 3,
},
0: {
items: 1,
},
};
const handleDragStart = (e: any) => e.preventDefault();
const items = products.map((product, index) => (
<img
key={product._id}
className={selectedIndex === index ? "focusedImage" : "shownImage"}
onDragStart={handleDragStart}
style={{ height: "150px", width: "150px" }}
src={product.image}
alt='Product that is being sold on this page'
/>
));
return (
<main>
<div className='details__wrapper'>
<AliceCarousel
activeIndex={selectedIndex}
mouseTracking
responsive={responsive}
items={items}
infinite
controlsStrategy={"default"}
autoPlayStrategy='all'
autoPlayInterval={1000}
disableDotsControls
disableButtonsControls
keyboardNavigation
onSlideChanged={(e: EventObject) => {
setSelectedIndex(e.item);
setSelectedProduct(products[e.item]);
}}
/>
As seen all of the images that are seen by the user already have classes "shown" or "focused" image
And my SASS:
.alice-carousel {
&__wrapper {
& .alice-carousel__stage {
&-item {
z-index: 0 !important;
& .shownImage {
opacity: 0.5;
margin: 0 auto;
grid-area: image;
display: block;
border: 2px solid;
border-radius: 50%;
height: 20rem !important;
width: 20rem !important;
}
&.__target {
z-index: 1 !important;
.focusedImage {
opacity: 1 !important;
}
}
}
}
}
}
Mostly classes already listed in the documentation on GitHub.
I would like to put favorite star icon at the upper right corner of the parent container. I created css with absolute position, but it doesn't work.
I created span field and used font-awesome (in this case fa fa-star, although it is not so important, because the same result is obtained for simple text).
Can anyone tell me how to place this star at the upper right corner of the parent container?
app.js
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
width: 300,
style:'border:1px black solid',
layout: {
type: 'vbox',
align: 'middle'
},
defaults: {
margin: 5
},
items: [{
xtype: 'image',
height: 128,
width: 128,
src: 'https://www.disneyclips.com/images/images/roojumping2.gif'
}, {
xtype: 'component',
html: 'Hello'
},
{
html: '<span class="fa fa-star topright"></span>',
},
]
});
}
})
app.css
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 28px;
}
index.html
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
This is a simple way to do it, just put that listener on the child component:
listeners:{
afterRender: function (a){
var floatBox = document.createElement('div');
//classic doesn't have fontAwesome, use a image instead
floatBox.innerHTML = '<img class="fa fa-star topright" src="https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/16x16/star.png" ></img>';
a.ownerCt.el.dom.appendChild(floatBox) ;
}
}
That way, when the child component is rendered it put a float box on the parent component, you could put that listener on the main panel instead and just test for conditions to show, just remove the ownerCt part.
Classic 7.3.1 Material
I am not sure how to get the font awesome icons in the non-material themes.
Here is a fiddle using the classic toolkit.
You can drag the main container and the icon moves with the container.
You can style the button however you want and it has a tool-tip.
If you plan on allowing resize of the container then you will have to implement the resize event handler and call setPosition on the button.
Classic Toolkit fiddle
This puts a button in the top left corner of the browser.
let body = Ext.getBody();
let button = Ext.widget('button', {
text: 'Favorite',
iconCls: 'x-fa fa-star',
ui: 'round',
floating: true,
renderTo: body,
style: 'position: absolute; top: 20px; right: 20px;'
});
Fiddle floating button
In Vuetify (Vue components super set) I want to add an image pattern in background.
I tried
body {
background: url("/images/background.png") no-repeat center center fixed;
background-size: cover;
}
But this doesn´t work, Some vuetify component cancels this style. I want an elegant way of doing this rather than inserting styles directly in the components or html.
Anybody faced this error? How do I fix it?
It's happen because the v-app replace the background style.
Try something like that:
div[data-app='true'] {
background: url('/images/background.png') no-repeat center center fixed !important;
background-size: cover;
}
The selector selected the element root of Vuetify (the v-app) and force to change the background style.
Or, you can use the name of your root element to change the background style. For example:
#app {
background: url('/images/background.png') no-repeat center center fixed !important;
background-size: cover;
}
PS: See the minimal example with this patch:
<template>
<div>
<v-app>
<v-content class="pa-4">
<v-data-table :headers="headers" :items="items" />
</v-content>
</v-app>
</div>
</template>
<script>
export default {
name: 'app',
data: () => ({
items: [
{ id: 1, name: 'Option 1' },
{ id: 2, name: 'Option 2' },
{ id: 3, name: 'Option 3' },
],
headers: [
{ text: 'Id', value: 'id' },
{ text: 'Name', value: 'name' },
],
}),
};
</script>
<style>
#app {
background: url('https://ohlaladani.com.br/wp-content/uploads/wallpaper-OHLALADANI_DESKTOP_WALLPAPERS_AVENTURA-2.jpg')
no-repeat center center fixed !important;
background-size: cover;
}
</style>
Put a class on your v-container
<template>
<v-container class="hero">
</v-container>
</template>
<style scoped>
.hero {
background: url('../assets/yourImage.jpg');
background-size: cover;
height: 100vh;
}
</style>
I am using Sencha Touch 2.2.1 . I want to display list items with icons, for that I am using itemTpl config property of the list. The image is rendered as icon but the list item is not getting aligned properly- it appears starting from much below. I want the text to get started from the top- it must be aligned horizontally with the image. I also tried changing 'margin' property but it didn't seem to work.
Please find my code below:
Ext.define('BBraunSencha.view.ListPanel',{
extend: 'Ext.Panel',
xtype: 'listpanel',
config:{
layout:{
type: 'vbox',
align: 'stretch'
},
items:[
{
xtype: 'label',
html: '<div style="margin-left: 20px;">List one</div>'
},{
xtype: 'list',
flex: 1,
ui:'round',
scrollable: true,
data:[
{ name: 'item1', price:'2000',in_stock : 'no'},
{ name: 'item2', price: '3000',in_stock :'yes'}
],
itemTpl: '<img src="images/Tulips.jpg" style="height: 50px;width: 50px;display:inline-block;margin-right:50px;"/>{name}'
}
]
} });
What can be the other way to achieve it?
Add a class to your css, then use that class for your itemTpl:
CSS file:
.tulip-icon {
background-image: url(images/Tulips.jpg);
background-size: 50px 50px;
background-repeat: no-repeat;
padding-left: 50px;
}
JS Code:
itemTpl: '<div class="tulip-icon">{name}</div>'
Add css:
.list-image{
height:20px;
width:20px;
float: left;
}
in js file:
itemTpl:'<div><img src="images/Tulips.jpg" class="list-image">{name}</div>'
I am new to sencha touch.
How do we change the background color of a button to white? I have a button with two images in each corner. I want the button to be plain white.
I tried using css like this:
.quest {
background: url(../images/quest.jpg) no-repeat left,
url(../images/rightarrow.jpg) no-repeat right;
background-color: white;
border: none;
border-color:white;
padding-left: 50px;
text-align: left;
}
My button is here:
{
xtype: 'button',
text: '<div class="quest">Info</div>',
labelWidth: '100%',
name: '',
handler: function() {
}
}
My button has grey borders (Grey default button color in sencha) with white color in mid. How do i make it completely white? Please help.
I have even tried:
style: "background-color: white"
Using 'cls' attribute solved my problem.
{
xtype: 'button',
cls: 'btn',
text: '<div class="person">People</div>',
labelWidth: '100%',
},
In my app.css define
.btn
{
background-color: white !important;
background-image: none;
}
We have to redefine both background-color and background-image properties so that the default sencha-touch.css properties are overridden. Thank you Thiem Nguyen for your help.
This should render your desired button :)
config: {
ui: 'plain',
text: 'Your Text',
style: 'background-color:white;'
}
Just like Thiem Nguyen said, this will work
{
xtype:'button',
text:'text',
ui:'plain',
style:'background-color:white'
}