unname coder's blog

8 2 I have a div tag and I realized that it is not filling 100% of the height as it should. My code: #container { width: 100vw; height: 100vh; background: purple; } body { margin: 0px; } <div id="container"></div> <div id="container"></div> What's happening? Well, if I only have this code snippet above that I put the div to occupy 100% of the viewport of course! The problem is that I don't only have this code on my page, I have more things and I inserted this code section inside the body tag, a certain" place "inside the body tag, that is, I inserted some elements, and after these elements have this div, but it does not occupy, 100% of the viewport observe how it is How is the resu...

7 1 Page: https://ensjotannklinikk.no/forside-wip Here's a fiddle The first menu item called " Behandlinger " is set up with this JS (courtesy of biberman) to make the submenu emerge and retract properly. var submenu = document.querySelector('.behandlinger-meny'); var menuTrigger = document.querySelector('.behandlinger-item'); //javascript version of jQuery isChild() function isChild(item, parentItem) { while (item != undefined && item != null && item.tagName.toUpperCase() != 'BODY'){ if (item == parentItem){ return true; } item = item.parentNode; } return false; } menuTrigger.addEventListener('click', function() { submenu.style.height = '55px';...

5 This question already has answers here : What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? (3 answers) Closed 26 days ago . I want three buttons to each take up 33% of the assigned space. They are grouped in a class "numbers". When I define the width for the button tags, that works fine, but when I do it for all ...

I am currently making a chat bubble in react-native. Since I am new to react-native I first tried to make the chat bubble on a browser and then tried to replicate the same in react-native. I am struggling to replicate the arrow in react-native. Any ideas/suggestions? Normal HTML/CSS: <div> <p class="to-me">Hey!</p> </div> div { padding:20px; justify-self: center; align-self: center; text-align: left; display: flex; flex-direction: column; width: 450px; } div p { font-size: 16px; line-height: 1.4; margin: 1px 0; padding: 8px 17px 6px 13px; max-width: 380px; position: relative; border-radius: 18px; } div p:after { position: absolute; content: ""; top: 0; bottom: 0; right: 0; left: 0; z-index: -1; } div p.to-me { color: black; align-self: flex-start; background-color: #E5E5EA; } div p.to-me:after { background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3....

I want to style Picker in React-Native, if with iOS I handled through with styling with css, Android picker not styling with React-Native styles. I found how to create the Android native styles with xml files but I can't reach them from my React-Native components. This is my code for Android version of Picker. if (Platform.OS === 'android') { return ( <Picker style={styles.inputContainer} selectedValue={this.props.value} onValueChange={this.props.onValueChange} mode='dropdown'> {this.props.items.map((i, index) => ( <Picker.Item key={index} label={i.label} value={i.value} /> ))} </Picker> ); } Android styles <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:spinnerItemStyle">@style/SpinnerItem</item> <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</...

I would like to put a white bar which would take the all width at the bottom of the screen. To do so I thought about using absolute positioning with the inherited flexbox parameters. With the code following it renders something like this. Here is my code : var NavigationBar = React.createClass({ render: function() { return( <View style={navigationBarStyles.navigationBar}> //Icon 1, Icon 2... </View> ); } }); var Main = React.createClass({ render: function() { return( <View style={mainStyles.container}> <NavigationBar /> </View> ); } }); var mainStyles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#456783', } }); var navigationBarStyles = StyleSheet.create({ navigationBar: { backgroundColor: '#FFFFFF', height: 30, position: 'absolute', flexDirection: 'row', bottom: 0, justifyContent: 'space-bet...

I'm creating a form in React Native and would like to make my TextInput s 80% of the screen width. With HTML and ordinary CSS, this would be straightforward: input { display: block; width: 80%; margin: auto; } Except that React Native doesn't support the display property, percentage widths, or auto margins. So what should I do instead? There's some discussion of this problem in React Native's issue tracker, but the proposed solutions seem like nasty hacks. That should fit your needs: var yourComponent = React.createClass({ render: function () { return ( <View style={{flex:1, flexDirection:'column', justifyContent:'center'}}> <View style={{flexDirection:'row'}}> <TextInput style={{flex:0.8, borderWidth:1, height:20}}></TextInput> <View style={{flex:0.2}}></View> // spacer </View...

I have a big collection of svg images like this: <svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"> <g stroke="lightgray" stroke-dasharray="1,1" stroke-width="1" transform="scale(4, 4)"> <line x1="0" y1="0" x2="256" y2="256"></line> <line x1="256" y1="0" x2="0" y2="256"></line> <line x1="128" y1="0" x2="128" y2="256"></line> <line x1="0" y1="128" x2="256" y2="128"></line> </g> <g transform="scale(1, -1) translate(0, -900)"> <style> .stroke1 {fill: #BF0909;} .stroke2 {fill: #BFBF09;} .stroke3 {fill: #09BF09;} .stroke4 {fill: #09BFBF;} .stroke5 {fill: #0909BF;} .stroke6 {fi...

I'm trying to make a favourite checkbox on the right side of the div, this is the html structure: .star { visibility: hidden; font-size: 30px; cursor: pointer; color: orange; } .star:before { content: "\2605"; position: absolute; visibility: visible; } .star:checked:before { content: "\2606"; position: absolute; } .group { background-color: #20262e; } <div class="group text-truncate"> <label class="font-weight-bold"> <span class="align-middle text-truncate" style="color:white">This is a long text</span> <span class="align-middle" style="color: orange;">(3 items)</span> </label> <input type="checkbox" style="float:right;" class="group-checkbox star"> </div> if you look at the JSFIDDLE, you will see that the checkbox is greather than the container, how can I manage this? ...

Is it possible to show and hide text using a link with only CSS -- without using JavaScript at all? For example: On this page Note the "More" link. When you click it, it unhides text. This particular example is JavaScript, but I am not sure if it can be done with pure CSS. There’s the <details> element, which isn’t yet built into Edge: <details> <summary>more <!-- a bad summary --></summary> <p>Some content</p> </details> I’m not sure how hard it is to style consistently across browsers. There’s a common checkbox hack (where the checkbox can be hidden and the label can be styled to look like anything): #more:not(:checked) ~ #content { display: none; } <input id="more" type="checkbox" /> <label for="more">more</label> <p id="content">Some content</p> but it’s not always (maybe ever? hmm) appropriate to use it; you can usually ...