How to fix v-select drop down position? [on hold] - html

I am using a v-select as an option for a sign-up view. However, its drop down menu shows up in the bottom right corner, instead of directly below it.
I have tried using position: relative in the div to no avail. I have even added a class to the v-select with position: relative and I still get the same result.
HTML:
<template>
<div class="hello">
<img src="../assets/logo.png">
<h1>{{ msg }}</h1>
<v-container fluid grid-list-xl>
<v-layout wrap align-center>
<div class="inner">
<br>
<v-text-field label = "Email" v-model="email"></v-text-field>
<v-text-field label = "Password" v-model="password" type="password"></v-text-field>
<v-text-field label = "Name"></v-text-field>
<br>
<v-select class="drop-down-test" label="User type" :items="items" ></v-select>
<br>
<v-btn depressed dark class="orange font-weight-bold">Sign Up</v-btn>
<br>
</div>
</v-layout>
</v-container>
<br>
<a style="cursor: pointer; text-decoration: underline" v-on:click="navigate()">Return</a>
</div>
</template>
on export default I have these items under the data() return
items:['Administrator','Student','Teacher']
CSS (style scoped since I'm working on a .vue file)
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.inner {
position:relative;
display: table;
margin: 0 auto;
}
.drop-down-test{
position:relative;
}
</style>
It should show the items from the v-select right below it, but it is showing them in the bottom right corner.

I solved the issue by placing <v-app> in between the template of the App.vue layout.

Related

Bootstrap 4 align right in cell

I'm currently writing an interface for a ticket system that uses Bootstrap 4's grid system to position components about the system. As you can see from the screenshot below, the UI has two container-fluid divs stacked. The top div aligns perfectly, the second one I am struggling with.
I want it to render like this (without the pink - the pink is showing the two cols):
however it is rendering like this:
The code that renders this is as follows:
HTML:
<div class="container-fluid container-navbar">
<div class="row navbar">
<div class="col">
logo goes here
</div>
<div class="col text-center help-desk">
help desk.
</div>
<div class="col text-right">
<i aria-hidden="true" class="fa fa-bars" id="settings-menu" ></i>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row ticket-summary-navbar">
<div class="col text-right">
<div class="global-ticket-summary">
<ul>
<li >
<p class="ticketCount" >5</p>
<p class="nameLabel" >User1</p>
</li>
<li >
<p class="ticketCount" >3</p>
<p class="nameLabel" >User2</p>
</li>
<li >
<p class="ticketCount" >8</p>
<p class="nameLabel" >User3</p>
</li>
<li >
<p class="ticketCount" >6</p>
<p class="nameLabel" >User4</p>
</li>
<li >
<p class="ticketCount" >2</p>
<p class="nameLabel" >User5</p>
</li>
</ul>
</div>
</div>
<div class="col">
</div>
</div>
</div>
CSS:
body{
background-color: #ababab;
}
.navbar{
color: white;
background-color: rgba(58, 191, 195, 1);
height: 75px;
padding-left: 10px;
padding-right: 10px;
}
.container-navbar{
padding-left: 0px;
padding-right: 0px;
min-width: 490px;
}
.help-desk{
font-size: 30px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
#settings-menu{
font-size: 25px;
cursor: pointer;
}
.ticket-summary-navbar{
background-color: #f7f7f7;
height: 90px;
}
.global-ticket-summary {
font-family: 'Roboto', sans-serif;
color: #1b1b1b;
font-weight: 200;
}
.global-ticket-summary ul {
list-style-type: none;
}
.global-ticket-summary ul li {
text-align: center;
float: left;
width: 100px;
}
.global-ticket-summary ul li .ticketCount {
font-size: 22pt;
margin-bottom: -4px;
cursor: pointer !important;
}
.global-ticket-summary ul li .nameLabel {
font-size: 11pt;
/*margin-bottom: 0;*/
color: #656565;
cursor: pointer !important;
}
As you can see it renders the <ul> in the middle, even though I have the text-right directive.
I can certainly get it working by adding "float:right;" to the UL - which positions correctly horizontally, however it then no longer aligns vertically correctly (it snaps to the top of the div). I have searched in many places for a solution, however all point to using the navbar for Bootstrap, which isn't relevant in this case.
Is there a way I can have the UL align right to its parent div without resorting to padding/margin CSS hacks?
Plunkr link also: https://next.plnkr.co/plunk/y4EYmtpgwRvHkjuI
Put the text align on the global-ticket-summary div, and if that doesn't work put it in the UL. Text align only works for the direct child elements I believe
You can use flexbox to align content. Just put this .flex-container class into your code to right align child elements.
.flex-container {
display: flex;
justify-content: flex-end;
align-items: center;
}
If you are new to css i will recommend you to take a look into flexbox.
You want to put ul in right side of col. Correct me! if i misunderstood your question.
So, you need to do the following in your style.css file,
just replace with following css code.
.global-ticket-summary ul {
list-style-type: none;
text-align: right!important;
}
.global-ticket-summary ul li {
float: left;
width: 100px;
}
Use flex utilities for bootstrap 4. Add following classes to the first column (which is having text-right): d-flex, justify-content-end.
...
<div class="container-fluid">
<div class="row ticket-summary-navbar">
<div class="col d-flex justify-content-end">
...
It is aligning as you want to the right.
For reference here is link to flex utility for bootstrap 4 : https://getbootstrap.com/docs/4.0/utilities/flex/

Amending wordpress theme using CSS

I am currently using a wordpress theme and am trying to amend some of the fields within using CSS. The CSS code I have written works fine when I try it out on JSfiddle.
What I am trying to achieve is:
(1) Change "Address" to "Important Information"
(2) Change "Our Address" to "Company address"
(3) Hide the Telephone row
(4) Hide the Email row
However, when I paste it into the CSS section of wordpress, somehow only the change related to the hiding of rows is implemented ie. 3 and 4
Is there a reason for this? I am applying the technique I found out in this thread (link)
Thank you.
JSFiddle demo
HTML code
<div class="address-container">
<h2>Address</h2>
<div class="content">
<div class="address-row row-postal-address" itemscope="" itemtype="http://schema.org/PostalAddress">
<div class="address-name"><h5>Our Address:</h5></div>
<div class="address-data" itemprop="streetAddress"><p>52 Chesterfield Lane</p></div>
</div>
<div class="address-row row-telephone">
<div class="address-name"><h5>Telephone:</h5></div>
<div class="address-data">
<p>-</p>
</div>
</div>
<div class="address-row row-email hide-email">
<div class="address-name"><h5>Email:</h5></div>
<div class="address-data"><p>-</p></div>
</div>
<div class="address-row row-web">
<div class="address-name"><h5>Web:</h5></div>
<div class="address-data"><p>Click here</p></div>
</div>
</div>
</div>
CSS code
.address-container h2 {
font-size: 0;
}
.address-container h2:after {
content: "Important information";
font-size: 15px;
}
.address-container .content .address-row.row-postal-address .address-name h5 {
font-size: 0;
}
.address-container .content .address-row.row-postal-address .address-name h5:after {
content: "Company address";
font-size: 15px;
}
.address-row.row-telephone .address-name {
Display: none;
}
.address-row.row-telephone .address-data {
Display: none;
}
.address-row.row-email.hide-email .address-name {
Display: none;
}
.address-row.row-email.hide-email .address-data {
Display: none;
}

<a> link in a div hide/show with CSS not working

In this site I found and modified a CSS/HTML example. All seems go well but <a> link inside the div not working: its show without problems but when I click on them the only thing that happen is to hide the div and no more.
Here is the code:
.clicker {
outline: none;
text-align: center;
font-size: 1em;
font-style: italic;
color: blue;
text-decoration: underline;
cursor: pointer;
margin-top: -2em;
margin-bottom: 3em;
}
.hiddendiv {
display: none;
}
.clicker:focus + .hiddendiv {
display: block;
}
body#l-autore div.main div.hiddendiv ul.opere {
font-size: 0.75em;
list-style-type: none;
font-style: italic;
text-align: center;
}
body#l-autore div.main div.hiddendiv ul.opere li {
display: inline;
}
<body id="l-autore" xml:lang="it-IT">
<div class="header">
<h1>Brevi profili biografici degli autori</h1>
</div>
<div class="main">
<h1 id="sigil_toc_id_1">EXAMPLE</h1>
<div class="clicker" tabindex="1">
<h2 id="sigil_toc_id_2">
<p class="autori" id="id_romano">Romano</p>
</h2>
</div>
<div class="hiddendiv">
<ul class="opere">
<li>
<a href="Cap02sez1.html">
<span class="nr">I</span>
</a>
</li>
<li>
<a href="Cap02sez2.html">
<span class="nr">II</span>
</a>
</li>
</ul>
</div>
</div>
</body>
Of course the two files Cap02sez1.html and Cap02sez1.html exist: before to put the link inside the DIV a normal link open the right file.
When you load the page, you're setting display: none on the div containing the links. Upon clicking on Romano, you're making them temporarily visible with .clicker:focus + .hiddendiv. However, that only applies when .clicker is in 'focus'. As soon as you click on one of the links, .clicker loses focus.
Unfortunately, I don't think this is possible to solve with raw CSS, as there is neither a previous selector nor parent selector in CSS. Therefor it is likely impossible to target the display of .hiddendiv from the child a link with raw CSS.
I would look into using JavaScript (preferably jQuery) to solve this with only a few small changes:
HTML:
<p class="autori" onclick="show()"/>
CSS:
.visible {
display: block;
}
(Also remove the .clicker:focus + .hiddendiv selector)
JavaScript / jQuery:
function show() {
$(".hiddendiv").toggleClass("visible");
}
Whenever you click on 'Romano', .hiddendiv will toggle between visible and invisible. I believe this is what you're after. If you just want to show it, and never hide it, you can use $(".hiddendiv").addClass("visible"); instead.
Hopefully you're able to use JavaScript; otherwise I don't think this can be solved sorry!
Updated Answer Without JavaScript
It's actually possible to solve your problem with raw CSS! You can simulate a button click in raw CSS, with some changes to the structure of your HTML. The only way to do this is by utilising a hacky version of checkbox. First, we put your .clicker inside the label for a checkbox:
<input type="checkbox" id="show" />
<label for="show">
<div class="clicker" tabindex="1">
<h2 id="sigil_toc_id_2">
<p class="autori" id="id_romano">Romano</p>
</h2>
</div>
</label>
Notice that the clicker div is now a label for the new input #show. Now we modify the CSS to reflect this, with a new target, while hiding the real checkbox:
#show {
display: none;
}
We can then toggle the visibilty based on the :checked status of the invisible checkbox:
#show:checked ~ .hiddendiv {
display: block;
}
#show:not(:checked) ~ .hiddendiv {
display: none;
}
Naturally, you'll also need to remove both of the following:
.hiddendiv {
display: none;
}
.clicker:focus + .hiddendiv {
display: block;
}
Working sample here (with tidied code).
And thus, you have a visibility toggle for a separate div, with raw HTML and CSS :)
Updated Answer With No JavaScript And Multiple Hidden Content Divs
It's quite possible to get this to work the same way with multiple different sections that are hidden. To do this, you simply create a range of hidden checkboxes that each start with the same name. Instead of using just #show, you would use #show_1, #show2, #show_3, etc. You can then target them with the CSS regular expression [id^=show].
HTML:
<input type="checkbox" id="show_1" />
<label for="show_1"></label>
</input>
<input type="checkbox" id="show_2" />
<label for="show_2"></label>
</input>
CSS:
[id^=show] {
display: none;
}
[id^=show]:checked ~ .hiddendiv {
display: block;
}
[id^=show]:not(:checked) ~ .hiddendiv {
display: none;
}
Here's a new fiddle showing it working with multiple toggles controlling individual hidden divs :)
Because of the CSS style, the href link is disconnected before execution.
When you click the "I" or "II", code is loose every code in '.hiddendiv'.
So if you want to show and display the ".hiddendiv" with click event,
I suggest that use the javascript with onclick event
[What I do]
Remove the css ".clicker:focus + .hiddendiv {display: block;}"
Add the javascript to hide and show in click event.
Change the 'a' to 'div' for using "onclick"
When click the "I" or "II", execute the movePage function before hide the '.hiddendiv'
function viewList(){
document.getElementsByClassName('hiddendiv')[0].style.display = 'block'
}
function movePage(path) {
window.location.href = path;
document.getElementsByClassName('hiddendiv')[0].style.display = ''
}
.clicker {
outline: none;
text-align: center;
font-size: 1em;
font-style: italic;
color: blue;
text-decoration: underline;
cursor: pointer;
margin-top: -2em;
margin-bottom: 3em;
}
.hiddendiv {
display: none;
}
.clicker:focus + .hiddendiv {
/* display: block;*/
}
body#l-autore div.main div.hiddendiv ul.opere {
font-size: 0.75em;
list-style-type: none;
font-style: italic;
text-align: center;
}
body#l-autore div.main div.hiddendiv ul.opere li {
display: inline;
}
<body id="l-autore" xml:lang="it-IT">
<div class="header">
<h1>Brevi profili biografici degli autori</h1>
</div>
<div class="main">
<h1 id="sigil_toc_id_1">EXAMPLE</h1>
<div class="clicker" tabindex="1">
<h2 id="sigil_toc_id_2">
<p class="autori" id="id_romano" onclick=viewList()>Romano</p>
</h2>
</div>
<div class="hiddendiv">
<ul class="opere">
<li>
<div onclick=movePage('Cap02sez1.html')>
<span class="nr">I</span>
</div>
</li>
<li>
<div onclick=movePage('Cap02sez2.html')>
<span class="nr">II</span>
</div>
</li>
</ul>
</div>
</div>
</body>

