I have a problem, I can't change the width of my popover, I need the width of the popover to fit its content
Problem
My view:
<button uib-popover-template="'excelTools.html'" popover-placement="bottom"
popover-title="" type="button"
class="btn btn-default pull-right">Importar</button>
<script type="text/ng-template" id="excelTools.html">
<div class="container-fluid">
<div class="text-element content-element circles-list">
<ol>
<li>Create a new Canva account to get started with your own Organizational Chart design.</li>
<li><span style="font-weight: 400">Choose a template and click on the text boxes to start customizing your chart. </span></li>
<li><span style="font-weight: 400">Customize details like colors and fonts.</span></li>
<li>Choose from our stunning range of graph elements, like frames, s, like frames, s, like frames, s, like frames, s, like frames, s, like frames, shapes and lines.</li>
<li>Save and share.</li>
</ol>
</div>
</div>
</script>
My .css:
.content-element{
margin:50px 0 0 50px;
}
.circles-list ol {
list-style-type: none;
margin-left: 1.25em;
padding-left: 2.5em;
counter-reset: li-counter;
border-left: 1px solid #00c4cc;
position: relative;
}
.circles-list ol > li {
position: relative;
margin-bottom: 3.125em;
clear: both;
}
.circles-list ol > li:before {
position: absolute;
top: -0.5em;
font-family: "Open Sans", sans-serif;
font-weight: 600;
font-size: 1em;
left: -3.75em;
width: 2.25em;
height: 2.25em;
line-height: 2.25em;
text-align: center;
z-index: 9;
color: #00c4cc;
border: 2px solid #00c4cc;
border-radius: 50%;
content: counter(li-counter);
background-color: #ebeced;
counter-increment: li-counter;
}
I already tried the solutionshere UI Bootstrap Popover: change width but none works for me, I don't know if I'm doing well
I took my popover code on this page http://angular-ui.github.io/bootstrap/
it worked add !important in my CSS
.popover {
width: 500px !important;
max-width:500px !important;
}
Related
This may seem like a simple question and may have a simple solution but I was wondering how I can get two text elements (from a button) start at the space spot on the x-axis (they are two different divs). I am referring to the button's text in the image below.
How can I get both the text "Dashboard" and "A new button" to start at the same position on the x axis?
* {
margin: 0;
padding: 0;
}
body {
background-color: #ced4da;
font-family: sans-serif;
}
.wrapper {
height: 100vh;
}
input[type="button"] {
border: none;
background-color: Transparent;
outline: none;
height: 20px;
width: 92%;
font-size: 13px;
font-weight: regular;
color: white;
}
.side-bar {
display: flex;
flex-direction: column;
width: 17%;
height: 100%;
background-color: #272C32;
}
.sub-title {
margin-top: 10%;
margin-left: 7.5%;
}
.sub-title h3 {
color: #B9B9B9;
font-size: 13px;
font-weight: lighter;
}
.splitter {
display: flex;
align-self: center;
width: 85%;
height: 0.5px;
background-color: grey;
margin-top: 12px;
margin-bottom: 4%;
}
.button {
position: relative;
margin-left: 7.5%;
margin-bottom: 3%;
}
.button form i {
color: white;
font-size: 14px;
transition: 0.3s;
position: absolute;
left: 0px;
top: 0px;
padding: 5px 0px;
}
.button input:hover+i {
color: dodgerblue;
}
<div class="wrapper">
<div class="side-bar">
<div class="sub-title">
<h3>ADMIN TOOLS<h3>
</div>
<div class="splitter"></div>
<div class="button">
<form>
<input type="button" value="Dashboard" onclick="window.location.href='http://www.google.com'"/>
<i class="fas fa-tachometer-alt fa-lg" aria-hidden="true"></i>
</form>
</div>
<div class="button">
<form>
<input type="button" value="A new button" onclick="window.location.href='http://www.google.com'"/>
<i class="fas fa-hand-paper fa-lg" aria-hidden="true"></i>
</form>
</div>
</div>
<div class="nav-bar"></div>
</div>
And if you have time, how does my CSS code look? I am still learning and would like some feedback too if you don't mind :) Thanks!
All you have to do is put a <div> element around your <form> element s, then set its position to wherever you want it, and its text-align: left;. BTW your CSS looks excellent, just keep in mind that some things can be simplified, e.g.
{margin: 0; padding: 0;}
This is very good, but * is the same as body, even though it's documented differently. * applies to all the content, but content is only displayed if it's in the <body> element.
Very good looking however, keep it up!
P.S. I'd vote you up if I could, but I'm out of votes - I'll do it tomorrow
I have some unusual behaviour on my portfolio website in firefox. I am using twitter bootstrap.The text on buttons is going beyond the button width, also nothing happens on clicking the buttons. It works fine on chrome and safari.
Link: www.nakibmomin.com
html
<div class="parallax-overlay"></div>
<div class="jumbotron" id="home">
<div class="container">
<img class="img-circle" src="img/profile.jpg" style="width: 100px;height:100px;">
<h1>Nakib Momin</h1>
<p>Student Blogger And Software Developer</p>
<button type="button" class="btn btn-primary">Contact Me</button>
</div>
</div>
css
.parallax-overlay {
position: absolute;
left: 0;
top: 120;
width: 100%;
height: 100%;
background-image: url(../img/pattern.png);
background-repeat: repeat;
background-color: rgba(44,62,80,0.4);
z-index: 2;
min-height: 460px;
}
.jumbotron {
background-image:url('../img/main.jpg');
height: 100%;
font-family: 'Hammersmith One', sans-serif;
text-transform: uppercase;
letter-spacing: 6px;
text-align: center;
min-height: 460px;
}
.jumbotron .container {
position: relative;
top:120px;
}
.jumbotron h1, .jumbotron p, .jumbotron a, .jumbotron button, .jumbotron img
{
position: relative;
z-index: 3;
}
.jumbotron img
{
margin-bottom: 5px;
padding: 2px;
}
.jumbotron button
{
margin-top: 18px;
width: 130px;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
padding: 10px;
font-weight: bold;
}
.jumbotron p {
font-size: 12px;
color: #e3e3e3;
}
.jumbotron a {
font-size: 15px;
color:#fff;
text-decoration: none;
}
Don't put anchor tags inside of button tags.
Either make it an actual button and redirect users to your contact me page when they click it, or style the button using Bootstrap's button classes.
BOOTPLY
HTML:
Contact Me
You can't put <a>s inside <button>s. They don't work properly and it's very unclear what proper behavior for such a combination would even be.
I have a pretty specific question: I'm building something like a simple flat table (I don't use table itself because of rounded borders issue).
I'm using unordered list here and the problem is that I can't figure out how to align items in the second column, taking into account that the content should be dynamic (e.g. changing numbers).
Here's the markup for one row:
<section class="ktbl_head">
<ul>
<li>VALUE</li>
<li>VALIDITY</li>
</ul>
</section>
<section class="ktbl_mid_wht">
<ul>
<li>500 units</li>
<li>15 days</li>
<button class="btn btn-sm getdramz pull-right">GET</button>
</ul>
</section>
And CSS:
.ktbl_head {
padding: 15px 0 0 0;
height: 100%;
background-color: #ebe7e7;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.ktbl_head ul li {
display: inline;
padding-right: 135px;
font-family: "Open Sans", sans-serif;
font-size: 14px;
font-weight: 300;
color: #888888;
}
.ktbl_mid_wht {
background-color: #ffffff;
height: 100%;
padding: 20px 0 0 0;
}
.ktbl_mid_wht ul li {
display: inline;
text-align: left;
padding-right: 90px;
font-family: "Open Sans", sans-serif;
font-size: 18px;
font-weight: 400;
color: #888888;
}
Thanks for your attention!
here is my implementation on aligning the table without the table tag:
HTML
<div class="container">
<section class="ktbl_head">
<ul>
<li>VALUE</li>
<li>VALIDITY</li>
</ul>
</section>
<section class="ktbl_mid_wht">
<ul>
<li>500 units</li>
<li>15 days</li>
<button class="btn btn-sm getdramz pull-right">GET</button>
</ul>
</section>
CSS
.container {
border-radius: 10px;
border: 1px solid rgb(200,200,200);
overflow: hidden;
}
section {
font-family: "Open Sans", sans-serif;
width: 100%;
}
section:nth-child(2n+1) {
background-color: #ebe7e7;
}
section ul {
padding: 0;
margin: 0;
height: 65px;
}
section ul li {
width: 45%;
line-height: 65px;
display: inline-block;
}
section ul li:first-child {
padding-left: 35px;
}
Result
Explanation
You see, in the HTML, I added a new div as a container to create the curved corner with border-radius (the overflow: hidden needs to be used so that the content is encapsulated by the container).
For the CSS, section maintains general property such as font-family. Furthermore, section:nth-child(2n+1) is used to create background-color every other element starting with 1st,3rd,5th,... element. The selectors section ul, section ul li, and section ul li:first-child are used to make the CSS selectors more semantic (it makes clean code and easy to maintain in the future). Please see the code below for the demo. Happy coding!
PLAYGROUND
Give all the li's a width in which all of the content-length will fit..
I am implementing a very simple css menu. However, if I select a menu title in the menu bar (and thus open the menu associated with it) the width of the title extends to the width of the menu, which is not desired (i.e. the width of the title should not change). Check out the JSFiddle, or have a look at the markup:
<div id="menu">
<ul>
<li>you
<ul>
<li>register...</li>
<li>login...</li>
<li>forgot password...</li>
</ul>
</li>
<li>.</li>
<li>qan</li>
<li>.</li>
<li style="width: 20px"><a class="site">be</a>
<ul>
<li>be</li>
<li>do</li>
</ul>
</li>
</ul>
</div>
and the css definitions:
#menu {
font-family: Arial, Helvetica, sans-serif;
padding: 0px 5px;
font-size: 12px;
line-height: 18px;
color: darkgrey;
position: absolute;
top: 0px;
left: 0px;
height: 20px;
background-color: black;
z-index: 3;
/*opacity: 0;*/
white-space: nowrap;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-image: none;
}
#menu>ul>li {
font-weight: bold;
display: inline-block;
float: left;
padding: 2px 1px 0px 1px;
width: auto;
/*width: 10px;*/
}
#menu a { color: inherit; text-decoration: none;}
#menu>ul>li>a:hover { background-color: grey;}
#menu>ul ul {
display: none;
background-color: lightgrey;
padding: 2px 5px;
line-height: 14px;
min-width: 100px;
}
#menu>ul ul>li {
color: black;
padding: 2px 8px 2px 5px;
margin: 0px -3px;
}
#menu>ul ul>li:hover { color: lightgrey; background-color: grey;}
#menu>ul>li:hover ul { display: block;}
Since the menus are generated dynamically and contents meant to change on the fly and the font used is proportional, I cannot just set the widths of a title to a constant value which suppresses the resize. The width of the title should be determinded solely by the width of the text.
It used to work when I had implemented yuimenus, but that did all kinds of stuff to my CSS, the ramifications of which I found hard to control, so now I cooked up the menu by myself and am quite happy with it, save for the width change, and I haven't figured out which part of yui suppressed that. Any suggestions?
I don't agree with max-width.. this will make the link's width content-independent
use position:absolute; for the submenu: jsFiddle
Set width in li
Your updated example :- http://jsfiddle.net/8U5An/8/
Css:-
#menu ul li {
width: 25px;
}
See some useful example as well , how they handle same case by using width only :-
http://www.diy.com/diy/jsp/index.jsp?noCookies=false
http://www.puregrips.com/
My apologies if this too basic of a question but CSS is boggling me. I think I'm doing something that CSS is supposed to do easily but it is simply not working the way I read the documentation.
Here's my example. It's been massively simplified but the basic problem remains. I'm sure this is some core misconception on my part, I just don't know where it lies.
Here's the goal:
Here's what I get now:
Here is the HTML:
<div id="line-wrapper">
<div id="block-nice-menus-1">
<ul id="nice-menu-1">
<li><span title="Departments" class="nolink">Departments</span>
</li>
</ul>
</div>
<div id="block-imageblock-40">
<img src="http://www.kallenconsulting.com/home/files/top-menu-swish.png"
alt="" />
</div>
<div id="block-imageblock-42">
<img src="http://www.kallenconsulting.com/home/files/Transparent-4x6.png"
alt="" />
</div>
</div>
And here's the CSS:
/* -- nice-menu-1 is Main Menu -- */
#line-wrapper {
background-color: #ff0000;
}
#block-nice-menus-1 {
position: relative;
float: right;
margin-right: 0px;
height: 40px;
border: none;
background: #d6b982;
}
#nice-menu-1 {
display: block;
padding: 0px 30px;
border-top: none;
border-bottom: none;
color: #000;
background: #d6b982;
line-height: 2.4em;
font-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform:uppercase;
text-decoration: none;
}
#nice-menu-1 ul, #nice-menu-1 li {
border-top: none;
border-bottom: none;
border-color: #e11837;
}
#block-imageblock-40 {
/* top-menu-swish */
float: right;
margin: 0px;
}
#block-imageblock-42 {
/* top-menu-leading-line */
bottom: 0px;
height:6px;
width:100%;
background: #d6b982;
}
I can't get the floats right (I know, Yet Another Float Question). The main issue is that this is going to be a menu with a variable number of items, so as the menu grows, ("Departments" now, but later "Departments", "Services", "Sections", etc.) it should push to the left, reducing the length of the line I can't use a fixed length on the leading line (#block-imageblock-42). Also, the menu items will have separators, so I can't just full-width things. This needs to be done in pure CSS, no jQuery or other JS.
Here's my JSfiddle of the problem: http://jsfiddle.net/zjfsy/
UPDATE: I have modified the question to be more specific per the requests of folks trying to help. The "goal" image at the top has been updated to more accurately reflect the issue. One thing I really want to make clear is that this specific instance is not so important. I already doctored up a position:absolute fix that will hold for the short term. My desire is to understand better why this is so hard. I have three containers. I want two of them to float right and the third to expand to fill the space from the last container to the edge of the page. It seems like this is what float was supposed to do. I assume this is some base misunderstanding on my part.
Anyway. Here's more constraints:
The leading bar needs to expand to fill the empty space between the
left side and the swish.
Each of the tabs needs to have a separator that allows the background through.
The number of the tabs is variable, based on client choices -- which
can change regularly.
I can't really change the structure of the HTML, other than
modifying it with CSS.
And again, all help is very much appreciated.
here is my solution: http://jsfiddle.net/abbood/b56Vq/ (never used jsfiddle before.. so sorry if i did this wrong, or if i was supposed to fork your project)
here is the code:
<html>
<head>
<link href="betterStyle.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<ul>
<li><div></div><div>Departments</div></li>
<li><div></div><div>Services</div></li>
<li><div></div><div>Sections</div></li>
<li><div></div><div>stuff</div></li>
</ul>
</div>
</body>
</html>
//betterStyle.css
#wrapper {
height: 2.5em;
background-color: #e0203b;
background-image: url('http://s11.postimage.org/a1jmymlgv/bage_Box.png');
background-position: bottom;
background-repeat: repeat-x;
}
ul
{
list-style-type: none;
float: right;
margin: 0;
padding: 0;
}
ul li {
float: right ;
display: inline-block;
}
/* text */
ul li div:nth-child(2) {
line-height: 2.5em;
line-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform: uppercase;
background-color: #d6b982;
float: right;
padding-right: 1em;
}
/* image */
ul li div:nth-child(1) {
background-image: url('http://s8.postimage.org/b2qycoatd/top_menu_swish.png');
background-position: left top;
background-repeat: no-repeat;
float: left;
width: 53px;
height: 40px;
line-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform: uppercase;
}
notes:
i created my own image and I linked to it using some image hosting service.
you can add as many tabs as you want (i assumed that each tab will have that image attached to it.. i wasn't sure how you wanted the final thing to look like (the right edges look too sharp).. but i'm sure you can adjust it to your liking.. when adding extra tabs the horizontal line shrinks.. i think that's what you meant when you said so as the menu grows, it should push to the left, reducing the length of the line
update:
Here is the updated answer without changing a line in the html: http://jsfiddle.net/abbood/SkxkC/ (for some reason there is a bump under the folder image in jsfiddle.. i tested it on mac chrome/safari/firefox and they worked fine.. lemme know if it isn't working perfectly for you though)
html (pretty much same.. just added a couple of tabs just for fun):
<body>
<div id="line-wrapper">
<div id="block-nice-menus-1">
<ul id="nice-menu-1">
<li><span title="Departments" class="nolink">Departments</span>
</li>
<li><span title="Departments" class="nolink">Services</span>
</li>
<li><span title="Departments" class="nolink">Classes</span>
</li>
</ul>
</div>
<div id="block-imageblock-40">
<img src="http://www.kallenconsulting.com/home/files/top-menu-swish.png"
alt="" />
</div>
<div id="block-imageblock-42">
<img src="http://www.kallenconsulting.com/home/files/Transparent-4x6.png"
alt="" />
</div>
</div>
</body>
css:
/* -- nice-menu-1 is Main Menu -- */
#line-wrapper {
background-color: #ff0000; /* red */
height: 40px;
position: relative;
z-index: -2;
}
#line-wrapper div {
background-color: #ff0000; /* red */
}
#block-nice-menus-1 {
position: relative;
float: right;
margin-right: 0px;
height: 40px;
border: none;
background: #d6b982;
}
#nice-menu-1 {
display: block;
border-top: none;
border-bottom: none;
color: #000;
line-height: 2.4em;
font-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform:uppercase;
text-decoration: none;
margin: 0;
padding: 0;
}
#nice-menu-1 ul {
padding: 0;
background-color: #ff0000; /* red */
}
#nice-menu-1 ul, #nice-menu-1 li {
border-top: none;
border-bottom: none;
border-color: #e11837;
}
#nice-menu-1 li{
list-style-type: none;
display: inline-block;
padding: 0 2em;
background: #d6b982; /* bage */
height: 40px;
}
#block-imageblock-40 {
/* top-menu-swish */
float: right;
margin: 0px;
}
#block-imageblock-42
{
/* top-menu-leading-line */
bottom: 0px;
height:6px;
width:100%;
background-color: #d6b982 !important;
position: absolute;
z-index: -1;
}
I a have also done something similar that does not use the position:relative feature for the #line-wrapper since that may cause you some problems when you implement it.
See http://jsfiddle.net/zjfsy/
#block-imageblock-42 {
/* top-menu-leading-line */
height:6px;
width:100%;
background: #d6b982;
position:absolute;
margin-top:34px;
}
#line-wrapper {
display: block;
height: 40px;
width: 100%;
background-color: #ff0000;
}
Hope this helps! (I am definitely going to vote wxactly's answer up since it is a better answer than mine since it doesn't require "hard coding" with magic number margins, etc. Definitely use his answer if you can, but now at least you have two different ways.