I wrote a little program in angular using an ui-select element. The problem is that the search bar is really too long and I didn't find how to reduce it. Usually, we have some "width" properties that you can change for that but the css code is too complicated and I didn't find how to manage that. What I want to do is to save three bars at the same line.
I copied the sample from the official page of the ui-select, so it contains a lot of things in css that I didn't understand and I don't know much about css or bootstrap...
The style element in the index.html is this one :
<style>
body {
padding: 15px;
}
.select2 > .select2-choice.ui-select-match {
/* Because of the inclusion of Bootstrap */
height: 29px;
}
.selectize-control > .selectize-dropdown {
top: 36px;
}
</style>
</head>
And they included a huge select.css file in their sample that you can find in my plunker : http://plnkr.co/edit/kuryoI5osBtRihYAeoVH?p=preview
Can you show me how can I reduce the width of th search bar?
Can you PLEASE show me how to remove all the unecessary line from the select.css included in the plunker that are not used in my example ?? I don't know how can I do that efficiently. I'm afraid to delete important elements and I really got lost in that huge css file.
Thank you in advance !
Edited 2 (How to use the col-xx-nn) properties with bootstrap
The xx indicates in which view you want the property to be applied:
xs : extra-small devices
sm: small devices
md: medium devices
lg: lg devices
The nn indicates how many column the element will occupy (total is 12). Please see http://getbootstrap.com/getting-started/ for reading the full docuemntation.
And this is how your code would be...
<div class="row">
<!--First ui-select-->
<div class="col-md-4"> <!--1/3 of 12 -->
<ui-select ng-model="selectedItem">
<!--ui-content-here--->
</ui-select>
</div>
<!--Second ui-select-->
<div class="col-md-4"> <!--1/3 of 12 -->
<ui-select ng-model="selectedItem">
<!--ui-content-here--->
</ui-select>
</div>
<!--Third ui-select-->
<div class="col-md-4"> <!--1/3 of 12 -->
<ui-select ng-model="selectedItem">
<!--ui-content-here--->
</ui-select>
</div>
</div>
Edited
Include a custom css and put these rules. Make sure to include this after the ui-select css files in order to overwrite its rules:
.ui-select-container {
max-width: 200px; /*put the desired width here!*/
}
.ui-select-bootstrap > .ui-select-match > .btn {
max-width: 200px; /*put the desired width here!*/
}
.ui-select-bootstrap > .ui-select-choices {
max-width: 200px; /*put the desired width here!*/
overflow-x: scroll;
}
.ui-select-container .form-control {
max-width: 200px; /*put the desired width here!*/
}
Check this working plunker http://plnkr.co/edit/GN8i5PeFebS7Bo04GiUt?p=preview
In this plunker the rules are in myOwnCss.css file and I needed to add another custom rule in order to get this done properly because some of the other default styling of the ui-select. See below
/**some additional styling in order to get
the demonstration working properly (very possibly not needed for you)*/
.ui-select-bootstrap .ui-select-choices-row.active > a {
color: black;
background-color: white;
}
Important!:
Please, be aware that if you have an option with a name too long (it
takes more than you desired width, 200px in this case) it won't be
show completely in the selected option, and besides you have to
scroll over the x axis in order to read it completely in the dropdown
list.
When you create a ui-select item, it will generate a div for all its content, and with three bars, all those divs will probably be shown, one below the others. (TIP: you can solve this using bootstrap classes: col-md-4 for every div which wraps every ui-select)
Related
I am using the ui-bootstrap popover to list some notifications in my application.
I am using the uib-popover-template to design the content of the popover.
I would like to change the padding settings for each elements inside the popover.
I have tried using the popover-class attribute, but this just configures the CSS for the overall popover, and not the elements contained inside - this is what the .popover-content CSS class seems to govern.
Here is the html for the popover:
<span class="glyphicon glyphicon-globe" uib-popover-template="'myNotifications.html'"
popover-class="my-notifications-popover"></span>
Additionally, I don't want to do this just by doing:
.popover-content {
margin: 0px;
}
as I have used popovers in multiple places throughout my application and don't want them all to get their CSS redefined.
Can anyone tell me how to change this in the correct manner? All help much appreciated...
EDIT 1: I've tried to do as suggested in the comments by makshh and use CSS selectors to modify the '.popover-content' class. This class is a div contained within the parent '.popover' class.
I tried to do this with the following:
.my-notifications-popover {
margin-left: 0px;
}
.my-notifications-popover div {
margin-left: 0px;
}
This should make the margin-left zero for all child divs of .my-notifications-popover which should be applied to the popover. However it doesn't seem to be applied at all. This approach may not be ideal since it would set the margin for all divs below the popover which I may not want. Is there a way to specifically target the .popover-content class specifically using the CSS selectors?
I've created a plnkr to show exactly how this is not working.... You can see it here: https://plnkr.co/edit/Lr43L5b0YUbZEa5Zkvso
Added
.popover-no-margin .popover-content {
padding: 0px;
}
https://plnkr.co/edit/NiIh6qwZiscNZC5ZZrod?p=preview
which works because you passed the custom class
popover-class="popover-no-margin"
Well it seems like it was padding and not margin that needed to be changed! What a moron... oh well... sorry about that... still not sure what is the most accurate way to target just the popover-content div
Add this to your plunker example.. .popover-no-margin .popover-content{
padding:0px;
} and check if this is what you wanted.
This removes the extra spaces in the popover and it will be applies to this popover only as you have already defined the class popover-no-margin for this element.
Just check my code css is reflecting for popover content. You can handle css for popover by adding css to popover-content .popover-line or creating a custom css for popover as popover-class="my-popover-class":
HTML
<button popover-class="my-popover-class" popover-placement="right" uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Popover With Template</button> <script type="text/ng-template" id="myPopoverTemplate.html">
<div class="popover-line"> item 1 : This an example of angular ui-bootstrap popover custom content css</div>
<div class="popover-line"> item 2</div>
<div class="popover-line"> item 3</div> </script>
CSS
.popover-content .popover-line { margin: 10px 0px; }
.my-popover-class { color: blue; padding-left: 0 !important;}
Working demo is here
You can add your css accordingly as you want within .popover-content .popover-line (like color,margin,padding and so on)
I checked your code. You miss something. Dynamically created content can't load existing CSS or Js. You should load css and js when you click the button. Just follow this way. I hope it will work with it well.
<script type="text/ng-template" id="popoverTemplate.html">
<div class="popover-line"> item 1</div>
<div class="popover-line"> item 2</div>
<div class="popover-line"> item 3</div>
<style>
.popover-content{
display: block;
width: 200px;
}
.popover-content .popover-line{
background-color: #ff00ff;
border-bottom: 2px solid #121212;
padding: 10px 15px;
}
</style>
</script>
If you write this way your custom CSS then it will work property. See the Image below how I write code.
I hope it will help your project.
I'm doing a site for my uncle and I have a slight issue. When I visit it on a mobile, the Logo, site title, and navigation bar are all mushed together.
Here's what it looks like here.
How can I change this in CSS? I've looked all over, and I didn't find any answers. I've tried changing the #Media CSS part on style.css
You could try doing:
margin: 20px;
That should create a gap between the logo and the title should be farther apart. Also if you could include some code in your posts that would be great.
Since the site is currently down and there is no code what so ever, I can at least help you out with how to apply media queries.
#media (max-width: 480px) {
.<yourimg>: <your styling>;
}
This will allow whatever you are styling to be applied on screen that are LESS than 480px wide. You are obviously allowed to put in the desired width you want. This is but an example :)
You can read all about media queries here
Hope this helped a bit :)
// Marc Hjorth
i use this:
<div class="col m12 s12 l8 offset-l2"> </div>
which sets the width of the div based on the size of the screen viewing it, making it easy to design a mobile site without having to design two separate sites.
for example, i'd make a container around certain area, set it as a row with a div and then use columns which change based on screen size
<div class="sections-container">
<section id="our-vision" class="section">
<div class="row">
<a name="our-vision"></a>
<div class="col m12 s12 l8 offset-l2">
</div>
</div>
</section>
</div>
I had quick look at the website.
There is an issue with an empty side bar that pushes the navigation down.
The sidebar with the following id:
id="sidebar-header"
You should try to disable the sidebar in your theme if you don't need it.
or you can add a simple css rule to your stylesheet to not display it:
#sidebar-header { display: none; }
to move the mobile menu you can edit this style rule in style.css on line 2795:
#screen and (max-width: 760) {
...
#access {
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 100%;
padding: 0;
background: none;
box-shadow: none;
}
...
}
Edit the top and left properties there (add some pixel values like: top: 70px; for example)
I hope this helps.
For a webpage grid-layout I decided to use Flexbox. Now I wanted to implement some "auto-functionality", so that grid-boxes can later be inserted without the need to add classes or styles in the HTML. One of this features is to make a box allways be 75% as tall as it is wide - even if the box is resized by, for example, browserwindow resize. Off course, if the boxes content extends the 75%-height, it should (and only then should) increase its height to fit the content. I searched for hours to find a suitable solution, but I finally got it working. So I thought at least, until I added content to the box.
The auto aspect-ratio works fine, as long as the box is empty. If I add content, the 75% of the width is allways added to the height it has through extension by its content. I made a jsfiddle to clearly visualize the problem:
JSFiddle wd5s9vq0, visualizing the following Code:
HTML-Code:
<div class="container">
<div class="content-cell"></div>
<div class="content-cell"></div>
</div>
<div class="container">
<div class="content-cell">
This cell has an inreased height because of
it's content. The empty space below the
content is the 75% of the cells width.
</div>
<div class="content-cell"></div>
</div>
CSS:
.container {
display: flex;
width: 400px;
}
.content-cell {
flex: 1 1 0;
margin: 10px;
background-color: #ccc;
}
.content-cell::after {
content: "";
display: block;
padding-top: 75%;
}
If I didn't knew it better, it looks like a floating-problem - but I think the ::before / ::after selector should add the block-element before the element it is used on and not inside it.
Does anyone has an idea on how to fix this problem?
This seems to be a very widespread problem on the internet, and most solutions you find are either about wrapping the content, absolute-positioning the content or a mixture of both. This has numerous and case-dependent downsides. After hours of playing around with the code, I finally found a combination of CSS proporties that work without the need to add any DOM or make the content absolute-positioned. This looks quit basic, and I am wondering why it took me so long and why you can't find it out there on the web.
The HTML:
<div class="mybox aspect-full">
This is text, that would normally extend the box downwards.
It is long, but not so long that it extends the intended aspect-ratio.
</div>
The CSS:
.mybox {
width: 200px;
}
.aspect-full::before {
content: '';
display: block;
padding-top: 100%;
float: left;
}
The only downside I could find is that the content of your cell must float. If you use clear on one of your child objects, it is positioned below the expander-block and you are back to the original problem. If you need to clear the floating of divs inside of these aspect-ratio-cells, you might consider to wrap them and keep the wrapper floatable.
i have a problem with z-index on my webpage, i need move shopping bottons to the top -100px but when i try it the button loose the actions not work anymore, i try to use z-index: 99999 but not work too, i need some help! here my page link limitx.panamerik.net
----IMAGES-----
This is the real image:
I need make this:
You're using top value in negative that means there could be problems with the followings:
the parent div is set to overflow:hidden; and don't show the element i.e. hide the element going behind the parent div. (remove overflow:hidden from the parent)
z-index value is not working? You didn't explicitly declared the position. (set position:relative or absolute)
UPDATE: After looking at your screen shots again I realized that you want to display the button to the right of the product images. I'm not sure if this is a good idea, because this theme is meant to be responsive.
But if you really, really, really want to do this then you may try to add the following <CSS> to your custom.css file:
#media only screen and (min-width: 768px) {
.products-grid .actions {
margin: 0;
position: absolute;
top: 100px;
right: -25px;
}
.owl-wrapper {
z-index: 1;
}
.slider-arrows1 .owl-controls .owl-buttons .owl-prev, .slider-arrows1 .owl-controls .owl-buttons .owl-next {
z-index: 2;
}
}
This will work as you can see in the screen shot below, when hovering the button.
I have added #media only screen and (min-width: 768px) because of the responsive nature of the theme. Otherwise, when the browser viewport gets smaller, the buttons would overlap the image. You may want to play a little with this setting and should test it on some mobile devices too.
To learn more about this see this question.
EDIT: I'll leave my original answer below, just in case this may
helpful to someone else in the future...
I see that you use Infortis Ultimo theme, which is a great choice. I don't think you should use <CSS> to move the button. It is better to move the entire <div class="actions"></div> to the top.
The result will look like this:
You can do this by making some changes to the following file:
app/design/frontend/ultimo/default/template/catalog/product/list.phtml
Somewhere around lines 273 to 289 (depending on the themes version) you will find the code for this:
<div class="actions clearer<?php echo $actionsClasses; ?>">
....
</div> <!-- end: actions -->
Note: It is best to first copy the entire list.phtml file to your own sub-theme
and make the changes there.
In your sub-themes list.phtml file just cut the section I mentioned above and move it up to somewhere around line 216 of the file.
Paste it right after the beginning of the <list class="item"> element and before the <div class="product-image-wrapper"....>, just like this:
<li class="item">
<!-- PUT THE CODE HERE -->
<div class="product-image-wrapper" style="max-width:<?php echo $imgWidth; ?>px;">
Also don't forget to add this in your custom.css style sheet:
.products-grid .actions {
margin: 0 0 10px;
}
This should do the trick for you!
TL;DR : Before you read anything, the desired end-result is illustrated in the image below, otherwise refer to the JSFiddle. Preferably, I would like to only use CSS and not modify the DOM structure.
The icons must be aligned completely to the right (hence the .pull-right), but the icons must be stacked vertically (Sometimes some icons must not appear, so they are .hidden, like the .fa-undo icon in the second row).
(When I say 'the icons' i mean the <i> tags and the <img> tag)
The icons must not make the textarea go down (no margin on top of the textarea).
Hopefully, the WIDTH of the textarea would be dynamic and not statically put to width: 90%; for example. It should take as much width as possible, without interfering with the vertical icon stack.
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
In general, images that are UI elements, and not content, should be CSS backgrounds, not inline images. You then use class names to control the image content.
You should be doing this, or something similar:
td.fr {
background-image:url(/images/fr.gif);
background-repeat:no-repeat;
background-position: top right;
}
The same should go for your buttons. Use <button> and style the background.
Not exactly what you wanted I'm afraid, but this is how I'd achieve that result:
fiddle
<div class="pull-right icons">
<img src="http://www.convertnsftopst.net/images/gb.gif" class="pull-right" />
<i class="fa fa-reply"></i>
</div>
td .icons{
width:20px;
text-align:center;
}
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
I was unable to do it without adding another pull-right container, I fear that doing it with only CSS would end up being an odd hack
Fixed here : http://jsfiddle.net/QTXxp/2/
What was lacking when I asked this question was the clear:right; and the use of <div> (or display: block;)
Here is the CSS (if you're too lazy to open the JSFiddle) with the addition of the boostrap class pull-right on the div.icons
textarea.hover-edit {
width: 90% !important;
}
div.icons {
width: 10% !important;
}
div.icons > div > i.fa {
margin-top: 4px;
margin-right: 4px;
}
div.icons > div.action-icon-right {
float:right;
clear:right;
}