How can I center text / links in CSS on my webpage? (having problems with text-align)

I can't seem to get links to center on my webpage. The code below should theoretically make the links appear in the center but it doesn't:
#navigate2 {
padding: 10px 20px;
background-color: #555555;
color: white;
text-decoration: none;
border-radius: 4px 4px 0 0;
text-align: center;
/*I have included text align but it doesn't seem to be working*/
}
#navigate2:hover {
background-color: #777777;
text-decoration: underline;
}
<div class="photo" >
<h3>Photo & Video</h3>
<!-- photo goes here -->
<br> <!-- I want the links labelled navigate 2 to be centered-->
<a id="navigate2" href="#">Browse my albums!</a>
<br> <br> <hr>
</div>
<div class="blog">
<h3>Blog</h3>
<br> <!-- read above -->
<a id="navigate2" href="#">Read my blog!</a>
<br> <br> <hr>
</div>
You need to have text-align:center property set to the parent of the anchor tags. Not to the anchor tags
#navigate2 {
padding: 10px 20px;
background-color: #555555;
color: white;
text-decoration: none;
border-radius: 4px 4px 0 0;
text-align: center;
/*I have included text align but it doesn't seem to be working*/
}
#navigate2:hover {
background-color: #777777;
text-decoration: underline;
}
.navigate-wrapper {
text-align: center;
}
<div class="photo">
<h3>Photo & Video</h3>
<!-- photo goes here -->
<br>
<!-- I want the links labelled navigate 2 to be centered-->
<div class='navigate-wrapper'>
<a id="navigate2" href="#">Browse my albums!</a>
</div>
<br>
<br>
<hr>
</div>
<div class="blog">
<h3>Blog</h3>
<br>
<!-- read above -->
<div class='navigate-wrapper'>
<a id="navigate2" href="#">Read my blog!</a>
</div>
<br>
<br>
<hr>
</div>
a tags are inline, so centering text in them has no effect. You could try to add display: block, or instead display: inline-block; and margin: 0 auto for centering the inline-block.
Firstly, id's should be unique, give your links a class instead. Secondly, a elements are inline, meaning you cannot apply a block level style to it. Instead, specify in your CSS to display it as a block: display:block;.

css content property using :after

I have a problem, I have this input text fields in a html form, this are wrapped for this div css properties:
.formRight240 { float: left; width: 240px; margin: 5px 12px 5px 0px; }
when I try to this
.field_required{ display: inline; color: red; }
.field_required:after{ content: "*" }
the input text field stay the same and the asterisk jump to the next line, I know the reason, everything is aligned in order to the other elements around, but is there anything I can do to display the asterisk inline with the input text field by doing changes to the field_required class? if not, what I have to change to the .formRight240.
HTML
<div class="rowElem noborder">
<label>Customer ID:</label>
<div class="formRight240">
<span class="field_required"><input type="text" name="p_cust_id_c" id="req" class="validate[required,maxSize[30]]"/></span>
</div>
<div class="fix"></div>
</div>
Check this answer, you can't add :before or :after to an input.
A solution could be to wrap your input in a span:
HTML
<span class="field_required"><input type="text" /><span>
CSS
.field_required input {
display: inline;
color: red;
}
.field_required:after{
content: "*";
}
DEMO

Resources