I work on Nuxt.js (Vue.js) application that uses BootstrapVue (Bootstrap based) package.
The current situation is as following:
The code looks as following:
<template lang="pug">
b-container
b-row
b-col(:cols="8")
b-container
b-row
b-list-group
b-list-group-item.flex-column.align-items-start(
v-for="(item, index) in 7" :key="index"
href='#'
)
b-container
b-row
b-col(:cols="1").d-flex.align-items-center.justify-content-center
b-form-checkbox {{ index + 1 }}
b-col(:cols="11")
basket-item(:itemNumber="index + 1" :checkStatus="accepted")
b-row.style-row-middle
b-button.close(type='button' aria-label='Close' #click="onClose()")
span(aria-hidden='true') ×
u Удалить выбранное
b-button(type='button' #click="onContinue()").btn.btn-lg.buy__button Продолжить покупки
b-row
div
hr
| * доставка будет осуществлена из Санкт-Петербурга;
br
| * наш менеджер свяжется с вами сразу после обработки заказа;
b-col(:cols="4" class="col2")
form(ref='form' #submit.stop.prevent='handleSubmit').set-padding
div
strong
label ЗАКАЗ
div
strong
label Всего товаров: 1
div
strong
label На суму: 100 000 р
b-form-group(label='')
b-form-group(label='Телефон' label-for='type-tel' invalid-feedback='Phone is required')
b-form-input(id="type-tel" type="tel" v-model='phone' required)
b-form-group(label='E-mail' label-for='type-email' invalid-feedback='E-mail is required')
b-form-input(id="type-email" type="email" v-model='email' required)
b-form-group(label='Ваше имя' label-for='name-input' invalid-feedback='Name is required' :state='nameState')
b-form-input(:id="name-input" v-model='name' :state='nameState')
div.d-flex.align-items-center.justify-content-center
b-button(type='submit' variant='primary' size="lg") Оформить заказ
</template>
<style lang="sass">
.list-group
margin-bottom: 10px
max-height: 400px
-webkit-overflow-scrolling: touch
overflow-y: auto
.list-group-item
border-style: none
.set-padding
padding-bottom: 7px
padding-top: 7px
.style-row
border: solid 1px black
display: flex
justify-content: space-between
.style-row-middle
display: flex
justify-content: space-between
padding: 4px
.col1
border: 1px solid red
.col2
border: 10px solid rgb(0, 70, 140)
.buy__button
background-color: #eee
background-image: -webkit-linear-gradient(bottom, #ccc 0%, #eee 100%)
border: 1px solid #cccccc
color: black
font-size: 16px
text-shadow: 0.5px 0.866px 0 white
.set-border
border: 1px solid gray
border-radius: 3px
margin-bottom: 2px
margin-top: 2px
</style>
I need to stretch product's rows to maximum, but I'm not sure how to do it.
The screenshot shows padding in .list-group-item that could be reduced to 2px:
.list-group-item
padding: 2px
Also, .list-group should take the full width available in the row:
.list-group
width: 100%
demo
Related
I found this site for Bootstrap pretty scrollbars. I tried to apply it to my div but nothing happened :
<style>
#collapseVehicules {
height:250px !important;
}
</style>
<div class="collapse scrollbar-primary" id="collapseVehicules" style="padding-left: 15px;padding-right: 15px;overflow-y: scroll;">
<table id="list" class="table table-borderless table-striped table-sm" style="margin-bottom: 0px;width:100%;">
...
</table>
</div>
So what is wrong ?
You need to add the styles in your css. scrollbar-primary isn't a bootstrap css class style.
As shown on the page, they created the scrollbar-primary css class style.
.scrollbar {
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #fff;
overflow-y: scroll;
margin-bottom: 25px;
}
.scrollbar-primary::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.scrollbar-primary::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #4285F4;
}
I want to have an image next to my header. But the thing is that I want this image fixed with position:relative.
Yet, when I fixed the image, it is making a big space between the image and my title.
<h1 id="htitre"><img src="title.png"/> title </h1>
CSS:
h1
{
color: rgb(114, 159, 207);
padding-bottom: 3px;
border-bottom: 5px solid rgb(114, 159, 207);
padding-left:0.3cm;
margin-left: 0.9cm;
}
#htitle img
{
position: relative;
top: 0.15cm;
right:1.5cm;
border: 1px
}
How could I prevent the image from moving my title ?
Do you want something like this? https://jsfiddle.net/o2mxesua/1/
If that's what you want, all you need to do is to replace your h1 by span because h1 takes the entire row width and then assign the font size and weight properties to your span class in whatever way you want.
Here is your updated code -
HTML
<div>
<img src="title.png"/>
<span id="htitle">
title
</span>
</div>
CSS
#htitle
{
color: rgb(114, 159, 207);
padding-bottom: 3px;
border-bottom: 5px solid rgb(114, 159, 207);
padding-left:0.3cm;
margin-left: 0.9cm;
font-size: 4em;
}
#htitle img
{
position: relative;
top: 0.15cm;
right:1.5cm;
border: 1px;
}
Here is my code:
HTML:
<div class="main">
<img class="in" alt="" src="https://lh6.googleusercontent.com/---lrEvAvGGs/U2i572OasiI/AAAAAAAACVw/zKSuueH1n5Q/s720/1024x1024.jpg">
</div>
CSS:
.main{
height:240px;
width: 240px;
background: #F00;
border: 1px solid #CCC;
border-radius: 30px;
position: relative;
overflow: hidden;
}
.in {
width: 240px;
height: 240px;
}
Live example: Jsfiddle
As you see in the example, there is a little background color (red) around at the corners of the image.
How to remove these but keeping border-radius attribute?
Just remove the styles
background: #F00;
border: 1px solid #CCC;
from the class main.
http://jsfiddle.net/3Nzp3/3/
see this fiddle
Remove both line
background: #F00;
border: 0px solid #CCC;
just remove background: #F00; and border: 1px solid #CCC; from your class main. You will get your output
like
.main{
height:240px;
width: 240px;
border: 0px;
border-radius: 30px;
position: relative;
overflow: hidden;
//you can use border: 0px;
}
just remove the code below from the main class
background: #F00;
border: 1px solid #CCC;
i think this will help you .
Safari and Mobile Safari seem to have a problem when you combine border radius, padding and borders. Works fine in Chrome and Firefox.
<-- Expected
<-- Safari Rendering
HTML:
<img src="http://lorempixel.com/200/200/animals/3/" />
CSS:
img {
width: 200px;
height: 200px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
padding: 3px;
border: 1px solid #999;
margin: 10px
}
Example: http://jsfiddle.net/ucNwx/2/
Is it my fault or Safaris? How would I fix it?
My bet it's Safari bug: border-radius is applied late and produces clipping effect. Fortunately, box-shadow is rendered correctly, so let's use it:
border-radius: 50%;
box-shadow:
0 0 0 3px white,
0 0 0 4px #999;
Works on Safari 6 on iPad and OS X.
Best solution I can think of right now: http://jsfiddle.net/ucNwx/5/
Uses a wrapper div to draw the border and then places the image inside of it. Still got some artifacts on the right edge but I guess that's a Safari bug.
HTML
<div class="border-container">
<img src="http://lorempixel.com/200/200/animals/3/" />
</div>
CSS
.border-container {
width: 206px;
height: 206px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 1px solid #999;
margin: 10px
}
img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 200px;
height: 200px;
margin: 3px;
}
I have applied rounded corners styles to my ASP.Net button & text box controls and also to fieldset and legend.
Here is my CSS-
fieldset
{
width:605px;
margin-bottom:20px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
fieldset legend
{
background: #606060 url(images/bluelines.gif) repeat-x center left;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
margin: 7px;
padding: 10px 10px 0px 5px;
}
fieldset legend:hover{
background: #606060 url(images/blue-lines.gif) repeat-x center left;
}
fieldset legend img
{
padding: 0px 6px 0px 0px;
position: relative;
bottom: 5px;
}
.txtBox
{
border: 1px solid #DDDDDD;
height:15px;
width: 200px;
padding: 5px;
background: #ffffff;
-moz-border-radius: 5px;
border-radius:5px;
-webkit-border-radius: 5px;
}
.txtBox:focus{
border: 2px solid #50cff1;
box-shadow: 5px 1px 1px 5px #000;
}
.buton{
background: #50cff1 url(images/nav-act.gif) repeat-x center left;
border: none;
color: #ffffff;
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.buton:hover
{color: #000000;}
Here is skin code-
<asp:TextBox runat="server" CssClass="txtBox" SkinID="textBox" />
<asp:Button runat="server" CssClass="buton" SkinID="button" />
But these styles aren't working in Internet Explorer(8,7,6). Please let me know any solution so that all of these styles will apply on these elements(asp.net button & textbox, fieldset & legend) in IE too!
Regards,
nzahra
IE8 and below don't support CSS3, only IE9 does. To mimic CSS3, you'll need to use filters, .htc files (behaviors), images, or some combination thereof for any CSS3.
You can use conditional comments to hide the IE stuff from other browsers. Here's some info on filters, and one way of rounding corners in IE..