There were several threads about getting inline-form label to be inline with angular-ui-select, and I have managed to get that label inline, but still looks like angular-ui-select width is broken in form-inline.
I have created Plnkr to demonstrate that.
I have added css code
.form-inline .ui-select-container .ui-select-toggle,
.form-inline .ui-select-container .ui-select-search {
width: 100%;
}
.form-inline .ui-select-container {
display: inline-block;
vertical-align: middle;
width: auto;
}
So that label is inline with select box, but select does not take same width as inputs, and if you press on select box, then select expands in same width as input bellow.
Question is, how to make angular-ui-select same width as input bellow, so there is no shrink/expand effect on select box, when activating it.
I will add screenshots, that shows, how it acts now:
Select in inactive state
Select in active state
As you can see, element width is changing on click, but how to make it same as input bellow, as input bellow is taking width dynamically ?
I had the same issue in some projects I developed and I was always setting a min-height. I think I found a solution.
Just added
.form-inline .ui-select-container input.form-control.ui-select-search.ng-hide {
display: block !important;
visibility: hidden;
height: 0;
border: 0;
padding: 0;
}
http://plnkr.co/edit/b1CfIHdDEu4qBsxHeEzc
Related
i have a input tag that can search skills. when i type, the option bar will be under the profile card.
i want to make my select option on top of the profile card. [](https://i.stack.imgur.com/3E724.png)
here is my css code for select option box:
`
.hover {
list-style-type: none;
padding: 0;
margin: 0;
height: 400px;
width:300px;
overflow: auto;
position: absolute;
display:block;
}
`
im trying to make my select option box on top of the profile card
Use z-index
The z-index prioritizes the stacking of elements.
Give the select option a higher z-index than the card element.
You have to add css property z-index to the expended box.
eg. z-index: 12;
I'm working on a PWA for a chromebook(schools) and I'm wondering what the most best way to have dynamic sizing of dialog boxes.
I have methods set up for each HTML element that we can use and pass the values we need for this (input/checkbox/label) etc - so I have multiple dialog boxes with the same classes but required different sizing.
I have some basic stuff like
.modal {
min-width: 390px;
max-width: 600px;
display: none; /* Hidden by default */
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 0px;
border: 1px solid #888;
width: 40%; /* Could be more or less, depending on screen size */
border-radius: 6px;
font-size: 14px;
}
I also thought of adding a width value to send when creating the dialogs but I don't like that solution. Something that gets the width of the largest element and adds 10px padding to that or something?
Is there something that I'm missing that could be an easy solution? (It's also ideally vanilla javascript)
If I've understood your question correctly, you are trying to create a class for modal popup windows that will be a different size depending on the content inside, and that you can toggle visibility on using Javascript.
Perhaps too simple of a solution, but have you considered using padding as a replacement for the min-width value in your css?
Something like margin: 0; padding: 0.5vw 195px; /* instead of min width, use padding */
This will set the width of the element to 390px(195px padding-left, 195px padding-right) + width of html content, (see codepen below).
https://codepen.io/KXNG420/pen/eYdvZgN
As for setting a max-width you could add in a quick check when you are toggling the visibility of the modal window.
Hopefully this at least helps a little bit.
I need a box that slides up from the bottom of my page. I will use the box to show important information to new users. So for example, immediately after signup, the box will slide up with a welcome message.
I've made this jsfiddle that to some extend exemplifies the desired behaviour. It's just a div that gets slided up from the bottom:
$('.foot').addClass('slide-up', 500, 'easeOutBounce');
However, the code is only to exemplify, because the implementation is insufficient for the following reasons:
The bottom box has a pre-determined 500px height, because it's initially hidden 500px below the browser. Instead, I need just the box height to fit its content. The content will vary, and will even be changed through javascript once loaded.
The bottom box emerges on top of other elements. Instead, I want to split the screen in 2. A bottom half that has as much height as the box content needs. And a top half that behaves just like a regular web page, i.e. if there is too much content the user can just scroll down. To exemplify the described effect you can check this jsfiddle (the code has no relevance though)
How could achieve the described behaviour?
After experimenting with several methods, I ended up with a solution that combines some ideas given in freedomm-n's comments (modify the size of the main div) and in Nikhil's answer (use a flex container). You can see the result in this jsfiddle.
For the following markup:
<div id="divContainer">
<div id="divTop">
Main content
</div>
<div id="divFooter">
Footer content
</div>
</div>
And these styles:
html, body, form
{
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
#divContainer
{
width: 100%;
height: 100%;
}
#divTop
{
overflow-y: auto;
padding: 8px;
height: calc(100vh - 16px); /* Accounts for padding and border (if any) */
}
#divFooter
{
padding: 12px;
text-align: center;
border: 1px solid black;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.containerEnd
{
display: flex;
flex-direction: column;
}
.topEnd
{
height: auto;
flex-grow: 1;
}
This Javascript code is used to animate the div elements:
function slideUpFooter() {
var currentHeight = $('#divTop').height();
var footerHeight = $('#divFooter').outerHeight(true);
$('#divTop').animate(
{ height: currentHeight - footerHeight },
2000,
'easeOutBounce',
function () {
$('#divContainer').addClass('containerEnd');
$('#divTop').addClass('topEnd');
});
};
The function called at the end of the animation sets the flexbox parameters, to ensure that the footer sticks to the bottom of the page.
I have updated your Fiddle. Look below for details.
You don't need to use position: fixed for the .foot section, you could use position: relative instead. Since I noticed you were using flex, I took the liberty to fix this using the same.
Changes made
Firstly I suggest adding a div container, giving a class name say - container.
Make the container display: flex & change the default direction to flex-direction: column.
Now since you want the main-content to be scroll-able depending on its contents, you need to first set a height to this section with height: 200px; and then make it scroll-able using overflow-y: auto;
Let me know if you have any doubts.
So I'm working on a silly to do list app using mostly materialize and jquery.
Here is my codepen:
http://codepen.io/centraleft/pen/adWvPp
Basically the user enters text, my javascript takes that text and makes a new list element with a button inside of it. I want the button to always be on the far right of the list item regardless of the text inside the list element, so I float the button to the right however I run into a problem where I have an ugly little black sliver at the bottom of my list! Use the app once and you will see.
Is there another way to accomplish what I'm trying to do? Or a way to get rid of that black sliver with CSS?
Here is my current CSS for the button:
.orange {
bottom: 7px;
float: right;
height: 35px;
width: 35px;
}
The problem is your button is bleeding outside of your list. Set your lis to have a max height and overflow: hidden. See my fork.
The additions (CSS):
.collection-item {
height: 42px;
overflow: hidden;
}
I've been tasked to create an accessible/responsive carousel and have come across an issue in Chrome regarding the focus of hidden elements.
As per this jsfiddle (http://jsfiddle.net/ft1oosep/); if you tab until the hidden element gets focus you'll see the link is hoisted into view without any update to the css properties of the element.
For the carousel, this causes problems as I need to keep track of where the carousel is at any given time. I've attempted to blur on focus but even that seems too late. Is there an easy solution to this problem or am I going to develop some complex focus/tab management?
Thanks in advance
(Please, no responses suggesting carousels are a bad idea... Its the task I've been set)
Example Code:
<style>
body {
background-color: #f2f2f2;
font-family: 'Arial';
font-size: 13px;
}
div {
width: 200px;
height: 200px;
overflow: hidden;
background-color: #ffffff;
}
a {
width: 200px;
height: 200px;
text-align: center;
background: #A6C6DD;
display: block;
color: #ffffff;
text-decoration: none;
}
a:last-child {
background: #746F9E;
}
</style>
<p>Pressing tab forces hidden link into view.</p>
<div>
Visible Link
Hidden Link
</div>
In my case, I added a dynamic tabindex attribute, so that when the tab-able elements where hidden, it was tabindex="-1" (prevent all tabbing) and when visible it becomes tabindex="0" (tab-able in the normal browser tab-order).
The code will likely be specific to the instance, but in general, set the tabindex attribute of the problmatic element to tabindex="-1" on render, then in the event that makes the problmatic element visible set tabindex="0" on that element whenever it is visible (and back to tabindex="-1"` once hidden again.)
Accessibility note: very rarely should anything other than -1 (disable tabbing) or 0 (normal tabbing flow) be used for tabindex values.
Would adding a node with js after the first link gets blurred be of any help ? So while the carousel is running there is no node there until tabbed through.